Child Themes – What They Are, How to Use Them, and Why

It’s not that I want to sound hyper-promotional or anything, but … here at ThemeFuse we understand that every customer has different needs and requirements, and that some developers will want to modify our themes a bit.
This is a completely natural thing and actually something WordPress was built for. The platform is quite friendly when it comes to all kinds of modifications, not only the obvious functionality modifications through plugins, but there are also various kinds of hacks and hooks you can implement with ease.
WordPress themes also follow a similar path, and that is why the mechanism of child themes was built. Actually, child themes are the recommended way of making modifications to a theme.
In plain English, this means that if you want to change something about the theme you’re using (change something within its source files, that is) then you should do it through a child theme.
If you’re a customer of ours you know that each theme we deliver comes with a pre-made child theme. An example for our personal WordPress theme package:

The child themes we provide are just blank templates that you can build upon. In fact, we encourage you to do so, especially if you’re using our themes to develop sites for your clients.
So here’s the question:
What is a child theme?
A child theme is simply a theme that inherits the functionality and looks of another theme – the parent.
The whole idea of a child theme is that you can modify, and add to the functionality of that parent theme without modifying it directly. The parent remains intact, everything is built within the child theme.
But this sounds like additional work, right? Why would you want to play around with child themes if you can simply modify the theme you actually want to modify…?
Why you should use child themes
First of all, if you’re not planning on modifying your theme then child themes will be of no use to you.
But if you do then there are three main benefits of using child themes in comparison to modifying a theme directly.
Easy updates
The biggest problem with all kinds of modifications is that they disappear the minute you update WordPress (in case of modifications to the WordPress core) or your theme (in case of direct theme modifications).
Preserving your modifications to make them work after an update is almost impossible if you’ve modified the theme directly.
The update mechanism in WordPress is a rather simple one – new files are copied in place of the old files, nothing fancy.
If you’re using a child theme, however, you don’t have to worry about any updates. Whenever you update the theme you’re using only the parent theme will be updated. Your child theme, and everything you’ve coded in it, remains intact.
You know what you’ve changed
Modern WordPress themes consist of tens of different files. There are PHP files, HTML, JavaScript, CSS, images, sometimes jQuery, and more.
And that’s okay, but the problem arises when you’ve modified a couple of things here and there, and now you have a hard time tracking all the changes.
This is even worse if it’s not you who has made the changes, and now you have to step in and take over the work. In such a case tracking the changes is next to impossible.
If you’re using a child theme, however, then there’s no such problem. Every modification can be found in the child theme’s folder.
Easy to restore
Working with source code can be unpredictable at some times. Crashing your blog is a lot easier than you might think.
Of course, in such a case you’re very likely to find the cause of the problems among those few last lines of code you’ve created, but not always. Sometimes a change made somewhere else interferes with other functions and hacks.
If you find yourself in such a situation then removing all the modifications can be very time-consuming. You’d have to go through each file and bring back its old implementation.
Not with a child theme you don’t. Just get rid of the files causing trouble and your blog is back.
This is something I don’t say very often, but I don’t actually see any downside to using child themes. They really are THE way of modifying any theme.
How to use child themes
From a user’s perspective, using child themes is no different from using standard themes. You just go to your WordPress admin, navigate to Appearance > Themes and set your child theme as Active.
Then you can work with the theme normally, as you would with any other theme. You can add widgets to sidebars, create menus, and things like that.
Here’s what it looks like from a developer’s point of view.
If you take a look into a child theme directory of one of ThemeFuse’s themes you’ll see that there’s not much stuff there:

Actually, just two files: the screenshot, and style.css (mandatory file).
The style.css file for a ThemeFuse theme is very simple. It only contains a reference to the parent’s CSS file and nothing more. This simple structure enables you to do anything you please with our child themes – treat them as a blank canvas to build upon.
Construction of a child theme
As I’ve mentioned, there’s only one required file for a child theme – it’s style.css.
The main purpose of this file is to provide the information header for WordPress to recognize the child theme, or more accurately, recognize who the parent is.
The line that points to the parent is one that starts with “Template.” Here’s an example – the blank child theme from our theme – Writer:
/*
Theme Name: Writer Child
Theme URI: http://themefuse.com/wp-docs/writer/
Description: Child theme for the Writer theme. Child themes are the recommended way of making modifications to a theme. <a href=”http://codex.wordpress.org/Child_Themes”>Reade More</a>
Author: ThemeFuse
Author URI: http://themefuse.com
Template: writer
*/@import url(“../writer/style.css”);
The template line indicates the directory name of the parent theme (case-sensitive).
Of course, the other purpose of style.css is for you to create the styling of your child theme.
I’d advise to leave the @import rule intact. It makes sure that the original style.css (from the parent theme) is loaded along with this new one. This way you can create new entries in this file, or override the existing ones from the old style.css and still have the unmodified ones loaded normally.
Other than the required style.css file your child theme can contain anything else you find suitable. For instance: functions.php, template files, graphics and other files.
Functions.php and other files
Child theme’s functions.php does not override its counterpart (like style.css does – hence the @import rule mentioned earlier). Instead, it’s loaded right before the parent’s functions.php.
You can use functions.php like you normally would – create custom functionalities, hacks, implement some security features, and everything else you can think of.
You can also use your functions.php to replace the original functions in the parent’s functions.php. You can do this if the original function is declared conditionally, for example:
if (!function_exists(‘func_name’)) {
function func_name() {
//something
}
}
Apart from functions.php you can create any other template file. But this time every new file will override its namesake.
For example, if you create a new page.php then it becomes the default template for every page of your blog. The original page.php from the parent will no longer be loaded.
You can also add completely new files that haven’t been included in the parent. Maybe a tag.php file or a 404.php. Child themes are also perfect if you want to create custom page templates.
The whole idea of child themes is actually very easy to grasp once you spend an hour (there’s no need to spend more time) to study all the characteristics and principles behind them. For more info feel free to visit the official guide on how to work with child themes, which gives you a whole in-depth look into the topic.
In the end, child themes are a great example of WordPress’s modification friendly nature. Everything can be tuned, with no hassle in an easy-to-grasp way.
What’s your take on child themes? Do you have any insights to share?






Comments
I was told that we could use the child theme to offer a mobile or responsive site. Do you have a tutorial (or possibly future blog) on how to use the child theme for this? I assume to make the theme responsive, there would be a lot of overwriting, but could you use it to make a mobile site based on the same content?
Nice article on child themes karol.
Great article! I just got my first child theme working and am trying to figure out how to get js to load from the child theme folder. I would like to lighten the load of the js on my theme (Elegant Themes) in an attempt to have faster loading pages. Any support on this will be greatly appreciated as I am fairly new to WordPress. Here’s a link to my site:
http://inclouddesign.com/
Thanks in advance for any and all support…
Love this article. I shared this with someone that needed the info, and I’m sure they will be just as thankful.
is it possible to create a child theme from a theme which is already modified?
Sorry, currently wordpress doesn’t support nested child themes
Hi,
In admin: ‘customize your site’ – colours & background image.
These are the only two changes i made to my theme. I have no plans on anything else, i am happy as is.
Is there a need for a child theme in this case?
Thanks
James.