I get asked more and more, “What is a child theme?” Even though child themes have been in existence for a few years, they’re still not something the average WordPress user understands, but that’s changing and the topic is at the forefront of people’s minds when they’re thinking about their site’s design. WordPress users want to know if they should use a child theme instead of their existing theme, be it custom or prebuilt.
First, what is a child theme. A WordPress child theme is a theme that relies on another theme being installed. A child theme can’t stand on its own. At the simplest, the child theme is just a style.css file with an extra commented line. That’s it.
Using the Twenty Ten theme, let’s look at the comment block at the top of that theme’s style.css:
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: the WordPress team
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
*/
For a child theme, we’ll create a css file called style.css. We have to place a comment block at the top of the file in order for WordPress to recognize it as a theme – with one extra line that begins with “Template”:
/*
Theme Name: My Awesomest Theme
Theme URI: http://123.com/
Description: Uber-awesomeness incarnate.
Author: Me
Version: 1.0a
Tags: optional
Template: twentyten
*/
That extra line “Template:” is what makes this a child theme. It has the directory name of the theme you want as a parent. In this case, Twenty Ten is going to be our parent theme. Its directory is named twentyten, so that’s the name we use in the Template line. If we activated My Awesomest Theme in the Appearance panel, (Remember, we only have the CSS file as our child theme – nothing else.) WordPress will use Twenty Ten’s templates for the site’s framework, but it will look to My Awesomest Theme for the CSS.
Inheriting the parent theme’s CSS
Say you want to use the parent’s CSS. Maybe you like 99% of it & you’re just going to override a few parts of it. Using the @import statement, you can import the parent theme’s styles and then add your own declarations below it. Browsers read CSS in a specific order (this is the Cascade part of Cascading Style Sheets) so it makes it easy to override specific styles while keeping the rest.
Below your comment block, add this line:
@import url(../twentyten/style.css);
Your child theme will now look just like Twenty Ten. All of Twenty Ten’s styles in style.css get imported to your theme. In Twenty Ten, this is the basic declaration for H1 through H6:
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
clear: both;
}
In our child theme style.css, under the @import line, add this line:
h2 { font-weight:800;color:red;}
Save your changes and we’ve now made heading 2’s bold and red. Everything else stays according to Twenty Ten’s styles.
What about customizing template files?
What if you wanted to make structural changes to say, the header.php file? How would you do this in a child theme? It’s really simple. Copy the header.php file from the parent theme to your child theme’s directory and make your edits. WordPress will use your child theme’s header.php in place of the one in the parent theme.
That’s all there is to it.
Why use a child theme?
One very basic reason makes child themes beneficial: You can upgrade your parent theme without losing your design. A good child theme can persist through several WordPress upgrades. As a time-saver, this is pretty awesome. If you use Twenty Ten as a parent theme, there will be upgrades for Twenty Ten released. Version 1.1 just came out, in fact. Using a child theme on top of Twenty Ten, you in essence inherit those upgrades without having to redo your theme. Of course, the caveat exists that if you’re replacing template files, it’s on you to make sure your template files are up to date with released upgrades. That being the case, you’re still saving time and effort with a child theme as there are fewer files to go through than in a whole theme.
Another benefit of using child themes is for designers. Designers don’t have to build out a whole theme. They can create just a CSS file or a CSS file and the necessary templates.
Child themes present some serious advantages and they’re not that complicated to create. Give them a try.
More on child themes: