How to make a WordPress child theme

26th March 2019

WordPress Maintenance Services How to create a child theme in WordPress

Themes are among the biggest selling points of WordPress, but that does not mean that they don’t come with their problems. Most themes, including the most popular, will have bugs that need fixing over time.

After each theme update, there is also a potential for it to break your website. Put differently, you have to solve problems as they arise. That is where creating WordPress child themes come in. As the name implies, the child themes are a child of the parent theme.

With them, you can customise each of your favourite themes without running the risks of causing significant damage to your website or losing all your hard work if the need for an update arises. Creating a WordPress child theme is as easy as creating one folder and two files, a .css file, and a .php which contain some code you can copy from this page.

What are WordPress child themes and why are they important?

WordPress Child themes are a better and more stable option when it comes to the creation of customised websites. They offer the website designer or developer the option of customising the websites look an function. Parent themes will erase any customisation you have made to them after a theme update.

Creating WordPress child themes enables the user to keep the customisations separate from the base (parent) theme and intact after the update. You can also reverse any change you make to the child theme by disabling it. Moreover, child themes are very easy to set up.

Creating WordPress child themes manually

Before you start creating WordPress child themes, you will have to do two things. First, you will have to back up the WordPress website, which is the first thing you should always do when updating the website. You can do that in several ways, but the UpdraftPlus plugin is a fairly easy option. Here are the steps to follow when creating a child theme.

Subscribe

Step 1: Make a folder for the child theme

Every WordPress theme has its own folder, the themes you see in your backend all have their own. The folder will hold all the critical files of the theme and it means that you will have to make one for the child theme. To create your new empty child theme folder is easy and straightforward. All you do is create a folder just as you would any other folder on your computer.

For Windows you would simply go to your desktop > right click and then click new folder.

For Apple OS computers you would click file > new folder.

Naming the folder is important as this will help you finding and working with the folder later. We recommend keeping it simple by using the parent theme name and adding child to the end. So for our example, we are using the twentyseventeen theme as the parent theme so we will name our child theme twentyseventeen-child.

Step 2: Create the new CSS stylesheet

After creating the WordPress child theme folder, you will need to add your first file in it: the style.css. The .css stands for Cascading StyleSheet (CSS). The file includes every rule for the design of a theme and the overall appearance. More importantly, any change that you make to the stylesheet of the child theme will override those in the parent theme.

You can use any of your favorite editors apart from Word to create the style.css file. We would suggest the basic text editor built into both Windows and Apple OS.

Open up the text editor then copy and paste the code below.

/*
 Theme Name:   Twenty Seventeen Child Theme
 Theme URI:    https://thrivewp.com
 Description:  Twenty Seventeen Child Theme
 Author:       ThriveWP
 Author URI:   https://thrivewp.com
 Template:     twentyseventeen
 Version:      1.0.0
*/
/* Your awesome customisation starts here */

Once you have pasted the code, you will need to change a few things. The most import is the Template: this has to be exactly the same as the parent themes folder name. It is situated in the wp-content/themes folder.

You can access this via your website file manager or ftp program The other elements of the above code you can change to whatever you wish but it is advised to keep to sensible theme names and descriptions to keep things simple.

Now that the style.css code is added and edited you will need to save it as a .css file. Click save as and for the name put style.css and save it in your empty child theme folder.

Step 3: Activate your child theme

Activating your new child theme is as simple as installing it in your WordPress dashboard. You will first need to convert your new child theme folder into a .zip folder. Right clicking on the folder and then clicking send to .zip will do this for you.

Now go to your WordPress dashboard then Appearance > Themes > Add New > Upload Theme. Here you will select and upload your zipped child theme folder. Once installed the new theme should appear with a blank thumbnail under Appearance > Themes Look for it and then click on Activate.

After that, the child theme will start running but after checking the front end, you will realise that it is a mess. The reason behind that is that the style.css will be bare. You can fix that by just importing the parent’s style.

Step 4: Add the functions.php file

The style.css will govern the style and layout of your website but the functions.php allows the addition of advanced functionalities and customisations to the themes. Moreover, the file enables the importation of your parent theme styling. Without the functions.php file importing the style your child theme will not work.

In the same way you created your style.css file you now need to create the functions.php file. open up your text editor and create a new file. Now copy and paste the below code into it.

<?php
/* Write your awesome functions below */

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'twentyseventeen-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
?>

