Always Use a Child Theme!

David Hayes
David Hayes / November 12, 2013
Posted In: Back-End Development, Using WordPress
Tags: , , , , ,
Difficulty:

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.

ShawshankRedempt_184PyxurzJust 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... 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! 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.

  • i.chzbgrYou 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.

21 Responses

Comments

  • Randy says:
    November 12, 2013 at 6:11 pm

    So true indeed. I just was asked to help finalize some edits to the Organic theme used with WooCommerce. The original coder edited the theme files directly not realizing that both the theme AND Woo would be overwritten upon updating. In the end, my child theme overwrote the Organic theme’s Woo template files which overwrote the Woo core template files! Sounds silly, but at least I know my changes will stick.

    Good advice that everyone should always follow!

    • David Hayes says:
      November 13, 2013 at 12:59 am

      Yah, Randy, it’s specifically too many experiences like you describe that lead to this post. Thanks for sharing!

  • Thomas says:
    November 12, 2013 at 11:18 pm

    It may be worth it to note that the functions.php in your child theme is still executed, but in a procedural order after the parent’s functions.php. So, you can put in all sorts of actions and whatnot in your child theme’s functions.php, and have them be based off of stuff coming out of your theme’s parent functions.php.

    • David Hayes says:
      November 13, 2013 at 12:57 am

      That’s a good note, Thomas. Upon rereading it, it could be a bit confusing. Thanks for pointing it out; I’ve added the note to the bullet, I hope it is a little more clear.

  • Mike says:
    November 13, 2013 at 1:54 am

    Great article – luckily a lesson I learned early on in my workings with WordPress.

    I still come across a few themes that don’t ‘allow’ child themes – in these cases how difficult is it to alter the parent theme so that child themes will work properly? And if is possible can it be done in a way that updates won’t affect the revisions?

    • David Hayes says:
      November 13, 2013 at 11:29 pm

      Hey Mike, that’s a problem I wish there was a better solution for. Unfortunately you’re getting burned by the “Henry VIII”/”no grandchildren” issue with the way WordPress themes work. There isn’t really anything you can do.

      It’s possible to manually combine a parent and child theme into a single theme, and make yours a child of that combination, but then you’re cut off from both upgrade paths. What I would recommend is just editing the child theme you’ve purchased, because it’s less likely to have critical security updates or new features added than the core/parent/”framework” theme. Hardly a good solution, but the best available in the existing WordPress space.

      • Piet says:
        November 14, 2013 at 1:15 am

        I do not agree, I think it is actually possible to make a child theme of an existing already edited theme, but it takes a bit of work.

        1. First you need to save your entire current theme under a different name, let’s say “child” (it obviously can be anything you want).
        2. Then open the style.css and add to the header Template: parent-theme-slug as well as the line to import the styles from the parent theme: @import url(“../parent-theme-slug/style.css”);
        3. download a fresh copy of your original theme and add that to the themes directory

        You are now basically running a parent/child already, but it is not very useful and prone to errors (as there will be double functions being called)

        4. remove all files that you don’t have edited from the child theme, you won’t need them anymore

        5. If you have added/edited any functions, you will need to separate them from the original functions and leave them in your child’s functions.php file. Everything that is original can be deleted from the child’s functions. This also goes for theme options and frameworks and what not where many themeforest themes come with, you won’t need all that in a child theme, it is perfectly fine that that stuff is all called from the parent only.

        6. adjust your child-theme’s stylesheet and try to leave only the styles you edited/added yourself (that’s most likely going to be a tough one)

        Especially step 5 and 6 are the most cumbersome, but not impossible. I would suggest to do this on a local install or at least a different install than your live site.

  • Piet says:
    November 13, 2013 at 3:54 am

    Good post and a good lesson.

    For most of the consulting work I do, I encounter the same exact problem “Why didn’t you make a child theme of this? Your theme has had many updates already, but you cannot do them, because you edited away in it already…”

    The problem I think lies in the fact that people that start dabbling around in code do no necessarily read posts like this. Maybe it should be a message plastered all over WordPress to make people (more) aware of this before they even start to install a theme?

    • David Hayes says:
      November 13, 2013 at 11:32 pm

      Piet, you’re exactly right. Lack of knowledge is the first and biggest cause of technical debt of all kinds, including in WordPress themes. I do think there’s already some text inside WordPress about it, but I don’t think more would hurt. Like right about the theme editor where people often start to change their theme: “It seems you’re editing a theme. Do you know about child themes?”

  • Hassan says:
    November 13, 2013 at 4:21 am

    Just a note, the functions.php file of the child theme runs *before* the parent theme, not after it. This is so that you can define pluggable functions in the parent theme.

    • David Hayes says:
      November 13, 2013 at 11:24 pm

      Thanks for pointing that out, Hassan. In my defense it was late when I added that bit, but that doesn’t make it right. It’s corrected now.

      I love Le Petit Prince, by the way. Possibly the greatest book of all time.

  • Darius says:
    November 13, 2013 at 8:47 pm

    Hi! Good clear guide on setting up a child theme, especially liked the ‘what is’ section.
    How would I go about “childing” up a live site running without a child theme? I have been backing up everything before updating just in case, and so far haven’t had any issues, but would love to move all the current and future changes to the theme into a child theme.
    I haven’t been able to find any info on this, maybe it’s relevant for some people reading this post.

    Also, I have done a little bit of looking into child theme plugins, if anyone is interested I can share what I found.

  • Pete says:
    August 3, 2014 at 3:00 am

    I don’t use child themes. I only use themes for their design, not their functionality, and therefore I have no need to update the theme. In fact I’m too worried if i do make a child theme from a parent theme and the parent theme is updated some of it’s functions will break my child theme. I add my my own functions by way of my own functions.php file and plugins. I like themes for their design, and only their design, not their widgets or fancy functions.

Pingbacks