Everything you need to know about using a WordPress Child Theme

Everything you need to know abotu WordPress Child Themes

Everything you need to know about using a WordPress Child Theme

So you’ve set up your new blog and chosen a theme but have you thought about using a wordpress child theme? Child themes are really useful if you want to make changes to your theme and still be able to keep your theme updated.

Don’t worry if you’ve already made changes to your theme, in this blog post I will show you how to create a child theme from a brand new, only just installed theme as well as a theme you’ve already made changes to.

Are you ready? Lets do this.

 

Disclosure: This post contains affiliate links. If you buy through one of these links I will get a small commission at no extra cost to you. I only recommend products that I use or want to use in future.

 

What is a child theme and do you need one?

A child theme is a theme that gets it’s behaviour from another theme, called the parent theme. This way any updates are made to the parent theme and won’t effect any changes you’ve made to your theme.

If you add custom CSS to your blog or you’ve changed your functions.php you should be using a child theme. This way, when the parent theme is updated, only the bits you’ve not overridden in your child theme will be updated.

For example, say you’ve made changes to your theme’s header by changing the style.css file aand your header.php file. If the next time your theme updates includes changes to both those files, they’ll overwrite your changes.

But don’t panic, we can stop that by making a child theme using either of the methods I go through below.

 

How do you make a WordPress child theme?

*** Before you do anything to your blog make sure you’ve taken a backup ***

A wordpress child theme at a minimum will have a containing folder on your host (the directory) and two files, style.css and functions.php. style.css (as the name suggests) will hold any styles that you create to add to or override the parent theme and the functions.php will do the same for any functions you add in there.

It sounds scary but it really isn’t. Chances are that anything you would want to add to either of these files will be found by googling “wordpress theme + whatever you want it to do”. Or you can pop me an email and I’ll help get you sorted.

From an unchanged parent theme

Making a WordPress child theme is really straightforward if you’ve not made any changes to the parent theme. I’m going to talk you through the really simple steps.

Before you do anything else, make sure you have the parent theme installed (doesn’t need to be activated).

1. Create your directory

Log on to your host ( I use Siteground) and go to your file manager.

Then go to wp-content/themes and create a new folder here. So that you don’t get confused later on, it’s recommended (but not required) to name this folder yourparentthemename-child. Whatever you do make sure there are No SPACES in the folder name because it could cause problems later on.

For example if I wanted to create a child theme for the classic WordPress theme Twenty Sixteen, I’d create a new folder called twentysixteen-child.

 

 

2. Create your child theme’s style.css

Double click the new folder you’ve just created and then create a new file called CSS

At the top of the file add the following (replacing twentysixteen with the name of the parent theme you’re creating your child theme for):

/*
Theme Name: Twenty Sixteen Child
Theme URI: https://thebloggenie.com/twenty-sixteen-child/
Description: Twenty Sixteen Child Theme
Author: Kim Scotland
Author URI: https://thebloggenie.com
Template: twentysixteen
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
*/

3. Create your child theme’s functions.php

So now we need to make sure that your child theme loads the right CSS files. It might sound a bit scary but don’t worry – I’m here, I’ve got you covered.

So once again, you want to go to your file manager on your host and add a new file within your child theme folder. This time we’re going to call it functions.php

 

 

Add the following to the top of this file.

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'twentysixteen-style'; // This is 'twentysixteen-style' for the Twenty Sixteen 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')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

To find the correct name for $parent_style you’ll need to go into the functions.php file in your parent theme, search for

wp_enqueue_style()

and copy whatever is between the two brackets.
For example in the twenty sixteen parent theme it looks like this and we want the bit that I’ve highlighted in blue:

wp_enqueue_style( 'twentysixteen-style', get_stylesheet_uri() );

The code highlighted in green makes sure that the child theme loads any custom styles you set in the child theme style.css.

 

4. Install your wordpress child theme

Congratulations, you did it! It’s now time to install your child theme.

Go to Appearance > Themes  and you’ll see that your child theme has been added to this screen. Click Activate.

 

 

From a parent theme with some changes

*** Before you do anything to your blog make sure you’ve taken a backup ***

So in an ideal world you’d only create wordpress child themes from unchanged parent themes, but unfortunately we don’t actually live in an ideal world. As usual, I’ve covered all eventualities.

To do this we’re going to use a plugin called Child Theme Configurator

1. Make sure you’ve taken a backup (yes I know I bang on about it but you’ll thank me if something goes wrong).

2. Install the Child Theme Configurator plugin and activate it.

 

 

3. In the left hand menu on the WordPress dashboard click Tools > Child Theme.

4. Select the Create child theme option and choose the parent theme from the drop down list and click Analyze.

 

 

5. Scroll down to section 8 and check the Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme checkbox – this will make sure that any menus, widgets etc. are copied from the parent theme to your new child theme.

6. Click Create New Child Theme – you should get a message to say that the child theme has been created successfully. Don’t activate it yet.

 

 

7. If you’ve changed any templates in the parent theme e.g. 404.php, header.php click the files tab and select all that you’ve changed and click Copy Selected to Child Theme. If you’ve not changed any templates skip to the next step.

 

 

 

8. Now we need to copy any styles that you’ve added or changed in the parent theme over. The easiest way to do this is to download a copy of style.css in your parent theme and copy any bits that you’ve added or changed into a separat

e text file. Use a text editor like notepad.

9. Now that you’ve got all your changes in one place, click the Query Selector tab and copy everything from your text file into the Raw CSS text box at the bottom of the screen and click the Save button next to the text box.

10. Go to Appearance > Themes in the left-hand menu of the WordPress dashboard and click Live Preview on your new child theme. It should show all your changes correctly, if not then go back and do steps 7 and 8 until it does.

11. Uninstall the parent theme, and then re-install it (click Add New and search for the parent theme name). Then test the live preview again. If there’s something wrong, you might need to restore your backup and start again.

12. If everything looks good, activate your child theme and you’re good to go. You can make changes to your child theme without worrying that updating the parent theme will overwrite your changes.

Summary

Phew! thanks for sticking with me this far. So now you know how to create a wordpress child theme from a brand spanking, newly installed parent theme as well as a parent theme you’ve made changes to.

I know for a lot of people when you start changing and adding files on your host it can seem a bit scary. This is why I bang on about backups so much. If you take a backup before you start. If anything does go wrong and you took a backup, you can go back to the start and have another go.

Leave me a comment and let me know if you’ve created a wordpress child theme using either of these methods, or if you’d rather not get your hands dirty but still need a child theme set up, pop me an email at thebloggenie@gmail.com and I can do it for you.

 

 

You may also enjoy:

How to Install a Free SSL Certificate with Siteground

5 Habits to Keep your WordPress Blog Running Smoothly

7 Essential WordPress Plugins for Mum Bloggers

3 Little Buttons

12 Comments on “Everything you need to know about using a WordPress Child Theme”

  1. I have been blogging for almost a year and have never heard of a child theme. I really need to take a few days just to educate myself on all of this fancy technology jargon! Thanks for sharing!
    #DreamTeam

    1. It’s child and parent themes are the kinds of things that you only tend to know about if someone has told you, they’re not something you tend to stumble across or go looking for.

  2. This actually sounds way less scary than I thought it would be, but I chickened out and paid someone to create the child theme and make the changes I wanted making lol
    Debbie

    1. It all sounds scary if you’re not sure what it is. I’m pleased you find it less scary now

  3. Everything sounds so much easier now with your step by step guide. This is something that will definitely come in handy for most bloggers at some point. Thanks so much for sharing your how to guide with the #Dreamteam.

Leave a Reply

Your email address will not be published.