WordPress Child Theme Creation: A Step-by-Step Tutorial

So, you’ve found a WordPress theme that you really like. You’ve made a few CSS tweaks, and maybe a few PHP tweaks to turn the theme into the perfect platform for your content. Then your theme automatically updates the next time a new version is released, and all of your changes disappear. By this time, you can’t really remember what your changes were or how you made them, so you have to start all over again. Sound familiar? You’ll only let this happen once before you start making a WordPress child theme for each and every WordPress site that you create. Read on and I’ll tell you exactly how to do it – it’s easier than you think.

What is a WordPress child theme?

When you create a WordPress child theme, you’re essentially telling the WordPress platform that there are parts of the theme that you want to change, and you don’t want the changes you make to be affected every time the theme updates itself. Making a child theme allows you to control the parts of the theme you want to control, while allowing the rest of the theme to update as needed.

Install the Childify Me plugin

Your first step is to install a handy little plugin called Childify Me. Go to your WordPress Dashboard > Plugins > Add New. Type “childify me” in the search field, and you should find the Childify Me plugin by Rocco Aliberti. Install it, and then activate it. You can also download the plugin HERE, upload it, install it, and activate it. This plugin allows you to skip a lot of the manual steps involved in creating a WordPress child theme (they’re kind of a pain). If you really want to know all the ins and outs of doing it manually, though, Smashing Magazine wrote a great piece on that HERE. If you want the quick, easy way, keep reading.

Create your WordPress child theme

Make sure the theme you currently have active is the one you want to modify. From your Dashboard, go to Appearance > Customize. If you are currently using Twenty Seventeen as your active theme, this is what you’ll see on the left side of your screen:

Click the blue Childify Me button and a text field will appear. Type a name for your child theme. I typically type the name of the theme and then “-child” as in the screenshot below:

Depending on your version of WordPress, you may see an additional button that says “Save and Activate”. Click this button, too. Congratulations, you have a child theme! It doesn’t do anything yet, though.

Go to your cPanel

Navigate to the theme folder of your site’s WordPress installation, typically YourSiteName > wp-content > themes. Notice that there’s a folder for the original Twenty Seventeen theme (“twentyseventeen”) and a new folder with the name of your child theme (“twentyseventeen-child” if you used my naming convention). Here’s what you should see in the themes folder:

Double click the twentyseventeen-child folder icon and take a look inside:

As you can see, there’s not much there. Style.css is where you can make CSS changes that won’t be affected by a theme update, and functions.php is for more advanced PHP modifications. Let’s take a look at how we might edit something simple, like the header, if we want to make sure it won’t be affected the next time our theme updates. We’re going to copy a file from the parent theme to the child theme, and edit the copy only, leaving the original file intact in the parent theme. The file in the parent theme will update when the theme developer releases a new version, but the file in the child theme won’t. Not to worry if you don’t understand how this works – just know that it does!

How to edit header.php in a child theme

First, navigate up one level to the themes folder. Double click the twentyseventeen folder icon. You’ll see that the Twenty Seventeen theme folder has lots of files:

Right-click on header.php, and select Copy from the menu that appears. Add “-child” to the file location to place a copy of the header.php file in the twentyseventeen-child folder. Click the Copy File(s) button.

Navigate back to the twentyseventeen-child folder, where there should now be a file called “header.php”. Select the file, and click the Code Editor button. In the dialogue box that pops up, click Edit.

What you see in the editing window is a mix of html and php, and should look familiar to you if you’ve done much editing of WordPress code. This file creates the header and the beginning of the body code for each page on your website.

Let’s modify it a little bit. For the purpose of this exercise, let’s insert

on line 58, like this:

Click the Save button in the upper right corner of the screen, and then open up your WordPress site in a new tab. You’ll see that “Hello, World!” now appears on every page that you load, because it’s now part of the header. (If you don’t see this change, your site may be caching your old code – turn on Developer Mode, then right click on the reload button and select Empty Cache and Hard Reload to force your browser to recognize your code changes.) This “Hello, World!” text is probably not something you’ll want to keep on your site, so head back to the file you’ve been editing and delete the code you added to line 58. (The point is, though, that this little bit of text would stay in your theme forever, regardless of theme updates, because you made the change in the child theme, not the original “parent” theme.) Let’s look at a modification we can make that could be a little more useful.

Removing the sidebar in a WordPress child theme

WordPress makes it surprisingly hard to remove the sidebar altogether from within the Dashboard (some themes give you the option to do this, but some don’t). If you don’t want a sidebar showing up on a given page and you can’t figure out how to make it disappear, you can easily fix that in your child theme.

Let’s remove the sidebar for all single posts. Navigate back to the themes folder and open the twentyseventeen folder. You’ll see a file called single.php. Copy this file to twentyseventeen-child in the same way that you copied header.php earlier in this tutorial. Once you’ve done this, navigate back to the twentyseventeen-child folder and open it. Here’s what you should see:

Open single.php in the Code Editor like you did with header.php. Scroll down to close to the end of the file, and find the line that reads:

<?php get_sidebar(); ?>

Change this code to:

<?php
//get_sidebar();
?>

Note that separating this code onto three lines is important – if you don’t do this, you’ll break your site. If you prefer, you can get rid of this code entirely to remove the sidebar, but I prefer to just disable it with the two slashes and the line breaks, because then I know where it’s supposed to go if I ever want to put it back in. Click the Save button in the upper right hand corner. Reload a single post on your site, and your sidebar should be gone. (If it’s still there, your site may be caching your old code – turn on Developer Mode, then right click on the reload button and select Empty Cache and Hard Reload to force your browser to recognize your code changes.)

Questions? Feel free to ask them in the comments section below!