wordpress: modifying themes

Child Themes

Themes are, in essence, software. And software needs to be upgraded from time to time. You don't want to miss out on new features or bug fixes provided by the theme developer, right? But wait... you've modified the heck out of your theme -- if you upgrade it with a newer version, won't you lose all your changes?

Not if you go about theme modifications the right way. Recognizing this dilemma, the creators of WordPress introduced a concept called "Child Themes," which lets you make your changes "off to the side" where they won't be touched by future upgrades. It may sound like overkill, but the first time you find yourself locked out of a future upgrade by your own modifications, you'll wish you'd built a child theme. The good news is, it's easy!

For this exercise, let's work with the default 2010 theme that comes with WordPress. In practice, install whatever theme you want to work with in the usual way.

1) Create a new, empty folder in the wp-content/themes directory on your server, using standard web conventions (no spaces or special characters in the name). The folder could be named something like "jsmith_2010_child". Your child theme will live in this folder.

2) In that folder, create a blank style.css file.

3) Open that style.css and add the following lines:

You'll want to change most of the lines above to suit your needs. It's not critical what they say, as long as the Theme Name doesn't conflict with any theme you already have installed. The really important line is the Template: line - this must match the exact name of the folder that contains the parent theme! Likewise, edit the @import url line to match the path to the parent theme's stylesheet.

Save this bare-bones stylesheet file to the server, then go to the Dashboard's "Appearance" section and activate your new theme. Take a look at the live site and... nothing's changed! That's a good thing - at this point, all you've done is to activate a new theme that imports the entirety of the parent theme, with no changes.

Now let's try making a couple of changes, starting with the white background color of the content area. Note that this is a CSS tweak, not a template tweak - we're starting easy. According to our debugger, the white background color is defined on line 171 of style.css in the parent theme. Taking a look, we see this CSS block:

Copy that rule into the bottom of the style.css of your child theme, changing the background color to something else:

Save, refresh the page, and bingo! Your content area has a yellow background, even though you haven't touched the parent theme. The rules of CSS inheritance say that we can redefine an existing style, and wherever the rules conflict, the ones read in later will be used instead. Since the child theme's rules are read in after the parent theme's rules, the child theme wins that particular contest.

We can actually go even further. Trying using this instead:

That way, you still inherit the top margin and padding from the parent theme, overriding only the color.

Overriding Templates

It's only slightly more complicated for template overrides. Let's say you don't want to show the site description ("tagline") above the banner image. That tagline is referenced in the header template, not in the CSS. To get started, copy the header.php template over from the parent theme into your child theme's folder. Now edit the new copy of header.php, find this line:

and remove it. The same is true for any templates you want to override - copy that template into your child theme folder and edit it as needed. When WordPress detects a conflicting template file name in both the child and parent theme folders, it'll use the one found in the child theme. When the 2010 parent theme is next updated, your child theme will inherit all (or most) of its improvements and bug fixes, and you won't lose any of your customizations.

Yes, it's possible that there could be improvements to the templates you've decided to override, and you would miss those improvements in your upgrade. But that won't happen often, and you'll still benefit from changes to the rest of the theme. You can always copy changes over into your modified templates manually, if necessary.