Customizing Theme Style with Child Themes

A WordPress theme consists of a collection of template files, stylesheets, images, and JavaScript files. The theme controls the layout and design that your visitors see on the site. When such a theme is properly set up as a parent theme, it allows a child theme, or a subset of instructions, to override its files. This ensures a child theme can selectively modify the layout, styling, and functionality of the parent theme.

The quickest way to understand child themes is by example. In this section, you create a simple child theme that modifies the style of the parent theme.

Currently, the default WordPress theme is Twenty Ten. Figure 5-1 shows how the Twenty Ten theme appears on a sample site.

You likely have Twenty Ten on your WordPress site, and Twenty Ten is child theme'ready; therefore, it's a great candidate for creating an example child theme. To keep the names simple, we call the new child theme TwentyTen Child (original, we know).

Creating a child theme

Like regular themes, a child theme needs to reside in a directory inside the /wp-content/themes directory. The first step to creating a child theme is to add the directory that will hold it. For this example, create a new directory called twentyten-child inside the /wp-content/themes directory.

Figure 5-1: The Twenty Ten theme.

To register the twentyten-child directory as a theme and to make it a child of the Twenty Ten theme, create a style.css file and add the appropriate theme headers. To do this, type the following code into your favorite code or plain-text editor, such as Notepad for the PC or TextMate for the Mac, and save the file as style.css.

/*
Theme Name: TwentyTen Child
Description: My magnificent child theme
Author: Cory Miller
Version: 1.0
Template: twentyten
*/

Typically, You'll find the following headers in a WordPress theme:

• Theme Name : The theme user sees this name in the back end of WordPress.
• Description : This header provides the user any additional information about the theme. Currently, it only appears on the Manage Themes page (AppearanceThemes).
• Author : This header lists one or more theme authors. Currently, it is only shown in the Manage Themes page (AppearanceThemes).
• Version : The version number is very useful for keeping track of outdated versions of the theme. It is always a good idea to update the version number when modifying a theme.
• Template : This header changes a theme into a child theme. The value of this header tells WordPress the directory name of the parent theme. Because our child theme uses Twenty Ten as the parent, our style.css needs to have a Template header with a value of twentyten (the directory name of the Twenty Ten theme).

Now activate the new TwentyTen Child theme as your active theme. (If you need a reminder on how to activate a theme on your site, check out Book VI, Chapter 2.) You should see a site layout similar to the one shown in Figure 5-2.

Figure 5-2 shows that the new theme doesn't look quite right. The problem is that the new child theme replaced the style.css file of the parent theme, yet the new child theme's style.css file is empty.

You could just copy and paste the contents of the parent theme's style.css file, but that would waste some of the potential of child themes.

Figure 5-2: The TwentyTen Child theme.

Loading a parent theme's style

One of the great things about 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;
}

This example is overly simple, but it nicely shows what we're talking about. 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 in the listing below.

/*
Theme Name: TwentyTen Child
Description: My magnificent child theme
Author: Cory Miller
Version: 1.0
Template: twentyten
*/
@import url('../twentyten/style.css'),

A number of things are going on here, so let me 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 so that the appropriate stylesheet is loaded.

Figure 5-3 shows how the site appears after updating the child theme's style.css file to match the listing.

Customizing the 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 to add a style that converts all h1, h2, and h3 headings to uppercase.

/*
Theme Name: TwentyTen Child
Description: My magnificent child theme
Author: Cory Miller
Version: 1.0
Template: twentyten
*/
@import url('../twentyten/style.css'),

h1, h2, h3 {
text-transform: uppercase;
}

Figure 5-4 shows how the child theme looks with the code additions applied—getting better, isn't it?

Figure 5-3: The updated child theme.

Figure 5-4: The updated child theme with uppercase headings.

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, 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 having to make 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.

Using images in child theme designs

Many themes use images to add nice touches to the design. Typically, these images are added to a directory named images inside the theme.

