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:

tf-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:

child-package

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?

there are 12 comments added

  1. Jesse 3rd May 2012

    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?

  2. Wpfix 3rd May 2012

    Nice article on child themes karol.

  3. Bobby C. 29th October 2012

    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...

  4. Kevin McClellan 29th December 2012

    Love this article. I shared this with someone that needed the info, and I'm sure they will be just as thankful.

  5. Joana 7th January 2013

    is it possible to create a child theme from a theme which is already modified?

    • Karol K 22nd February 2013

      Sorry, currently wordpress doesn't support nested child themes

  6. James 8th April 2013

    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.

  7. uwe jansch 3rd December 2013

    Hi, Very frustrating, but I cannot get into wordpress admin to do as suggested: ...to your WordPress admin, navigate to Appearance > Themes and set your child theme as Active. Thanks Uwe

    • Karol 17th December 2013

      This may sounds obvious, but maybe you're not using the administrator account role to access your admin panel?

  8. Misha Minute 27th February 2014

    Karol, Thank so much for writing about your experiences as it relates to frameworks and child themes for Wordpress. From your experience what is your view regarding themes without frameworks such as Themeforest "Avada?" What happens within Avada when you make customizations and later Wordpress performs updates? Are you saying a theme such as Avada because it lacks a framework will lose any customization to this premium theme if it undergoes a Wordpress upgrade? I am very much look forward to your response. Thanks again. Best mm

    • Karol 4th March 2014

      If you update the WP core then nothing will happen to the theme. But if you update the theme itself then you will lose all your customizations. Unless you create a child theme of your current Avada theme. Then it will remain intact even after the main theme's update.

(optional field)

HTML tags are not allowed.

Reset fields

back to top