Child Themes in WordPress

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

A WordPress theme consists of a collection of template files, stylesheets, images, and JavaScript files. Creating child themes allows you to upgrade customized versions of themes with new features when they’re released. 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 that 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. Let's look at how to create a simple child theme that modifies the style of the parent theme. Currently, the default WordPress theme is Twenty Ten.

Twenty Ten is child theme–ready; therefore, for this example, we'll create and call the new child theme TwentyTen Child.

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 twentyten-child directory inside the /wp-content/themes directory.

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 (Windows) or TextMate (Mac), and save the file as style.css:

/*
Theme Name: TwentyTen Child
Description: My fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyten
*/

Typically, you 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, this header appears only on the Manage Themes page (choose Appearance→Themes).
Author: This header lists one or more theme authors. Currently, this header is shown only in the Manage Themes page (choose Appearance→Themes).
Version: The version number is very useful for keeping track of outdated versions of the theme. Updating the version number when modifying a theme is always a good idea.
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 your example child theme uses Twenty Ten as the parent, your style.css needs to have a Template header with a value of twentyten (the directory name of the Twenty Ten theme).

Activate the new TwentyTen Child theme as your active theme. You see a site layout similar to the one shown.

The new theme doesn't look quite right. The problem is 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’d waste some of the potential of child themes.

Instead, you want to tweak only those styles and/or features that you want to modify and leave the rest alone. To do this, load a parents theme's style, and then customize the parent theme's styling.