Just as a parent theme may refer to images in its style.css file, your child themes can have their own images directory. The following are examples of how these images can be used.

Using a child theme image in a child theme stylesheet

Including a child theme image in a child theme stylesheet is common. To do so, you simply add the new image to the child theme's images directory and refer to it in the child theme's style.css file. To get a feel for the mechanics of this process, follow these steps:

1. Create an images directory inside the child theme's directory.
2. Add an image to use into the directory.

   For this example, add an image called body-bg.png. We used a simple gradient that we created in an image editor.

3. Add the necessary styling to the child theme's style.css file, as follows:

   /*
   Theme Name: TwentyTen Child
   Description: My magnificent child theme
   Author: Cory Miller
   Version: 1.0
   Template: twentyten
   */
   @import url('../twentyten/style.css'),
   body {
   background: url('images/body-bg.png'),
   }

With a quick refresh of the site, you see that the site now has a new background. Figure 5-5 shows the results clearly by using the browser's zoom feature to make the site smaller.

Figure 5-5: The TwentyTen Child theme after editing the background image.

Using a parent theme image in a child theme stylesheet

Child theme images are acceptable for most purposes. Sometimes, however, you're better off using images supplied by the parent theme. You could just copy the parent theme image to the child theme, but that would prevent the child theme from matching the parent theme if the parent theme image ever changes. Fortunately, you can refer to an image in the parent theme with the @import rule the same way you can reference the parent theme's style.css file.

In the footer of the Twenty Ten design, a WordPress logo appears beside the phrase “Proudly powered by WordPress,” as shown in Figure 5-6. This is a parent theme image.

In this example, we want to add the logo image in front of each widget title in the sidebar. Because the logo image already exists inside the parent, we can simply add a customization to the child theme's style.css file to make this change, as follows:

/*
Theme Name: TwentyTen Child
Description: My magnificent child theme
Author: Cory Miller
Version: 1.0
Template: twentyten
*/

@import url('../twentyten/style.css'),

.widget-title {
background: url('../twentyten/images/wordpress.png') no-repeat
left center;
padding-left: 20px;
line-height: 16px
}

Save the file and refresh the site. Now we're showing our WordPress pride. (See Figure 5-7.)

Figure 5-6: The WordPress logo in the Twenty Ten footer.

Figure 5-7: Showing the WordPress logo before each widget title.

Using a child theme image in a parent theme stylesheet

Looking at the previous examples, you might wonder whether replacing an image used in the parent's stylesheet with one found in the child theme's directory is possible. That would require a change to the parent theme's stylesheet, and the idea behind a child theme is to avoid changes to the parent, so no, that isn't possible. However, you can override the parent theme's rule to refer to the child theme's new image by simply creating an overriding rule in the child theme's stylesheet that points to the new image.

Taking our WordPress pride from the previous customization a step further, the WordPress logo in the footer is much too small. We can do better—with a larger logo.

Fortunately, a 58-x-69-pixel WordPress button appears on the WordPress.org Logos and Graphics page (http://wordpress.org/about/logos).

After adding the desired logo to your child theme's images directory as wp-button.png, the following style.css file replaces the WordPress logo on the parent theme's footer with the new WordPress button:

/*
Theme Name: TwentyTen Child
Description: My magnificent child theme
Author: Cory Miller
Version: 1.0
Template: twentyten
*/
@import url('../twentyten/style.css'),
#site-generator a {
background-image: url('images/wp-logo-blue.png'),
}
#site-info {

width: 650px;

}

#site-generator {

width: 270px;

}

#site-generator a {

background: url('images/wp-button.png') right center no-repeat;

line-height: 59px;

padding: 0 63px 10px 0;

float: right;

}

Notice how some rules beyond just the background were modified in order to override parent theme styling that didn't work well with the new background. Now your child theme shows your WordPress pride loud and clear. The new look, shown in Figure 5-8, looks quite nice if you ask me.

Figure 5-8: The new WordPress footer button.