Best Practices: Why and How to Create a Child Theme in WordPress
I’m the proud father of three adorable, brilliant, and yet also terrible and uncontrollable children. They’re great. Love them to death. They also hold the keys to how to take dad’s peace and turn it into chaos in one second or less. It’s a rare gift, I know.
In real life, children are the inheritors of their parents. They inherit their parents good and bad personality traits. They inherit their parent’s wealth or debt. But they each also – always –have their own unique traits that no one gave them at all. There’s no amount of biology or chemistry that can predict the ways in which each child is 100% a direct product of their parents, and, at the same time, absolutely 100% unique.
As with most analogies in life, you can say the same with WordPress (Some might say: If it exists, there’s a WordPress plugin for it!). For every theme that you download from the WordPress repository, or purchase from a premium shop, there can (and most often should) be a perfectly inherited yet still unique child theme suited to your purposes.
This series is about best practices. So now is the perfect time to explain the necessity, value, and power of creating and using Child Themes. The nature of the WordPress Template hierarchy is a major reason why creating and using a child theme is considered best practice. That’s a fancy phrase for “How WordPress figures out which code to show on which page”.
First, let’s dig into the characteristics and components of a Child Theme.
What is a Child Theme?
Child Themes are themes which inherit and override the styles and templates of their parents. Just as in life, without parents, there are no children. In WordPress, Child Themes cannot exist without parent themes. A parent theme is any theme that is created as a stand alone theme. Every single default theme that WordPress is shipped with (Twenty Fifteen, Twenty Fourteen, etc) are parent themes. They do not depend on any other theme in order to work and function.
A child theme, on the other hand, depends completely on it’s parent. For example, if you tried to activate a child theme on your site and you didn’t have the parent theme, you’d get an error and the theme wouldn’t activate at all. This is not true for parent themes.
So what does a child theme actually do? Allowing you to customize a parent theme without touching the code of the parent theme at all? Why would you want to do that? Well, just like WordPress plugins regularly have updates, so do themes. If you activated Twenty Fifteen on your website and then made changes to its stylesheet or templates or javascript files, and then hit “Update” when an update was available, you’d lose all those customizations. But with a child theme, all of your customizations stay in the child theme, allowing you to update the parent theme and inherit those code changes gracefully.
This is actually done through the magic of the WordPress Template hierarchy. Basically, when a page or post needs to be loaded for a visitor, WordPress goes to the theme to grab the appropriate template. PHP is a super fast language, so in mere fractions of fractions of seconds, WordPress knows to first look in the child theme for the template. If the appropriate template is not there, then it looks for it in the parent theme and loads that.
How does that benefit you? Well, it allows you to override any of the markup of your theme’s templates and styles, and these will take precedence over the parent theme.
For example, I built a child theme for Twenty Fifteen. There were a couple things that I felt Twenty Fifteen sorely lacked: A dedicated space for a logo at the top of the sidebar, and the ability to put the posts or pages title at the top of the page instead of under the featured image. My child theme has its own single.php file, which gets loaded on every post instead of Twenty Fifteen’s single.php file (the parent theme).
But what about the functions.php file? You can also add your own functions.php file in your child theme. But rather than overriding the parent theme’s functions.php file, it adds to it. This is really important because many themes simply break down if their functions.php file is removed or deleted. But this is also tricky when you actually do want to remove a specific function that your parent theme has. That gets into some advanced coding. You can read this detailed post at the WordImpress blog on doing that.
Creating a Child Theme
Now that we know what a Child Theme is, let’s build one. As always, the Codex is your go-to guide for this. There you can see that there are only two things required to have a child theme:
- A new directory in your themes folder with your child theme name.
- A styles.css file in that new directory with specific header information.
The only tricky part about that is the header information in the styles.css file. Here’s the sample from the Codex:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/
You’ll notice that this theme is just called Twenty Fifteen Child. You might also notice that it has all the same information as a typical parent theme has. The one thing it has in addition to a parent theme is the “Template” tag. That tag is what declares this as a child theme, and that tag is what tells WordPress which parent theme this is a child of. Another important note about that tag: If the Template tag were in this case to say “Twenty Fifteen” instead of “twentyfifteen” it wouldn’t work. The template tag requires the parent theme’s directory name. That’s an important detail as that directory names can be easily changed. So if you changed the Twenty Fifteen directory name to “twentyfifteen-wrong” your child theme would break until you changed the Template tag to be the same.
Properly Enqueuing the Parent Styles
While it’s true that this is technically already a child theme (meaning you could activate it and it would activate), there will be no styles on your site at all. This is because the child theme doesn’t enqueue the parent styles automatically – you have to do it manually.
If you scan the interwebs for “How to Create a Child Theme in WordPress” you’ll find plenty of examples that tell you to use @import at the top of your child theme’s styles.css file to bring in the parent styles. This was a very common practice and was even recommended in the Codex article. Unfortunately, it is no longer best practice for loading the parent styles.
Instead, you want to add a functions.php file to your child theme and enqueue the parent styles like you would any other script or stylesheet. Here’s the sample from the Codex:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'twentyfifteen-css', get_template_directory_uri() . '/style.css' );
}
Notice the trick here? It’s the first variable in the wp_enqueue_style() function. That is called the stylesheet “handle”. Since we are dealing with a parent theme’s default stylesheet, this is the same as the folder name with “-css” at the end, just like you see in the example above.
NOTE: Another easy way to create a Child Theme is with the Child Theme Wizard plugin. It works just fine.
Fun Things to Do with Child Themes
Now you know why you need a child theme (so you don’t lose changes when a parent theme is updated), and you know the basics of how to create a child theme. Here are a few things you can do with them:
Add New Options to the Customizer. Check out my Twenty Fifteen Child Theme and you’ll see I’ve substantially expanded the Twenty Fifteen Customizer. All the Customizer options can be added in addition to what the parent theme already creates.
Add New Post Type Templates. If you are using WooCommerce, for example, you might want to add some custom product templates. Adding those into a Child theme would ensure you don’t lose them when the parent theme has updates.
Override the Layout of your Parent theme. You can override the layout of any template in the parent theme. The easiest way to do that is to simply copy the template from the parent theme into your child theme and begin your customizations from there. You’ll notice in my child theme that the Archive page is significantly different from the Twenty Twelve parent theme.
Next, we’ll be talking about why and how to optimize your images in WordPress. Feel free to post some great child theme examples in the comments.
