How to use a child theme on WordPress

Unfortunately, it can be quite difficult to get to grips with the basic concept of a child theme if you’ve not had much experience at customising themes. Before making any amendments to a Parent theme (the original theme), it’s vital that you understand what a child theme is, does and why it is so important to a long and healthy WordPress relationship. This may sound extreme however through-out this tutorial you’ll understand that if you don’t use a child theme then your at risk of some big problems coming to haunt you later down the line.

Let’s say you’ve got a new place to live, and the house needs decorating. You’ve spent a really long time creating the perfect masterpiece painting for your child’s bedroom and you step back to look at the whole painting to give yourself a pat on the back. You really love the painting and know they’re going to think your the coolest parent in the world, but there’s just this one small detail that you just can’t stand and you know it’s going to bug you. The Sun is brown. Yes, brown, somehow whilst being in the zone you’ve managed to dab the brown paint onto your brush and paint the sun brown. You know your child isn’t going to stand for that, and they’ll immediately pull you up on it. Because of course, at that age we all know they expect to see the sun in either Yellow, Orange or perhaps if they’re really adventurous Red.

Regardless, you’ve made the decision that you’re going to fix the painting. You get out the brushes and paints again and stare at the painting, you can’t help but think “I hope I don’t mess this up”.

What if there was a better way, a safety net? Imagine if you could click your fingers and wallah you’ve produced an exact replica of the painting. How amazing would that be? Think about it, then you would be able to work on that duplicate painting, amending the colour of the sun until your hearts content so you’re still going to the get that appraisal from your child when they walk in the door and run into their room! If you mess something up, you can simply throw it away and click your fingers again. When you finally do perfect the painting, you’ll proudly hang it on the wall. What about the original, with the brown sun though? Well, the beauty is that you can keep the original in the wardrobe.

If you make use of a WordPress child theme, then clicking your fingers is achievable. A child theme is another version of the same theme you’re using. However, the great thing about this is that the child theme will automatically copy everything across from your original theme, which you’ll now know it as “Parent theme”. With the above analogy in place, the original painting is the parent theme, and the second painting is the child theme.

Now it’s key to note that when we say copies everything across to the child theme, this is just not just a one off static copy. If you make a amendment later down the line to Parent theme then you’ll notice that the amendment will also happen on the child theme.

So now you’re up to speed with what a child theme, let’s look at how to create one and put it into practice!

Any child theme will consist of one (or more) directory(s) and two other files which are syle.css and functions.php, you’ll need to create these.

In order to do this the first step is to create the child theme directory – this will be placed within wp-content/themes. It is highly recommended and good practice (albeit not required) to rename the child theme directory by including “-child” at the end to ensure that there is never a confusion between the parent and child. You’ll also want to ensure that you’ve not included any spaces within the child theme’s directory name, as this can result in errors.

Following this you’ll need to create your child theme’s style.css, which is the stylesheet that you’ll be able to add custom CSS code to at a later date to modify any styling off the website. To do so you’ll need to start with the following information within the file, this is the “Stylesheet Header”

Note: The above will need to be replaced with the relevant details that apply to your theme.

The final step is to add the parent and child theme stylesheets (style.css). Above we discussed a alternative method which was to @import the parent theme stylesheet. This is know longer the best method due to the amount of time that it takes for the stylesheet to load. The correct and best method of adding the parent theme stylesheet is to first create a functions.php in your child theme directory and then add a “wp_enqueue_scripts” action and use wp_enqueue_style(). As the first line of your child theme’s functions.php, add a opening PHP tag (<?php), once you’ve done this you can then enqueue your parent and child theme stylesheets.

Note: The following example of this function will only work if your Parent Theme has just one main “style.css” which holds all of the css. If however your child theme has more than one .css file, for example ie.css, style.css, main.css then you must ensure to maintain all of the Parent Theme dependencies.

Typically your child theme style.css will contain actual CSS code, due to this you’ll again need to ensure this is also enqueued. If you set the ‘parent-style’ as a dependency, then this will make sure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme.

The recommended final version for the “twentyfifteen” style sheet then becomes the following:

Your child theme is now ready for activation!

Go ahead and log in to your websites admin panel, then navigate to Admin Panel > Appearance < Themes. Here you will see your child theme within the list and ready to be activated, please ensure that your WordPress installation is not multi-site enabled firstly, in this case you may need to switch to your network admin panel to enable the theme and then switch back to the specific website to activate the child theme.

Note: You may need to re-save your menu (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images) after activating the child theme.

In order to use a child theme you’ll need to first install and then activate this just as you would with any other theme. As noted above, the child theme will automatically inherit all aspects of the theme directly from its parent; in short it will look identical to when you first installed the parent theme. You will know longer need to worry about breaking the website when you activate the child theme for all the reason explained above.

Using CSS is the easiest way to customise your WordPress theme, and by having a child theme it becomes that much either. It’s best to experiment with CSS code within your child theme, as if you make a mistake you can always revert back to the parent theme!

Once you have activated the child theme take a look at your style.css sheet, you can do this by navigating back to Appearance > Editor. You’ll notice that the style.css sheet is practically empty! This is due to the fact that child themes automatically inherit everything from their parent theme. The original stylesheet is being loaded straight from the parent theme, following this the “empty” stylesheet get’s loaded in after the all the “original styles” (from the parent themes stylesheet).

It’s normal to wonder how the child theme styles are going to take any affect considering that the stylesheet is being loaded from the parent theme first. However, we need to first remember what CSS stands for! Cascading Style Sheets, this means that your browser reads your stylesheet from the top down. Any rules that appear later will always take priority over the rules that appear before it.

You might be wondering how the child theme styles are going to override the styles from the parent theme. Remember what CSS stands for? Cascading Style Sheets. We’re going to focus on the cascading part. When the browser reads your style sheet it reads it from the top down. Rules that appear later always take precedence over rules that appear earlier. Imagine in our painting example previously, you would write something like this (in CSS):

Here, your sun will be yellow! This is because the child theme style rules will naturally and automatically take precedence because they’re being loaded after the parent theme style rules. So now, as opposed to editing the existing rules, you’ll copy and paste the specific rules you want to change.

The important thing to make note of here is that we only copied over the color: yellow; line. Reason being, this is all we wanted to change! With CSS, you only ever need to copy over the things you actually change, whatever you don’t copy over will automatically be inherited from the parent style rules (in the same of making edits – remain the same).

Whatever changes you would like to make ensure that you save the style.css file and refresh/revisit the relevant page of the website and you should see the changes show up live on your site!

Let’s say you want to change where the © copyright is displayed within the footer as it’s not currently displaying in the centre of the footer but more towards the left of the page and you would like to move it.

Firstly you will need to find the template file within the parent theme that has the over arching control for the function you would like to change. In this particular case, we would most likely be looking to locate the footer.php file. Therefore, go ahead and copy the entire file to your child theme. Once you have done this, you’ll see that file exists in your child theme, it will now be used instead of the original file in the parent theme. The same can be said for any file you copy to your child theme.

Note: if you would like to undo the changes at a later date, then you can simply just delete the file from your child theme and the original footer.php file within the parent theme will be used instead.

Once you’ve done this go ahead and make the changes to the footer.php file in your child theme and save them. If you have activated the child theme then the changes will show up on your website automatically.

Whenever you duplicate a template file into a child theme it’s always best practice to keep a list of any changes you’ve made within a comment at the top of the file. You can do this as follows /* Insert your comment here */. This will act as a good point of reference if you ever need to make more changes or more importantly revert back to previous changes later on.