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.
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");
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’sfunctions.php
file, you unfortunately will have to be more clever than copying over thefunctions.php
file and making your changes. That works for every page template, but it doesn’t work for the logical controller that isfunctions.php
. There are very good reasons for this, but it may catch you off-guard. (To be clear: a child theme’sfunctions.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
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.
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?
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?
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.
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.
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
[…] working with WordPress themes, child themes are the promoted way of making customizations to a theme. The logic is pretty simple on paper, the child theme inherits all the functions and styles of the […]
[…] a great place to begin to understand and change WordPress themes. As you dive in, please remember the value of child themes, and please come back next week to understand how to shift the logic of your theme by diving into […]
[…] you work on WordPress projects, you’re often overwriting a parent stylesheet (either using a child theme or a custom CSS plugin) while leaving the parent styling intact. As a result, just about every […]
[…] ways of editing theme resources, either by working inside a child theme or a custom CSS plugin (not the original theme […]
[…] to your theme — and it really should be a child theme unless there’s a very strong constraint making that impossible for you — a file with a name […]
[…] site, for example, is running a customized version of a theme called “MasterBlog” that actually has very few customization options. Not […]
[…] Some way to edit CSS, either a “custom CSS” plugin or a child theme […]
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!