Always Use a Child Theme!

One request for help we hear far too frequently in our work at Press Up is: “I pressed an update button, and now my site doesn’t look right.” The cause is usually that people have customized the look-and-feel of their public site without using a child theme.

Just using the theme works fine for them, for a while. But then they’ll get a notification that the WordPress.org repository or the (commercial) theme distributor has a new version of the theme. They click that convenient update button and all their beautiful customizations up and vanish, leaving nothing behind—not even a bemused-looking Morgan Freeman.

Or maybe they’re really smart about consciously avoiding their update notifications on the theme, but then they’re open to the security vulnerabilities. (I recently wrote a post on the Press Up blog about that very topic.) While themes are typically not doing some of the really risky things (like from-scratch insecure database queries) that some plugins might, there are still many possible security reasons to keep them up to date.

This dilemma is why you want a child theme.

What a child theme is

In plain English, a child theme is a theme that declares a “parent” theme which it depends on and gets most of its functionality from. By telling WordPress that it’s a “child” of some other theme, a theme saves itself from having to contain all the features and functionality that a full-fledged theme does, while still offering the convenient ability to make its own CSS, or even overwrite specific page templates of the parent.

If you’re modifying almost any theme—we’ll use the current WordPress default of Twenty Thirteen in this example—you can make just about every presentational change you’ll want to a child theme—while keeping yourself up-to-date, secure, and able to take advantage of new parent theme features. So let’s do that.

How to make a child theme

If you’ve never dealt with a theme before, it can be a bit intimidating but it’s not really that hard. Essentially you make a child theme by creating a new theme. This means, at the lowest possible level, that you make a new folder in your themes directory (wp-content/themes) and add a file to it called style.css. And the top of the file needs to contain the following lines:

/*
Theme Name:     Twenty Thirteen Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Thirteen theme
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentythirteen
Version:        0.1.0
*/

All but one line there is standard to all WordPress themes. The exception, which is exclusive to child themes, is Template: twentythirteen. What that says to WordPress that this theme should be a child of Twenty Thirteen. The reason that it’s lowercase is that this needs to use the theme “slug,” which is the name of the folder in which the theme is located. By default the Twenty Thirteen theme is in a folder with that name, and so WordPress will find it there.

Well, it works better. But it doesn’t look good…

There’s one problem with this new theme you’ll have made: by default it won’t look very good. This is because the way WordPress works with child themes is that every file is first looked for in the child theme, and then in the parent if it wasn’t in the child. Because our theme now has a virtually empty style.css file—which is the main source of visual styling for a theme—you’ll see something pretty drab.

The solution is a single line in the CSS file:

@import url("../twentythirteen/style.css");

Ah. That’s better!

What this does is pull all the contents of the parent theme’s style.css file into your child theme’s style.css file. Now bing-bang-boom, your site’s looking identical to the way it did, but you’re running a child theme.

Now, if you want to add some styling to the blockquote elements, for example, you can just add it in your child theme’s style.css. Of if you find you want to remove some of the template tags from your site’s single entry page, single.php, you’ll copy it from the parent theme into your child theme and make your changes to it there. This’ll show up immediately, replacing the parent’s single.php one-for-one whenever WordPress needs it.

You can edit your theme this way to your heart’s content, and because you’re on a child theme, you can update the parent theme without worries. Your changes—styles you’ll add to style.css or any replacement template you use—will be safe. Pretty cool, right?

A few caveats

These are good things to keep in mind when you’re starting to use child themes. There are some limits to the system, and while they shouldn’t stop you from using them they may be unexpected obstacles that I’d feel better warning you about in advance.

• You can’t make a child theme of a child theme. Like Henry VIII, WordPress doesn’t have grandchildren. This is most notable if you’re buying a child theme from a commercial vendor. Genesis the the most notable company selling them, so if you buy one keep this in mind. Because the child and parent relationship of WordPress themes only goes one level deep, you’re back with the problem we started with for a commercial child theme that gets updates.
• Every file in the child theme overwrites the file of the same name in the parent, except functions.php. If you find that you need to change a behavior in the parent theme’s functions.php file, you unfortunately will have to be more clever than copying over the functions.php file and making your changes. That works for every page template, but it doesn’t work for the logical controller that is functions.php. There are very good reasons for this, but it may catch you off-guard. (To be clear: a child theme’s functions.php is run and processed. It just happens before the parent’s, rather than replacing it one-for-one like the other files.)

As always, feel free to ask questions in the comments if you have any concerns or questions. We love to help.