Meet Make, an incredibly powerful WordPress theme. Learn more →

WordPress child theme basics

by Drew Strojny on January 15, 2014 / 36 comments

Similar looking logs representing the duplicate nature of a WordPress child theme.

If you customize WordPress themes, you should understand the basic concept of a WordPress child theme. Unfortunately, child themes can be confusing if you don’t have much experience with them. It’s important you understand what a child theme is and how it works alongside a normal WordPress theme. Why is it so important? Not using a child theme for customizations could really come back to haunt you later.

We did briefly introduce the WordPress child theme concept while learning how to customize a WordPress theme, but we didn’t fully explore it. In this post we’ll do just that, and then we’ll show you how to use a child theme.

What are child themes?

Imagine you have a painting on your wall. You really love the painting, but there is one thing that you just can’t stand. The moon is orange. The moon should be white, right? Every time you look at it, it drives you crazy.

You decide you’re going to fix the painting. You get out your brushes, buy the best white paint, and sit down to do your work. As you stare at the painting, you can’t help but think “I hope I don’t screw this up”.

What if there was a better way? Imagine snapping your fingers and creating an exact duplicate of the painting. Wouldn’t that be helpful? Then, you could work on the duplicate, perfecting your white moon. If you screw something up, you simply throw it away and snap your fingers again. When you finally do perfect the painting, you can hang it on the wall, and keep the original in the closet. If you later decide you want go back to the orange moon, or maybe even do a purple moon, just snap your fingers and create a new duplicate to work on.

If you use a WordPress child theme, snapping your fingers is possible! Think of a child theme as a completely new theme. When you activate the child theme it actively inherits everything from your original theme (also known as the parent theme). In our example, the original painting is the parent theme, and the duplicate painting is the child theme.

What do we mean by “actively inherits”? Instead of a static copy, like in our painting example, the duplicate painting (child theme) is actively mirroring the original painting (parent theme). If you splashed a streak of white across the original painting (parent theme), it would instantly and very magically appear on the duplicate painting (child theme).

When you activate the child theme (duplicate painting) you’re effectively “hanging it on the wall”. The parent theme (original painting) stays tucked away safely in the closet. If you don’t like the changes, you can always re-activate the parent theme (hang up the original painting), throw away the child theme, and start over with a new child theme.

Creating and using a WordPress child theme

Here at The Theme Foundry, we’ve got ready made child themes for all of our WordPress themes. If you need to manually create your own WordPress child theme, there are some good instructions over on the Child Themes WordPress Codex page.

To use a child theme, you install and activate it like any other theme. Like we talked about, it will automatically inherit everything from its parent, and look exactly the same when you first activate it. You don’t need to worry about breaking your website when you activate a child theme.

Adding CSS to a child theme

The easiest way to customize your WordPress theme is with CSS, and a child theme makes that even easier. You can experiment with CSS in your child theme, and always revert back to the parent theme if you make a mistake.

After activating your child theme, go to Appearance → Editor and look at the style.css file. You’ll now see it’s (mostly) empty! Why? WordPress child themes automatically inherit everything from the parent theme. Your original stylesheet is being loaded directly from the parent theme. This empty stylesheet gets loaded in after the original styles.

You might be wondering how the child theme styles are going to override the styles from the parent theme. Remember what CSS stands for? Cascading Style Sheets. We’re going to focus on the cascading part. When the browser reads your style sheet it reads it from the top down. Rules that appear later always take precedence over rules that appear earlier. Imagine in our painting example, you wrote something like this (in CSS):

/* In the parent theme (original painting) */
#moon {
  color: orange;
  width: 100px;
  height: 100px;
  border-radius: 50%;

/* In the child theme (duplicate painting) */
#moon {
  color: white;

Your moon will be white! The child theme style rules will naturally take precedence because they’re loaded after the parent theme style rules. So now, instead of editing the existing rules, you’ll copy and paste the specific rules you want to change.

One important thing to notice — we only copied over the color: white; line. Why? That’s all we changed. With CSS, you only need to copy over things you actually change, everything else will automatically be inherited from the parent style rules.

Save the style.css file and you should see the changes show up live on your site!

Changing template files in a child theme

Let’s say the date is showing directly underneath the post title on your individual blog posts, and you really want to move it to the bottom of the post.

