WordPress Child Themes – What, Why & How

Parent & Child Themes in WordPress
If you find this tutorial too difficult to follow, you can hire me to build your child theme for your specific needs.

WordPress has been as successful as it has because of a committed community of users providing free, open-source code, plugins and themes.

Sometimes though, you might find a theme that you really like, but there’s a few changes that you would like to make. The problem is that when you edit the theme files, if your theme ever gets updated, you lose all your changes. Also, as a beginner you can mess about with the child theme as much as you want, without endangering the parent theme. That’s where child themes come in.

What are child themes and why use them?

Child themes build upon an existing theme, without modifying the original theme, so that if the theme ever gets updated, your modifications to the theme are safe, because you’ve created a new theme and the update will only change the original files.

How to create a child theme

To create a child theme, you need to start by creating a new folder under your wp-content/themes folder. You can call it whatever you choose.

The way a child theme works is that WordPress will search the child theme folder for the suitable files to create the display, and if it doesn’t find them, it will look to the parent theme folder.

So if my child theme consists of just style.css and single.php, it will use both files to display single blog posts. However, to display a page, it will use the stylesheet in the child theme and page.php from the parent theme, since the child theme does not have its own page.php.

At a very minimum, all child themes have to include style.css and the first few lines of your style.css file must be correctly formatted, to let WordPress know that you’ve created a child theme and to let WordPress know what theme is the parent.

Defining a child theme

Use the following code to tell WordPress the required information about your child theme. Remember, these are the first lines of your style.css file in your child theme folder:

Lines 2, 3 & 4 are all fairly arbitrary and you can complete them as you wish. However, the Template declaration (line 5) is very important – you must enter the folder name (under wp-content/themes) of your parent theme. Be aware that this is case sensitive. This is how WordPress knows where to look for the template files if they’re not found in the child theme folder.

Sorting out the stylesheet

If you want to rewrite the entire style.css file, then you’d continue past this point as if this were a normal CSS file. However, if you just want to change a few declarations in the stylesheet, you need to import the parent CSS file, so that all of the parent CSS rules are defined and then you can build on them with your own declaration. In order to do this, you need to use the @import rule. You have to make sure this is the first declaration after the lines we just created above, so for example your stylesheet would now look something like this:

Just change ‘parentthemefolder’ to the folder name of your parent theme. Now you’re able to make changes by making declaration after the import rule. So for example, your stylesheet might start to look like:

What about functions.php?

functions.php, which allows you to add PHP functions to your theme works slightly differently than any other file when it comes to child themes. In this instance, the functions already declared in the parent theme’s functions.php will still be active and you can simply supplement them by creating your own functions in your child theme’s functions.php, so there’s no need to copy everything from the original functions.php – just write any additional rules in a new functions.php file in your child theme.

All the other theme files

You are free to add other theme files such as archive.php, index.php and attachment.php to your child theme at your will. Where one of these files exists in the child theme, the parent theme file will automatically be overridden.

You can also create more specific templates in your child theme. For example, if your parent theme includes archive.php, but you want a different template for the category with an ID of 4, you can create category-4.php in your child theme and the archives for category 4 will be displayed using this file. I make this distinction because WordPress will use this file, even though a file with the same name does not exist in the parent theme.

In short, WordPress will use its standard rules of hierarchy for finding template files within your child theme to correctly display the requested view and if it doesn’t find an appropriate file, it will use the same rules of hierarchy to find a suitable theme file in the parent theme.

Have you attempted to create your own child theme? Have you ever downloaded a child theme? How did you find the learning curve? Please share your experiences.

At 2014 WordCamp Tampa, I gave a presentation about how to use child themes and functionality plugins to better organise your code. It goes into great depth, with lots of slides, examples and templates for your child theme and functionality plugin to get you off on the right foot. Check it out: Putting things where they belong