There is only one thing you need to change in this code and that is the $parent_style = bit. It’s very important you get this bit correct otherwise your child theme will not inherit styling properly or worse will load styling twice impacting on site loading times.

The part we are interested in is the bit after $parent_style = “twentyseventeen-style”.

twentyseventeen-style is telling the functions file where to pull the parent style from. Each theme is different so the best way to find this line is to go to your parents theme functions.php file and search for wp_enqueue_style.

You may find several instances of this line so to narrow it down further search for get_stylesheet_directory_uri OR get_stylesheet_uri. Now you should have found a line of code with both those phrases and in it, you should see the style bit we need like twentyseventeen-style.

Copy that and replace it in the code above. $parent_style = ‘twentyseventeen-style‘; // This is ‘twentyfifteen-style’ for the Twenty Fifteen theme.

functions-file
Functions.php screenshot

Apart from the functions.php file, any other file you include in the child will overwrite the file in your website’s parent theme. In most cases, it is better to make a copy of any template file you would want to change from the parent theme and then modify the copied files.

Leave your parent file unchanged. A quick example, if you wanted to make edits to the parent theme’s header.php file, you should start by copying the file to the child theme folder and then customising it. That way any edits are not lost when the parent theme is updated.

Using functions.php

Unlike, the style.css, functions.php of child themes will not override the counterpart from the parent theme. It will be loaded as an addition to the functions.php of the parent theme. Therefore, it provides a better method of customising the functionality of your parent theme.

For example, when adding a PHP function to the theme, you just need to open the child functions.php and add it there. Never copy the entire content of your functions.php from the parent theme to the child theme as you will be loading it twice and cause issues with your website.

The functions.php files have a simple structure – the opening PHP tag situated at the top and the bits of PHP below it. You can add few or as many functions to the file as you want just as we did above.

Enqueueing scripts and styles

In addition to enqueueing the style as we did above you can add many other functions to the functions.php file for example you could add a line to tell WordPress to not send the website admin an email when the WordPress core is auto updated. Or you could add a function to add support for responsive video in your theme.

Post Formats

The child theme will inherit the post_formats as the parent theme defines them. However, when creating the child themes, you should keep in mind that add_theme_support (post-formats’)” will override any format that the parent theme defines.

RTL support

For the child theme to support the RTL languages, you will have to add the rtl.css file. If the parent file does not have an rtl.css file, you should add the file to the child theme. After the addition, WordPress will load the rtl.css file automatically if the is_rtl() is true.

Internationalisation

You can prepare the child themes for later translation into any other language. To translate them, you should use the WordPress Internationalisation API. To internationalise the child theme, you just need to follow these steps.

  • Add the language directory. For example, twentynineteen-child/languages/
  • Add language files
  • Load a text domain
  • Use GetText functions as a way of adding the i18n support for the strings

At this stage, the strings in your child will be ready for translation. To be sure that they are internationalised properly for the translation, you will have to include the twentynineteenchild textdomain in every string.

Using a plugin for creating a WordPress child theme

If you do not want to do the work, you could consider using a plugin like Childify Me which is very easy to use BUT uses an old method of calling the parent style which could impact on site speed a little.

Simply go to your WordPress dashboard then go to Plugins > Add New and search for Chidify Me. Install and activate the plugin. There are no settings for the plugin, all you need to do to create your child theme is go the Appearance > Customiser and then scroll to the bottom.

You will see the Childify Me button. Type in your desired child theme name and hit create. All you need to do then is publish and activate.

Conclusion

WordPress child themes will streamline your website development process. They will lower the risk of damage to the website when you tinker with the style. They are easy to set up and have no downsides.

Gavin Pedley

Gavin Pedley

Gavin is the guy behind the award-winning ThriveWP. He has over 18 years of experience creating, developing, hosting and managing WordPress websites.

Gavin regularly shares his expertise via the ThriveWP blog and Youtube channel, where he creates informative and helpful WordPress tutorial videos.

Connect with Gavin on FacebookLinkedin or Twitter.

Share this article

Subscribe to receive articles right in your inbox

Get Your Free Guide On Keeping Your WordPress Website Safe

Subscribe to learn how to keep your WordPress website safe, starting with this free guide. Unsubscribe with one click at any time.

We hate SPAM and promise to keep your email address safe. Here’s our privacy policy.

SEND ME MY FREE EBOOKS!​

Three amazing products that will enhance your website performance, ranking and maximise your income! Our eBook offer includes three eBooks in one bundle.

We hate SPAM and promise to keep your email address safe. Here’s our privacy policy.