Why WordPress Child Themes are Important (and How to Create Them)

WordPress is a wonderful content management system (CMS) for building blogs and websites, in big part thanks to the myriad sophisticated themes it offers. However, too much tinkering with your themes can often lead to unintended consequences, such as losing your customizations during updates, or even site downtime.

Fortunately, WordPress offers a solution in the way of child themes that allows you to toy with a template safely. Child themes inherit the functionality of the original parent theme and offer several benefits, such as safeguarding against lost customizations. In short, they’re a key tool for customizing WordPress websites safely.

Below, we’re going to detail each of the benefits afforded by WordPress child themes and also cover the steps for creating your first one. Let’s get started!

What Are the Benefits of a WordPress Child Theme?

WordPress child themes are a set of files that are separate from your original theme while maintaining all the same features and stylings. The whole concept may initially sound redundant, but it offers a wide array of benefits over working with a parent theme directly. For example, child themes:

Enable you to reverse customizations with ease.
Ensure that when parent themes are updated, any customizations you’ve made are preserved.
Offer a great starting point for learning how themes work, without the burden and complication of having to start from scratch.

Overall, WordPress child themes offer a whole lot of benefits, with no real downsides. They’re even simple to set up, so you have no excuses to avoid using them!

How Do I Create a WordPress Child Theme?

Before we proceed, it’s imperative that we stress the importance of backing up your WordPress site. Backups should always be a part of your routine, but doubly so whenever you’re planning on altering your site’s functionality in a significant manner.

If you’re new to WordPress backups, we recommend that you check out the free UpdraftPlus plugin. Alternatively, you can go with VaultPress, if you’d prefer a premium alternative.

Additionally, bear in mind that you’ll need an FTP client to proceed with the instructions below. Our client of choice is FileZilla – here’s an excellent guide to using the FTP protocol if you’re new to this type of tool.

Once you’ve backed up your site and procured a suitable FTP client, it’s time to set the stage for the creation of your child theme. It requires three essential items before any customization can take place – its own folder, a stylesheet, and a functions.php file.

Step #1: Create a Child Theme Folder

We first need to create a directory for your WordPress child theme. To do that, access your website via FTP using the credentials your web host provided during your sign up process. If you can’t find them, you can always contact your hosting provider’s support and ask for help in retrieving them.

Once you’re inside, head to the public_html folder (sometimes called www) and then navigate to wp-content/themes. Now, right-click anywhere within the directory and select the option to create a new folder. Name this new folder as you please, but avoid using spaces, as it can result in errors:

A look at the creation of a child theme folder

Notice the new folder with “-child” tacked on the end for clarity.

For clarity’s sake, we suggest that you re-use the parent theme’s name, but add the -child suffix. This is completely up to you, but at the very least, you should pick a name you won’t forget.

Step #2: Create a Child Theme Stylesheet

Now, we’re going to walk you through creating your child theme’s stylesheet, also known as the style.css file. This little file includes all the rules that govern your site’s design and layout. Every theme requires one and ours is no exception.

First, open your favorite plain text editor (such as Notepad or TextEdit) and create an empty text file named style.css. Now we’re going to paste the following stylesheet header code:


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

This block of code needs to go at the beginning of every style.css file, although the exact variables will change depending on which theme you’re using.

Ensure that you replace the example text in the style.css code above with your child theme’s name and the name of its template (or parent theme). You might notice that, in the example above, the theme appears as twentyfifteen under template, despite using its full name elsewhere. In the case of templates, the name you should include is the same as that of the parent theme’s folder in the wp-content/themes directory.

Speaking of that directory, navigate to it via FTP and then open your child theme’s folder. Right-click anywhere on it, choose the Upload option, and select the file we just created.

Step #3: Create a Functions.php File

Once you’ve successfully created your child theme stylesheet, it’s time to put together a functions.php file. This file will enable you to add advanced customizations to your child theme, which makes it a critical addition.

This step is very similar to the last one. We need to create a new file, add a dash of code, and upload it to our child theme’s main directory. Open your favorite plain text editor once more and type the following:

This is the beginning of your functions.php file

Your functions.php file is as simple as the above.

That’s not a typo – we just need an opening tag in this case. Save the file as functions.php and then upload it to your child theme’s main directory as you did in step number two (i.e. to wp-content/themes/yourchildtheme).

Any PHP code you add after that initial tag has the potential to enable new functionality on your site. In fact, you should check out some of the cool things you can do using functions.php if you’re serious about WordPress customization.

Step #4: Enqueue Your Existing Parent and Child Theme Stylesheets

“Enqueueing” (or “inheriting”) is the method by which a user alerts WordPress as to the styles, scripts, and general assets it wants to include as part of a site. Once instructed, WordPress will output these scripts to the correct location and in the correct order to achieve the intended result.

Using the @import function within the style.css file used to be the go-to procedure for enqueueing your parent theme’s styles, but that is no longer the case. Instead, we’re going to use a more up-to-date procedure that involves the functions.php file.

Go to your child theme’s directory, right-click on functions.php, and then select the edit option, which will prompt you to open the file using your default text editor. Do so, then add the following commands:

// enqueue styles for child theme
function example_enqueue_styles() {

// enqueue parent styles
wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');

}
add_action('wp_enqueue_scripts', 'example_enqueue_styles');

Save your functions.php file and give yourself a pat on the back – the hardest part of the process is already done! All that’s left is to activate your new child theme.

Step #5: Activating Your Child Theme

To activate your child theme, go to your WordPress dashboard, locate the Appearance tab, then click on Themes:

Your child theme should be listed among all your other options, so go ahead – click on Activate and you’re all set!

Conclusion

When customizing parent themes directly, you run the risk of losing your changes thanks to updates, and even effectively disabling your site. Fortunately, WordPress enables us to negate these risks by using child themes.

The best part is, WordPress child themes are remarkably simple to set up. Here are the five steps you need to know to get one up and running: