How to Customize a Child Theme in WordPress

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

You can use a theme exactly as the author released it (called a parent theme), but you can also create customized child themes in WordPress. In this example we are using Twenty Ten on a WordPress site, since Twenty Ten is child theme–ready; the new child theme is called TwentyTen Child.

When you first create a child theme, the new theme replaces the style.css file of the parent theme, yet the new child theme's style.css file is empty. Now you want to tweak only those styles and/or features that you want to modify and leave the rest alone. The child theme first looks like this:

Loading a parent theme's style

One of the great things about Cascading Style Sheets (CSS) is how rules can override one another. If you list the same rule twice in your CSS, the rule that comes last takes precedence

For example:

a {
color: blue;
}
 
a {
color: red;
}

The first rule says that all links (a tags) should be blue, whereas the second one says that links should be red. Because CSS says that the last instruction takes precedence, the links will be red.

Using this feature of CSS, you can inherit all the styling of the parent theme and selectively modify it by overriding the rules of the parent theme. But how can you load the parent theme's style.css file so that it inherits the parent theme's styling?

Fortunately, CSS has another great feature that helps you do this with ease. Just add one line to the TwentyTen Child theme’s style.css file as at the end of the following listing:

/*
Theme Name: TwentyTen Child
Description: My fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyten
*/
 
@import url('../twentyten/style.css');

A number of things are going on here, so let's break it down piece by piece:

@import: This tells the browser to load another stylesheet. Using this allows you to pull in the parent stylesheet quickly and easily.
url('...'): This indicates that the value is a location and not a normal value.
(‘../twentyten/style.css’);: This is the location of the parent stylesheet. Notice the /twentyten directory name. This needs to be changed to match the Template: value in the header of the CSS so that the appropriate stylesheet is loaded.

After you refresh your site, you see that the child theme's design and layout match the original Twenty Ten theme. The updated child theme now looks like this:

Customizing a parent theme's styling

Your TwentyTen Child theme is set up to match the parent Twenty Ten theme. Now you can add new styling to the TwentyTen Child theme’s style.css file. A simple example of how customizing works is adding a style that converts all h1, h2, and h3 headings to uppercase.

/*
Theme Name: TwentyTen Child
Description: My fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyten
*/
 
@import url('../twentyten/style.css');
 
h1, h2, h3 {
text-transform: uppercase;
}

The child theme now looks this with the CSS style additions applied:

As you can see, with just a few lines in a style.css file, you can create a new child theme that adds specific customizations to an existing theme. Not only was it quick and easy to do, but you didn't have to modify anything in the parent theme to make it work.

Therefore, when upgrades to the parent theme are available, you can upgrade the parent to get the additional features without making your modifications again.

Customizations that are more complex work the same way. Simply add the new rules after the import rule that adds the parent stylesheet.