First, find the template file in the parent theme that controls the view you want to change. In this case, we’d most likely be talking about the single.php file. Next, copy that entire file to your child theme. Once that file exists in your child theme, it will be used instead of the original file in the parent theme. This is true of any file you copy to your child theme.

Now, make the changes to the single.php file in your child theme and save them. If the child theme is active, the changes will automatically show up on your site. Later, if you want to undo the changes, you can delete the file from your child theme and the original single.php file in the parent theme will be used instead.

Keep a list of the changes

Whenever you duplicate a template file into a child theme it’s always a good idea to keep a list of your changes in a comment at the top of the file. This will provide a good reference if you ever need to make more changes or even revert changes sometime in the future.

Start using a child theme

Hopefully this tutorial gives you a basic understanding of what a child theme is and how it works with WordPress. If you have any questions about the concept, or would like further explanation of a topic, let us know in the comments.

Enjoy this post? Read more like it in Tutorials.


  1. Chris McCoy

    great tutorial ;)

    side note: any plans on future themes ;)

  2. Drew Strojny

    Thanks Chris! We’re working on one right now that we’re really excited about. It should be ready in February :)

  3. Mustafa

    Thanks for the crash course in child themes Drew. I’ve seen them mentioned when theme hunting but never got around to looking up what they were about. :)

  4. Eric O'Brien

    A nice, accessible, discussion of how Child Themes work. Good work!

  5. Timur

    Hi Drew!

    Thanks so much for this immensely helpful article!
    I have been wandering in a world of child themes absolutely clueless, but now you have set me free and I now understand how everything works. Even created my first child theme already! Happy and excited! :)

    Thanks again!

  6. Drew Strojny

    Glad you found this helpful Timur! Thanks for letting me know :-)

  7. Amy

    Finally, a clear explanation of child themes! Thank you so much!

    One question – do Action Hooks stay the same when the parent theme is updated? In other words, if all I want to do is use Action Hooks, do I need to create a child theme?

  8. Zack Tollman

    Hi Amy!

    Use of child themes does not impact action hooks in any way. Generally speaking, if you want to update your theme by using action hooks, you would want to create a child theme and add the custom code to your child theme’s functions.php file. Using the child theme would allow you to update your parent theme and maintain your custom functionality via the action hooks.

  9. Tahir Taous

    It is good to use child themes, when someone wants to add some new features to their themes.

    For example by default 2013, 2014 themes display full content of post on front page of your blog, if you want to display excerpts only (few lines only from post) on home page, then you can create a child theme and edit single.php file,

    It is possible to display excerpts via more tag but I think it is frustrating to add more tag every time you create a post in WordPress.

    By displaying excerpts only, you give your visitors a chance to quickly browse all your posts on blog page, and then visitors can read their favorite post.

    As you can see, themefoundary’s blog page also displays excerpts only.

  10. Janelle

    So, I’m thinking that using a Child theme is smart if you do a lot of customization to the theme, so that when the parent theme has an update from the creator, all your customization stays intact??

  11. Drew Strojny

    Exactly Janelle! Child themes are great for ensuring your customizations stay intact.

  12. Mike

    Thanks for the explanation. One question: I’m starting a brand new site. I have a parent theme and installed a child theme that came with it. The child theme is now active. Should I make all my changes (not just custom changes to style.css), like in Appearance > Customize, with the child them active? My hunch is yes but it’s still a little unclear how things will work in terms of what will be retained and what will not when I have to update the parent theme.

    Thanks for your help.

  13. Zack Tollman

    Hi Mike!

    Generally speaking, you should make the changes with the child theme active and only expect the changes to affect the child theme and not the parent theme. Unfortunately, there are currently no great standards around this in WordPress, so this can vary from theme to theme.

  14. Mike

    Thanks for the fast response, Zack! I will work exclusively within the child theme.

  15. Mohasin Sayed

    Thank you so much for your explanation :)
    it really helped to understand what exactly is child theme about.
    Clear and Explanatory article.

  16. Ranan

    It sounds soooo simple, yet for some reason it hasn’t worked for me.
    Could someone please help me out before it drives me insane?

    So I created a child theme for Nimbus Theme’s Soliloquy, and right from the get go, with nothing other than the style.css file in the child theme it wouldn’t display correctly. I found by copying in the whole original style sheet it displayed correctly, but this makes it harder to keep track of changes.
    There is still a problem though where the featured pages thumbnails still don’t display correctly. Even when copying most of the original files into the child theme I still cant work out why they wont display correctly. Only way it seems to display correctly is if I use and modify the original theme. :(


  17. Gasper

    Can you use two child themes? One for the pages and one for the posts? Or is this something different I need to do?

    I am trying to alter the way my blog looks and am looking into the best way to make that happen. I feel a little lost as to what would be best for that.

  18. Zack Tollman

    Hi Gasper!

    You only need a single child theme. Within that child theme, you can define different customizations for different parts of the site.

  19. Dawn Denby

    I am starting a new WordPress website and am confused about child themes. I totally understand the benefit of making changes to the CSS in the Child Theme so the changes are retained when updating the parent theme.

    What is confusing is the customization part. When I add pages, images, text, etc., should I reactivate my parent theme, make the changes and then reactivate the child theme after these changes are made? Is it best to design the website completely (as possible) first, and then activate the child theme when wanting to make specific changes to the CSS?

    For instance, if I made all the standard changes listed above in my child theme and then deleted my child theme, would all of the changes be lost; including pages, images and content?

  20. Thea @ Baking Magique

    I’m using BRIDGE theme from qode interactive and there’s a update available now. I’ve done all my customizations in the parent theme because I didn’t know what a child theme was. If I activate the child theme, will my customizations be there automatically? And can I then upload the update without anything getting lost?
    I really don’t wan’t to redesign everything again…

  21. Levi V


    This all looks great, but the Basis parent theme has Compass and Sass, which I would like to use. How do I use Compass/Sass in a child theme?


  22. Zack Tollman

    Hi Levi!

    Great question! The SASS files are provided as part of the Basis theme so that you can take advantage of the SASS if you want to use it. The SASS is precompiled into the style.css file, which is used in the theme.

    If you want to use SASS for the child theme, you need to set up a way to compile the SASS locally into the child theme’s style.css file. Popular choices for this task are CodeKit and Grunt.

    Please note that you absolutely do not need to work with the SASS files at all to add a child theme to Basis.

  23. Scott

    Excellent article and very well written. I have been using Child themes for years in Frameworks such as Thematic and Genesis, however recently, I have been getting a few clients that have already existing themes that they have downloaded from somewhere. I believe that I can apply the same child theme methodology to these themes that were created by someone else or another company. I do not want to completely change the themes, just make some subtle changes. As a developer I usually just try something and see if it works, however thought I would see what you and or others thought about this approach.

  24. Zack Tollman

    Hi Scott!

    You absolutely should be able to apply the same methods to any theme. The only catch is if the theme is not coded in such a way that is conducive to child theming. In that case, the theme is probably not coded to WordPress best practices and needs careful consideration before continuing to use it.

  25. Larry Cameron

    What about changing the CSS on the actual the theme options? Does that change only that exact website? And what do need to put in that CSS box? is it the same do you just copy the html over

  26. Zack Tollman

    Hi Larry!

    What CSS box are you referring to? There is no CSS box in the Customizer or Theme Options pages by default in WordPress (nor are there any in our themes). It sounds like you might be using a plugin or theme that provides this functionality. If that is the case, I cannot give you an answer as plugins and themes could chose to handle this in many different ways.

  27. Davey Gravy

    Great article. If you create a child theme you are happy with, then how easy is it to keep those things (e.g. white moon) if you change your site to a different parent theme? Broadly, how is this accomplished?

  28. Corey McKrill

    Hi Davey!

    Child themes are necessarily very closely tied to their parent themes, so most changes you make in a child theme will be irrelevant if you switch to a different parent theme.

  29. Jason

    Thanks a ton for this. I never really understood Child themes (and refrained from working with them.)
    This cleared it all up.

  30. Heather

    I did not see that Thea’s question was answered. I am having the same problem. Edited the CSS and a few PHP templates on my parent theme because I didn’t know that child themes were that important. I don’t have a change log. How can I add all my previous changes to the a child theme so that I can update the theme without losing everything? I would appreciate your help! Thanks.

Comments are closed.