Creating Child Themes

If you haven’t been working with WordPress for very long you may not know what a ‘child theme’ is. In which case it’s time to find out.

As everyone knows, WordPress sites are built around themes. For a fairly complete discussion of how themes work you should consult the Codex, but the basic idea is simple enough. There is a ‘theme directory’ that contains (at least) two files, index.php and style.css, which together are sufficient to implement a rudimentary website. When someone visits the site, the outer layers of WordPress carry out a certain amount of essential housekeeping and then invoke the theme’s index.php. These two files are all you absolutely need. You could even dispense with the CSS file if you wanted to be really spartan.

The index.php file generates the HTML that is to be sent to the browser, and could be as basic as:

<?php /* This file generates a very simple web page */ ?>
<!DOCTYPE html>
<html>
<body>
<p>Hello very simple world!</p>
</body>
</html>

In practice, or course, there will be a great many other files for handling the complexities of a typical website. They all live in the theme directory and its subdirectories, and together they comprise the site’s theme.

Now, it often happens that although a theme does pretty-much what you want it to it could be improved by a bit of tweaking. For example, suppose you want to change the colour of the site title and it’s not a built-in option for the theme. If you had written the site by hand you might fix this by a simple alteration to the CSS file — something like:

.site-title {
    color: #008000;
}

The temptation (I know — I’ve done it!) is to find the style.css file in the theme directory and modify it. Bad idea! As soon as you get a theme update your change will be overwritten, and you’ll have to edit the new style.css all over again. If you’ve only made one change perhaps this isn’t too bad, but if you’ve made several, and perhaps handed site development over to someone else, it’s a nightmare.

This is where child themes come in.

Before we get into that though, let’s orientate ourselves a bit. First of all, the location of the theme directory. Here’s the essential directory structure:

httpdocs
    |
    + -- wp-content
    |       |
   ...      + -- themes
            |       |
           ...      + -- twentyfifteen
                    |       |
                    |       + -- (etc.)
                    |
                    + -- twentysixteen
                    |       |
                    |       + -- (etc.)
                    |
                    + -- (etc.)

I’m assuming your site’s installed in httpdocs and you’ve installed themes TwentyFifteen and TwentySixteen, but the precise details aren’t important. And, obviously, I’ve omitted a lot of irrelevant detail. The essential point is that all the themes you’ve installed, including the one you’ve activated, are in subdirectories of the themes directory. Further, when you ask WordPress to activate a new theme, that’s where it looks for the themes it will list.

If you look at the directories for the installed themes on your server you will see that they all contain, among many other things, an index.php and a style.css. That’s where it all starts.

Suppose then we add another directory inside the themes directory. Let’s say we call it child. And suppose inside the child directory you have an index.php (perhaps our ‘Hello very simple world’ version) and a style.css (which we can leave empty for now). As far as WordPress is concerned we have just installed, but not activated, a new theme! (Actually we need to add a bit of identifying information to the files before WordPress will quite know what to do with them, but that’s the general principle.)

Now let’s come back to the real world. All we really want to do for now is tweak the colour of the site title (we’ll do more interesting things in a later post). For this we don’t even need the index.php file, as we’re only going to change the CSS, but unless we’re defining a whole new theme we do need to relate the changes to the existing theme. So we dispense with the index.php file altogether, create a style.css file that looks like this,

/*
Theme Name:   Child Theme for example.com
Theme URI:    http://example.com/
Description:  Extends TwentySixteen
Author:       Example
Author URI:   http://example.com
Template:     twentysixteen
Version:      1.0.0
*/

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

and drop it into the child directory.

Some of this is important; some isn’t. The theme name can be anything you like: it’s what WordPress will call the theme. Likewise the theme description. The really important thing is the ‘template’, which must the the name of the directory containing the theme we want to modify (I’m just using ‘twentysixteen’ as a working example). And the capitalisation must be correct — ‘TwentySixteen’, for example, wouldn’t work here.

Then the @import line. This ensures that when the new style.css is loaded, the old one will also be loaded.

If we now go back into the WordPress dashboard and select Appearance > Themes we will see our new child theme listed as ‘Child theme for example.com’. If we activate it nothing will happen (unless we’ve got something wrong, in which case we’ll get a blank page!). This is because we haven’t changed anything yet. So we edit the new style.css file once more so that it looks as follows:

/*
Theme Name:   Child Theme for example.com
Theme URI:    http://example.com/
Description:  Extends TwentySixteen
Author:       Example
Author URI:   http://example.com
Template:     twentysixteen
Version:      1.0.0
*/

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

/* Remove hyphenation from headings */
.entry-title {
  hyphens: none;
  -moz-hyphens: none;
}

/* Dark green site title */
.site-branding .site-title a {
  color: #228833;
}

/* Inactive links match the site-title, but darker */
a {
  color: #007700;
}

As you can see, I’ve dropped in a few extra bits so you can get a better idea of what’s going on. Notice in particular that the new CSS stuff goes after the @import statement. This ensures that the new entries will override the existing entries in the old CSS file.

We now select and activate the new theme and reload the site, and with a bit of luck we see the changes immediately.

Afterword

I’ve made a few assumptions in this post, the main ones being that (a) you understand CSS, (b) you know how to find the attributes (CSS classes, in this case) you need to change, and (c) that you can access and edit files on your server. There are plenty of good tutorials on CSS, so I won’t be addressing (a) in this blog. I’ll fill in a few extra details on accessing and editing files on a server in my next post, which should cover (c). There are numerous ways of going about it depending on your setup, and it can be quite confusing until you’ve got the hang of it.

I’ll also do a short post on ‘inspecting’ the CSS of an existing site (b). If you feel like investigating on your own, find your browser’s ‘Developer Tools’ and look for ‘Inspector’. It looks horrible to start with, but it’s easier than it looks!

Once you’ve got to grips with child themes the possibilities are endless. We’ve hardly scratched the surface here, and I’ll be coming back to this in future posts.