How to manually set up a WordPress child theme

If you want to make changes to a WordPress theme then it is best practice to create a child theme.

I’ve already shared a post showing you how to create a child theme using a plugin, but in this post, I wanted to talk you through the process of setting up one manually.

Setting up a child theme manually is a little more hands-on than using a plugin. You will need to have access to your website files, either via FTP or through cPanel, and you will need to use some PHP, but don’t worry, I’m going to explain everything to make it as easy as possible even for a newbie.

And if you are a bit apprehensive about this process, you could always try using a local development environment with WordPress installed to practice!

In this post, I’ll show you how to create a child theme manually rather than using a plugin.

1 | Create a new directory for your child theme

First things first, we need to set up a new directory (or folder) for our child theme.

This new directory will need to be created in the WordPress theme file, so log in to your FTP account, or head to the file manager within your cPanel account, and navigate to where your WordPress files. Then go into the wp-content directory then into the themes directory.

(For the purpose of this tutorial I have included screenshots of me setting this up using FileZilla, which is my FTP client of choice)

When it comes to naming this directory, I recommend naming after the theme you are creating a child theme for, and then adding “-child” on the end. So for example, if you were creating a child theme for the Twenty Seventeen theme, you might call the directory “twentyseventeen-child”.

2 | Create a new stylesheet

In your new child theme directory, you need to create a new stylesheet called style.css.

If you’ve ever looked into the style.css file of a WordPress theme (or maybe you’ve created one yourself) you’ll know that every one starts with a few commented out lines of text that provide information about a theme. They include theme name, URL, description, author, etc.

We will need to put the same information into the style.css file of our child theme, but we will need to make sure it corresponds to the child theme and not the parent theme.

So what I recommend you do is copy the theme information from the parent theme’s style.css file and paste it into your new style.css file that you have created for your child theme.

Once you have pasted the theme information into your new style.css file, work through to update the information so that it is relevant to your child theme.

Then you will need to add in a new line called Template. The Template is the name of the parent theme. Or more specifically, the name of the parent theme’s directory.

So in this example, as we are making a child theme for the Twenty Seventeen theme, we will put “twentyseventeen” on the template lane as this is the name of the Twenty Seventeen theme directory. I’ve highlighted this in the code below:

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://example.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-seventeen-child
 Template: twentyseventeen
*/

Here’s what the code looks like in my code editor of choice, Brackets. Once you have added this information to your style.css file, save and upload your changes.

3 | Create a new functions.php file

Next, we’re going to create a new functions.php file inside the child theme directory.

Once you have created your functions.php file, you need to enqueue (i.e. call in) both the parent and child theme stylesheets. If you aren’t familiar with the process of enqueuing stylesheets in WordPress then I recommend you check out this article.

Here is the code I would put in my functions.php file to enqueue the stylesheets:

<?php
    function twentyseventeen_child_enqueue_styles() {
        wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );
?>

So, just to break this down, we have the opening and closing PHP tags (<?php  ?>) because we are using PHP and within these PHP tags there is a function.

Within this function we start by enqueuing the stylesheet from the parent theme, then we enqueue the new stylesheet we have created for the child theme. Finally, we use the action hook to execute our function.

The code above will only work if your parent theme uses the main style.css file to store all the CSS. If the parent theme uses multiple stylesheets you will need to enqueue these too.

4 | Upload a screenshot

Next, you will need to upload a screenshot of your child theme to your child theme directory.

As with all WordPress themes, your screenshot image should be called screenshot. It is recommended that your image is a PNG file and it is 1200px wide and 900px tall.

For this example, I’ve just used the screenshot from the parent theme, but I don’t actually recommend you do this as it might cause some confusion.

5 | Preview your child theme

Now that you have set up your style.css and functions.php files it’s time to preview your child theme to make sure it works as expected.

Log in to your WordPress admin area and go to Appearance then Themes.

Here you will hopefully see your new child theme:

Hover over this theme and click Live Preview.

What we are expecting to see here is a theme that looks identical to its parent theme. Most importantly, we want to see the styling working as expected. If the styling is working then it means you have correctly enqueued the parent theme’s stylesheet.

Now what I recommend you do is add some basic styling to the child theme’s style.css file in order to test that you have enqueued this correct. Just add some simple styling that will be easy to spot when you preview the theme such as changing the background colour or changing the colour of some text.

If you see these changes when you preview the website then that means the child theme’s stylesheet has been correctly enqueued as well.

Now all that’s left to do is make your child theme live when you are ready!

What about template files?

You may want to change more than just the styling of your child theme. You might want to change the other template files such as header.php, footer.php, etc.

If you wish to make changes to these template files, you will need to create new files with the exact same names in the child theme directory. So for instance, if you wanted to override the contents of the parent theme’s footer.php file, you would create a new file called footer.php in the child theme directory.

Pin for later?