25 thoughts on “WordPress Child Themes – What, Why & How”

  1. I’d never heard of child themes, but it seems a good idea. In all the blogs dedicated to Thesis, I’d wondered why it seemed changing anything in your theme was such a hassle. Now I understand. I’ll keep it in mind when I”m able to upgrade to Thesis.

    Delena

    1. Well Thesis is a whole different kettle of fish because it uses hooks instead of standard WP file changes to make changes. Not sure if that’s why you’re having trouble making changes to Thesis…?

  2. Barry says:

    Thanks Dave, great site, and thats by far the best child theme introduction Ive come across, was battling to know where to introduce functions php

    1. Thanks Barry, I hope that you were able to put it to good use :)

  3. Kristina L. says:

    This is very valuable info. I had no idea that child themes exist, but you gave a very good explanation of why and how they should be used. Seems like a “must have” to me. Thanks for the information, Dave, I sure appreciate it!

  4. Adrian Rice says:

    I’ve just started on child theme development but all the tutorials were less than clear on the functions.php use in the child theme. One short paragraph has sorted my confusion. Thank you very much. Keep up the good work.

    1. You’re welcome. Good luck with your child theme!

  5. The biggest thing to remember, especially with `functions.php` is the Child-Theme’s ‘functions’ are read and acted upon before the Parent-Theme’s ‘functions’.

    It’s something easily forgotten when writing about Child-Themes and generally the case why it is recommended by the WPTRT for Parent-Themes to use the `function_exists` conditional check in their `functions` file. It is also why the check is generally not necessary in the Child-Theme’s `function` file.

    1. That’s a good point Edward. In the case of child themes, it really shouldn’t change their functions, but it’s definitely something to consider when writing parent themes.

  6. Chris Earl says:

    Thanks for sharing this valuable information!
    I was always struggling with WordPress when I uploaded some good looking free templates, but couldn’t do anyhting. The Child theme is a perfect start!

    1. Yeah, it’s a great way to implement free themes that you want to make some small modifications to, as well to learn the basics of theme development, by working from an existing theme.

  7. Alex says:

    The one keyword I was searching for in this article was “override”. So, functions.php – no override (just additions).
    style.css however = override since you specify h1 a styling after you import.

    1. That’s right. You can’t override a function, because if you redeclare a function with the same name, you’ll cause a conflict. However, you can effectively override existing functions, by writing new functions that replace the actions of the original function. As for style.css, yes, you can override as many declarations as you want, because it is the last rule loaded in any case that rules and since you import the parent theme stylesheet before making any new declarations, the new declarations will overrule the parent theme.

  8. Corey says:

    Hey thanks for the article. I believe child themes are essential to learn hot to do for any new person to wordpress! In my site I simply made a child theme for twenty ten and cannot be happier with how easy it can be to modify and not worry about my edits being deleted.

    I have to say that your article on “how to…” do a child theme is by far one of the most simplistic and easy to follow. I would recommend it to anyone wanting to learn. Thanks!

    1. It’s a great way to get into editing themes, because you can start with the simplest of changes, like just changing a single font size. It doesn’t have to be dramatic; it’s just a good way to experiment. You can’t mess anything up, because you’re not editing the original theme.

  9. Dan says:

    Hi Dave,
    Thanks for putting this article together. I have been wanting to get more into the child-themes and how to set them up. I have a better idea of how they work now. But i have a question. It seems fairly straight forward if you want to add a new line of code or edit existing parent code and place into the child theme which will override the parent.

    But what if I want to delete certain line of code from the parent file? For example, if a Singe Post parent file has a function to display date and time of article publishing and I want to remove that line of code to avoid displaying it. Would i have to copy the entire Single Post parent file (and any other such files where I want to delete code) to the child theme and hack each one there?
    Thanks much,
    Dan

    1. Hi Dan,

      Yes, that’s exactly the strategy you would take. To edit a file, just copy it to your child theme and then edit it from there. Good luck!

  10. Ben Brown says:

    Hi Dave, I am relatively new to all this, and I am not a great theory learner, more a practical person. Anyway I would like to ask one question in relation to child themes. In the construction of a child theme am I right to say that I can create a Page or Pages with divs that are totally different to the parent theme in a child theme, meaning – the layout and css style of the child theme is different to the parent theme but the websites overall functionality is taken from the parent and the style of the child theme is displayed. I hope this makes sense.

    1. Hi Ben,

      Yes that’s right. You can recreate page.php and single.php and change the div classes and define them in your child theme’s style.css. That will allow you to change the appearance of those elements, while retaining the rest of the functionality of the theme.

  11. Maruti Mohanty says:

    Hi Dave,

    I want to know how to customize a file inside a folder like, if you have a file in your parent theme parent-theme-dir/includes/filename.php, How do i customize filename.php using child theme?

    :)

    1. I’m not sure and have never tried it, but I would think that recreating that directory in the child theme and putting the file in there should do the trick (i.e. child-theme-dir/includes/filename.php). If you try it, please let us know if it works.

  12. Maruti Mohanty says:

    No, it doesnt work and so i feel it is a shortcoming of child theme concept.
    If you have any work around please do share.

  13. I bought a theme when I first set up and tried to do the right thing and create a child theme. It nbsp would not work and looking in the support forum others couldn’t get child theme functionality working either. I never got to yen bottom of it but the plugin author basically said the theme was not compatible with child themes. Not sure how or why. Too late for me now but I wonder whether others have encountered the issue of child themes not working?

    1. I can’t think of a reason why a theme wouldn’t work with child themes… Sounds hokey to me

      1. Sounds weird doesn’t it but I followed all the instructions. (Sorry about some of the auto-corrects in my original comment – must have been on iPad).

Leave a Reply