If you’ve spent any time around WordPress then it’s likely you will have heard the term ‘child theme’ used. If you are like me and don’t quite consider yourself a theme developer, then you might have ignored the term and carried on going about your business. But to do so would mean missing out on a way to save time, effort and frustration for anyone who is doing any tweaks to their WordPress theme of choice.
If you’ve made any changes to a WordPress theme, or plan to do so in the future, then understanding child themes is essential. This guide will get you up to speed in simple terms and ensure you don’t end up losing your hard work in a theme upgrade.
What is a Child Theme?
A child theme is a dependent of a parent theme. In order for a child theme to function, there also needs to be a parent theme installed.
Any theme can be a parent theme, and then after that either the user can create a child theme or use the one that sometimes comes with premium themes.
The parent theme will hold all the information about the theme, such as the code for its functionality, as well as the HTML and CSS for its appearance and design. Then, once the child theme is activated, any changes made to the child theme files will supersede those in the parent theme.
It works like this:
Upload a theme of your choice
Create a child theme (more on how to do that in a minute)
Edit a file in the child theme to make changes to how the theme functions or looks
Why Use a Child Theme?
So far it might seem like a lot of work for getting the same effect as editing the original theme files directly. However once you understand the benefits of using a child theme you will see why it’s such a good idea.
Essentially, by editing your theme by using a child theme, you can benefit in the following ways:
Minimise the risk of breaking your theme and website by working on a separate instance of the theme that can be quickly deactivated
Prevent any of your changes being overwritten each time the theme is upgraded
Avoid Breaking your Site
To minimise the risk of breaking your theme or site, if I wanted to make some changes to the header.php file of my current theme, I could setup a child theme using a copy of the original header.php file. Then I would make my changes to the header.php file of the child theme, and this file would then be used by WordPress, instead of the file in the parent theme folder. Therefore applying the changes I had made.
If I make a mistake while editing, or want to go back to the original file, I can simply delete the child theme version of header.php or deactivate the child theme altogether, and WordPress will revert back to the original file or theme. As I’m not working on the main theme files, I can quickly get a broken or malfunctioning site back on track very easily. There is no need to re-install the theme or anything like that.
Safeguard your Edits
The other benefit, which prevents changes from being overwritten when the theme is upgraded, is probably the main benefit of using a child theme. If you really want to get a custom look for your site, then you will probably end up making some tweaks to your theme by editing the code.
However, once you’ve done this, you can quickly erase your changes unintentionally, by updating the theme when a new version is released. If you’ve ever bought a premium theme from somewhere like Theme Forest, you will know that most themes get updates at least a few times in their lifetime. When you do this, your changes will be overwritten by the new files which are uploaded as part of the update or upgrade.
By using a parent and child theme arrangement, the new theme files will be uploaded into the parent theme directory, overwriting them. But the changes you’ve made to the theme will survive, as they are located in the child theme directory.
If you’ve made changes to the header.php file, and that is one of the theme files that has been upgraded, you will have to copy those updates to the child theme version to enable the updates. However, that is still a lot less hassle than losing all your changes each time you do a theme update.
Another reason where a parent child theme combination can save you time is when developing your own custom theme. You can install a bare bones theme or starter theme with all the core functionality but basic design, and then create a child theme that contains all your modifications. This saves you from starting from scratch each time you start a new custom project as you can deploy your basic template to build off, which can then be updated at will in future as your new design is future proof.
How to Create a Child Theme
It’s not uncommon these days to find a premium theme that comes packaged with a child theme ready for use. In this instance simply upload both themes, parent and child, and then activate the child theme and make your changes there.
Fortunately, those using a theme that doesn’t come with a child as part of the package, making one is very straightforward.
You will need access to the server your site is hosted on and the ability to work with folders/directories and files. Two simple ways to do are the login via an FTP client or through your host’s control panel and then find the file manager tool.
Either way, once you’ve logged into the server, make your way to the themes directory which is usually:
/wp-content/themes/
Here you will see a list of the themes you have installed, including the theme you want to use as the parent theme. If you haven’t already uploaded that theme, do so now.
In this example we are going to create a child theme for the free Twenty Twelve theme. This is a great theme to use as a parent when you want to start doing customisation work and add your own twist to a fully functional theme that is basic in appearance; however you can use any theme.
Creating the Child Theme
Now create a new directory with the exact same name of your parent theme, but with the appendage ‘-child’. Once created, it should look like this:
In this example, twentytwelve-child is the name of the new child theme directory. Any files you want to modify from the parent theme will need to be placed into this directory. But first, there is one more simple step required.
Now we’ve created the directory or folder for the child theme files, we need to create just one file to bring the theme to life. That is the style.css file which contains the CSS which relates to the appearance of the site, including fonts, colours and the layout.
To create the style.css file for your child theme, open a text editor such as Notepad or Notepad++ and paste in the following lines:
/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/
Description: Twenty Twelve Child Theme
Author: Me
Author URI: http://example.com
Template: twentytwelve
Version: 1.0.0
*/
@import url(“../twentytwelve/style.css”);
/* =Theme customization starts here
————————————————————– */
Courtesy of codex.wordpress.org
The two mandatory and important lines here are those that start with Theme Names and Template. The name can be anything, but it must be present. The Template line refers to the location of the parent theme. In this example I am using the Twenty Twelve them as my parent or template, so I have entered the name of the directory that theme is located in, which is twentytwelve.
The other important line is the one beginning with @import. This is the location of the style.css file of the parent theme. This line will import all the contents of that file and then apply any of the CSS you have added to the style.css you are creating now.
This means all the existing formatting and styles from your parent theme will be used, unless you have added your own CSS to this file you are creating now.
For example, my parent style.css contains the line:
body { background-color: #e6e6e6;}
This sets the background colour of the page. If I wanted to change this, I would ignore the parent style.css file, but add my own version of this CSS to the child theme’s style.css file, such as:
body { background-color: #eeff00;}
The contents of the child theme’s style.css file, overwrites those of the parent theme, thus changing the background colour grey from to yellow.
Once you’ve created the style.css with the required lines, it’s time to upload it to your server, into the twentytwelve-child theme directory, or whatever you have called this directory.
Now you’ve created everything you need to start using your child theme, it’s time to activate the theme.
Activate the Child Theme
To activate a child theme and begin applying the changes you have made to your site, login into your WordPress admin dashboard and go to Appearance > Themes.
On the themes page, you should now see a new theme available, which in my case is called Twenty Twelve Child. Click on activate and your child theme will go live.
Unless you have added your own CSS to the style.css file, you won’t notice any difference to the appearance of your site. But from now on, any changes you make to style.css or any other files you add to the child theme directory will take precedent over the parent theme files. This applies to not only the CSS files but all the php files, allowing you to change anything about your theme in relative safety from breaking your site or losing the changes after an update.
If you want to get a quick demonstration of how this might work, update your CSS file to include the last line here and then upload it to your server again, into the child theme folder so see the background colour of your site change:
/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/
Description: Twenty Twelve Child Theme
Author: Me
Author URI: http://example.com
Template: twentytwelve
Version: 1.0.0
*/
@import url(“../twentytwelve/style.css”);
/* =Theme customization starts here
————————————————————– */
body { background-color: #eeff00;}
Now if you update the parent theme when an update is released, the background colour would still remain yellow, rather than your changes being overwritten with the new files.
Conclusion
If you are making any changes at all to your theme of choice, then it’s recommended that you create a child theme. It can save you a lot of frustration down the line should an update be released that you need to install. If you are working on a theme customisation for a client then it is also essential that you use the child theme functionality of WordPress to safeguard your work.
If you have any questions or comments on this process please leave them below.