Child themes – what are they and why you should use them

Since joining the Divi community late last year I think the one topic I’ve seen asked about or discussed the most is the concept of child themes, mostly when it comes to editing the footer credits in a Divi built website.

In this article I hope to give you a thorough understand of what a child theme is and why you should consider using one.

In the begining there was WordPress.

When WordPress was first released, it didn’t support themes as we know them today. If you wanted the front end to look a certain way you would edit the default templates with your own HTML and CSS. It also meant you had to have a pretty good grasp of PHP to ensure you integrated the correct function calls into your theme to ensure that the info from the database appeared to your user.

Later on the ability to create and install separate themes was added. At its core this was done to allow more flexibility to the WordPress user when it came to creating a front end for their WordPress powered site. It still meant that you needed some level of understand of HTML/CSS and PHP but it also brought about a shift in the adoption and usage of WordPress. Enterprising designers and developers realised that there was a market for selling premium themes to non technical end users who just wanted a good looking site. Fast forward a couple of years and themes are now not only able to render your data in a clean, well designed way, you’re even able to use page builder frameworks to design your page templates yourself, with the Divi theme being one of the most popular.

However, the big thing that a lot of people miss, don’t understand ( or don’t even know about ) is that WordPress also supports child themes. This was added a few years after the theme system was added and its important to understand what a child theme is to be able to understand its power.

In simple terms, a child theme inherits all the functionality of it’s parent theme, with the ability to override or customise how the parent theme works, without making changes to the parent theme files. To explain it a bit easier let me use a more real world analogy.

Lets say you buy a car. Two of the important aspects of a car are it’s underlying engine and drive train components, and the body. Now, if you want to change how the car looks, you can do things like repaint it. However, you can also modify it by doing things like adding a front or rear spoilers. Both options will change how the car looks but the respray is a permanent change, whereas the spoilers are temporary, they could easily be switched out with other parts.

Now I’m really extending the metaphor here, but the engine and drive train of your website are WordPress. This gets tweaked and upgraded from time to time (servicing and parts repair) but the core engine remains mostly the same for the life of the site. The installed theme (or parent theme) is the body work. Once you’ve chosen your theme you don’t really want to make changes to it (well get to why later). A child theme is like adding spoilers, making small changes to the main theme that are discardable or interchangeable (more or less).

Hopefully this makes things a little clearer for you. So lets talk about things like why you wouldn’t make changes to the installed theme and why its better to do it in a child theme.

To theme or not to theme.

If you have purchased a premium theme, either from a theme marketplace or a theme vendor (like Elegant Themes) you don’t really want to be making changes to any of the theme files. The reason for this is that if the theme every gets updated, you will have to either make copies of the changes to made to those files, update the theme manually and then make those changes again. If you choose to update the theme manually, then you’ll automatically loose any changes you’ve made and have to remake them.

So the first reason to use a child theme is if you have to make changes to theme files. Putting those changes in a child theme means that when update time happens you won’t loose any changes. It also means that if there are any structural changes to the parent theme that could break the site with any customisations you’ve made in your child theme, you can simply deactivate your child theme and activate the parent theme. Your customisations won’t be present until you fix them, but at least you’ll still be able to use the parent theme and keep most of the general look and feel of your site the same.

The second reason is speed. While themes like Divi allow you areas in your ePanel for custom CSS or JavaScript, its not ideal to use this for large chunks of either CSS or JavaScript code. The main reason for this is that these code snippets are stored in the database. So every time a page on your site loads, the script loading that page has to do extra queries to the database to fetch that code to render it on your page. If you use a custom header.php or footer.php in a child theme, WordPress will simply load your child theme template file instead of the parent theme template file, causing less overhead in the rendering of a page.

Finally child theme customisations are reusable on multiple sites. For example, lets say you are a web designer and you want the Divi footer credits (designed by) to be replaced by your own name. If you used a plugin to achieve this, every time you create a new site you would need to install that plugin and enter the relevant data for it to display as you want it. If you had a ready made child theme, with the correct data in the footer.php, all you would have to do is install the child theme to your client’s site and the footer credit would be correct. ( and by the way, this is not me bashing plugins, I’m a plugin developer after all, I just believe in using the right tool for the job ).

So hopefully that’s given you a good understanding of what a child theme is and why you should use it. In the next article in this series on child themes, I’ll explain how to create your child theme ( specifically for the Divi theme ) and some of the cool things you can do with it.