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.

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 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Unfrustrate Your Image Formatting with the WordPress Text Editor | WPShout.com
October 7, 2014 5:11 pm

[…] Some way to edit CSS, either a “custom CSS” plugin or a child theme […]

Finding a WordPress Theme That Fits Your Design Skills | WP Business Tips
September 25, 2014 5:31 pm

[…] site, for example, is running a customized version of a theme called “MasterBlog” that actually has very few customization options. Not […]

Pete
August 3, 2014 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.

What You Need to Know About WordPress Custom Page Templates | WPShout.com
May 20, 2014 11:45 am

[…] 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 […]

How to Change the CSS of a WordPress Theme (and Not Go Crazy) | WPShout.com
May 6, 2014 11:45 am

[…] ways of editing theme resources, either by working inside a child theme or a custom CSS plugin (not the original theme […]

Why Chrome Developer Tools is Every WordPress Developer's Best Friend | WPShout.com
January 7, 2014 9:10 pm

[…] 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 […]

The Four Languages You Must Know to Understand WordPress Themes | WPShout.com
November 19, 2013 5:54 pm

[…] 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 […]

Darius
November 13, 2013 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.

Why I Don’t Like Child Themes [WordPress] | Peter R Knight
November 13, 2013 6:48 am

[…] 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 […]

Hassan
November 13, 2013 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.

Piet
November 13, 2013 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?

Piet
November 14, 2013 1:06 am
Reply to  David Hayes

Oh yes, that is an excellent place to give a warning/info message, I hadn’t even thought about that!

Mike
November 13, 2013 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?

Piet
November 14, 2013 1:15 am
Reply to  David Hayes

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… Read more »

Thomas
November 12, 2013 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.

Randy
November 12, 2013 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!