Why Use a Child Theme?
Rule number one of WordPress development is don’t overwrite any core files. What this means is, don’t amend or change any of the files in the WordPress installation itself, as once WordPress is updated these changes will be lost. The concept behind this is simple – if you find yourself wanting to change any of the functions in WordPress, create a new file (either as a plugin or as part of your theme) and apply your amends in there. This way, you can update WordPress in the future and your changes won’t be overwritten.
Generally speaking, most people adhere to this rule automatically, and it’s pretty rare to hear of any problems doing this. However, a big issue that comes up frequently – and this should really be rule two of WordPress development – is overwriting files in a third party themes. When you buy or download a theme from a third party source (like Elegant Themes, Theme Forest or the WordPress Theme repository), the same principles to core files apply here.
Sooner or later, you are likely to want to update your theme, either to add new features, apply security fixes and resolve minor bugs. Very few themes are completely bug free, and even if they are, new versions of browsers, plugins, operating systems and WordPress itself could cause compatibility issues in the future. Because of this, there is a temptation to apply fixes or updates yourself – if might be something really simple like hiding an HTML element that you don’t need, or it could be something more complex like replacing a deprecated PHP function.
The problem is, if you make any changes to the theme yourself, they will be lost as soon as your (or anyone else) update the theme. Fortunately, there is an easy way of applying your changes AND allowing the theme to be updated in the future – you can use a child theme.
What is a Child Theme?
A child theme is essentially a blank copy of your main theme, that by default will load all of the features and functions of the main theme, but then allow you to add your own changes that will be applied automatically each time the website is loaded. It’s a really nice solution to the problem that gives you massive flexibility to make your own changes – you can effectively redesign the entire theme if you need to.
How Do I Set Up a Child Theme?
Like many things with WordPress, setting up a child theme is actually pretty simple once you know what to do. All you need is FTP and admin access to the website, and a basic text editor like Brackets (it’s free). (If you really can’t get FTP access then you can still make most of the changes below by zipping up your new child theme and uploading it directly to the WordPress admin. However, this will make editing the files a lot more cumbersome, and if you make a mistake with the functions.php file you can break your website. As a result, we always recommend working via FTP where possible).
The first thing to do is login to the website server via FTP, and navigate to the themes directory (usually this will be in public_html/wp-content/themes or htdocs/wp-content/themes) and find the directory of the theme you are using – it’s usually got the same name as the theme itself. In this example, let’s say you’re working with Divi, and the directory in this case is just called Divi.
Create a new directory on your computer, and give it a name that is relative to the original theme – for example, you could call it divi-child. Once you have this, create a new file called style.css and in this file add the following code:
/*
Theme Name: Divi Child Theme
Theme URI: https://www.mywebsite.com
Description: Child theme for Divi
Author: My name or company name
Author URI: https://www.mywebsite.com
Template: Divi
Version: 1.0.0
*/
@import url("../Divi/style.css");
/* Add theme content below this */
You’ll need to update that code to match the theme you are working with – most importantly, you’ll need to ensure that the Template section has the correct name relating to the original theme, in this case Divi, and that import url is correct – it needs to have the directory name of the original theme, followed by style.css. Ensure that you have the correct capitalisation for both the original theme name and the original theme directory – they are not always the same.
Once you have this, upload your new directory, including the style.css file, to the server. Then, login to the website admin, and navigate to Appearances -> Themes. You should see your new theme, with the name you gave it in the style.css file, in the list of available themes. Click Activate, and your child theme is active.
What Can I Do with a Child Theme?
One of the simplest and most frequently made changes you can make in a child theme is to override the default website styles with your own. To do this, all you need to do is add your new styles to the style.css file you created, underneath the section marked ‘Add theme content below this‘. The styles you add will be loaded after the original styles have been loaded, so unless the original theme is using !important tags, yours will be applied by default. If the original styles are using !important tags, then you can use these yourself and they will override the original ones.
As an example, you may find that the body text on your website is using font-size 15px, and you want to use 14px. The original theme might loading something like this:
section.entry-content p {
font-size: 15px;
}
To override that, you’d just need to add the following to your child theme’s style.css file:
section.entry-content p {
font-size: 15px;
}
Alternatively, you can load entire files that will replace the files in the original theme. Let’s say you wanted to make some structural changes to the website header. In this case, you’d need to download a copy of the original header.php file from the original theme directory. Once you have this, you can make whatever changes you need to the file using your text editor (for example, you might be adding some social media icons). Then, you just need to upload this newly modified header.php file into your child theme directory (tip: make sure you change back from the original theme director on the server to your child theme directory before you upload your new file!). Any changes you made to this file will be applied automatically without affecting the original theme file.
There is a virtually limitless number of changes you can make to your website by using a child theme, and it’s possible to almost completely rebuild the entire website if you want to (though you’d probably be better off making a new website or theme from scratch if that’s the case). Setting up a child theme is a quick and easy solution that will help you future proof your website, but if you get stuck or need any specific advice on you’ve got a child theme set up, please contact us and we’ll be happy to help.
