WordPress Child Theme Basics

In this post you’ll learn all the basics of WordPress Child Themes: WordPress Child Theme file structure, how to make any WordPress Theme a blank framework, how to import Parent Theme CSS styles, how to override Parent Theme styles, and how to override Parent Theme Template files. You’ll also learn that all of this is incredibly easy and within your grasp and that it might just change how you think about WordPress and Theme development.

Child Theme File Structure

WordPress Child Themes are located in /wp-content/themes/ like any other WordPress Theme. They’re activated from the WordPress admin like any other theme. They’ll always have a style.css file and may often include a functions.php file. They can contain images folders, script folders and include folders. Really, they’re just like any other WordPress theme.

Except they don’t need theme files. None at all. Zero. You don’t need to understand PHP in the slightest to create a WordPress Child theme.

The Comment Section In The Child Theme Stylesheet

The key to understanding how WordPress Child Themes work lies in one single line of a basic WordPress theme style.css file.

Here’s an example style sheet header from the WordPress Codex.

Theme Name: Rose
Theme URI: the-theme's-homepage
Description: a-brief-description
Author: your-name
Author URI: your-URI
Template: use-this-to-define-a-parent-theme--optional
Version: a-number--optional
General comments/License Statement if any.

We’ll be concerning ourselves with 1 particular line from the style sheet header.

Template: use-this-to-define-a-parent-theme--optional

According to the WordPress Codex

The simplest Theme includes only a style.css file, plus images, if any. To create such a Theme, you must specify a set of templates to inherit for use with the Theme by editing the Template: line in the style.css header comments.

What does this mean? We simply have to replace use-this-to-define-a-parent-theme--optional with the directory name of another installed theme—now called the Parent Theme—and we’re ready to begin.

A Framework Ready For Your CSS

Let’s make a WordPress Child Theme for one of the featured themes on the WordPress Theme directory, Fusion. We’ll call our new Child Theme, Fission. But first, a warning: this will be really easy.

We need to make an appropriately named directory in /wp-content/themes/ for our new Child Theme. That gives us /wp-content/themes/fission/.

In that /fission/ directory create a new file called style.css. Open style.css up in your favorite text editor.

Copy the following 5-line style sheet header into style.css and save the file. Pay close attention to line 4.

Theme Name: Fission
Description: A Child Theme of Fusion
Template: fusion

You just made a WordPress Child Theme for Fusion. Activate Fission from the Themes section of your WordPress admin. If everything went right … it should probably look wrong. That is, it should look like a brand new, valid HTML document in your browser, without any styling.


It might not look like much but if we look at the actual HTML skeleton of the the theme in Firebug we’re reminded that a lot of CSS design is simply a matter of manipulating containing divs and block level elements.


Here’s what this all means: you’re now ready to use the HTML output by this Parent Theme—a theme that has 19 PHP template files—as a framework, or canvas, for your design.

If you’re not a Theme developer you’ve just made yourself a fully functional blank WordPress Theme to start working with. You don’t have to know PHP. Just CSS and HTML. If you are a Theme developer, you can see what we did there. You can now easily reuse the same code base again and again, making room for easy updates to the code by untangling the presentation from the core of the theme as far as it will go.

Importing Parent Theme Styles

Of course, we’ll need to use CSS to make it look less wrong. For demonstration purposes, and for people new to making changes to a Parent Theme in this manner, we’re going to import the styles from the Parent Theme by adding only 1 line to our Child Theme style.css.

Theme Name: Fission
Description: A Child Theme of Fusion
Template: fusion
@import url(../fusion/style.css);

It should look … exactly the same as the Parent Theme, Fusion. This is not a mistake. This is revolutionary. What you’ve just created is a safe space to make changes to the Parent Theme without touching any of the original theme files.

Overriding Parent Theme Styles

Alright, now let’s say you want to make some simple changes to your Parent Theme. What do you do? Using something like Firebug you can find out where the offending styles are in the Parent Theme CSS.


Then just copy and paste the code into your Child Theme CSS where you can edit it safely (making sure to delete the reference to the filename that Firebug produces: “style.css (line 183)” in the example below).

/* Overriding the h2 styles from the Parent Theme */
h2 {
	font-family:"Palatino Linotype",Georgia,"Tahoma","Century Schoolbook L",Arial,Helvetica;
	font-size:250%; /* Increasing the font size */
	font-weight:bold; /* Making the titles bold */
	margin:0.6em 0 0.3em;

And when your Parent Theme is updated, your new Child Theme styles will still stick.

Overriding Parent Theme Template Files

Editing with CSS is great and it’s very easy to learn just enough to safely make changes to a WordPress theme but what happens when you really do need to make changes to a template file? When there’s something hardcoded in?

Easy. Copy the Parent Theme template file to your Child Theme directory and make the edits there. As of version 2.7, WordPress will look in the Child Theme directory first for template files. And if an alternate version of, say, footer.php, or single.php exists, WordPress will use that template file instead. This is simply awesome. WordPress will even accept category-XX.php (where XX is the ID of a particular category) in a Child Theme if you want to make changes to a specific category archive.

How To Modify WordPress Themes The Smart Way

This post is part of the series How To Modify WordPress Themes The Smart Way.

  1. WordPress Child Theme Basics
  2. Modular CSS in WordPress Child Themes
  3. Using Filter Hooks in WordPress Child Themes
  4. Using Action Hooks in WordPress Child Themes

91 thoughts on “WordPress Child Theme Basics”

  1. Wow! Thanks for the info. I had no idea. I’m a relatively new WordPress and using your theme framework. I’ll know to use this in the future. Very cool.

  2. It’s all starting to sink in and make sense Ian, and I am REALLY starting to think of theme development different. If you were to take this one step further and discuss overriding theme template files a bit more, I think I would be sold forever.

    Thanks man, this rocks!


      1. Ian, can I suggest that a ‘zeroth’ post in the series would be appreciated by at least one of your readers (and possibly many more).

        I would love to read something in your intelligible style about what a WordPress theme does. Are they all functionally the same? Or are some simply a graphic ‘skin’ whilst others offer greater functionality?

        If, as you write here, all WP themes can essentially be considered a potential parent theme, what does Thematic offer that makes it such a popular (and appreciated) theme for many people to use as a basis for their own customisation?

        As somebody who understands HTML and CSS, but nothing more, I feel one decent overview – written by somebody who understands WP and PHP, etc, and who can also remember what it felt like when they first encountered dynamically-generated websites – is all that stands between me and really understanding how WP works.

        Thanks, Michael

      2. Once we get through the series I hope it’ll be clear why Thematic is such a popular theme.

        And once we get through the series you’ll have climbed from zeroth place to somewhere more near the front of the pack. Really. It’ll all come together.

  3. Excellent work Ian. This is a great reference for anyone who wants to learn more about child themes. Whenever we get questions about child themes from our members I always send them to one of your articles for a detailed explanation. This is a perfect example; packed with useful information, and easy to follow for beginners.

    Keep up the good work!

  4. I get how using an existing theme (and perhaps Thematic in particular) is a brilliant starting point for making a theme, but I’m not sure I entirely get the value of not having to edit template files. You don’t necessarily have to know PHP to confidently edit template files; it’s basically about replacing stuff and moving them around. I’ve read all the articles around here, and I’m asking myself: will I really prefer this to simply making a duplicate of Thematic and start editing the files? Will I really not need to edit any of the HTML (and PHP) to regardless of how I want to structure it?

    1. In short: it depends. It all depends on what you want to do. I certainly think that for 99% of all blog design it’s easier—and better—to start designing with a Parent-Child Theme. Others might not.

      1. Yeah, OK. I guess I’m a little nervous not to be in complete control of what I’m making — and that CSS inheritance can turn out to be a bit of a headache. I’ll play around with this for a bit get back to you 😉

  5. Hey, I’ve been looking more closely at the source code of Thematic, and I’m quite impressed. The extra classes in the body tag and post divs are particularly brilliant — enables loads of easy custom styling without messing around with php. Just the fact that they are there, and that they provide SO MANY ways to customize is making me think bigger and bolder in terms of what I can create. I’ll build my next site based on this, and if all goes predictably well, I’ll stick to it. As I touched on my first post I’ll probably edit the template files quite a bit, but then again, I use WordPress more as a CMS than a plain blog platform. Good work!

  6. Maybe I’m missing something but when I try to make the child theme wordpress says “broken theme, missing template and style sheet.” and near as I can tell I’ve followed the directions completely.

    I have wp 2.7.1 running in MAMP … if that helps at all.

    If you need more information to diagnose the problem just let me know I’ll do what I can to scrounge it up.

  7. Hey awesome! Thanks for the post. Just learning WordPress myself and want to update my site, and you have made everything that much more clearer. Chur!

  8. I am trying to create my child theme. WP is saying that I have stylesheet and theme missing. I corrected the case, made it all lower case but that still didn’t work. Here is what I have:

    Theme Name: Thematicoo
    Description: Child Theme for Thematic
    Template: thematic

    I created the directory and everything. It recognizes my thematicoo name but nothing else. And i created it in notepad. Please help!!!

    1. same problem here.
      if it is only style.css in there, in admin, it will say that

      Broken Themes
      The following themes are installed but incomplete. Themes must have a stylesheet and a template.
      Name Description
      Fission Template is missing.

      any help?

  9. Ian,
    I knew that for my CSS styling over the original theme I just placed it under the @import statement. what I learning is I did not have to re enter all the lines again. say an ID has 4 lines and I wanted to change just the color. then all I need to do is put the title and my changes, like,

    h2.postTitle. a {color: #xxxxxx}

    As you said this is AWESOME, because I can see my changes all in one place. I wish this could be done for the Template files also.


  10. This is an awesome tutorial! Just started researching the use of child themes and managed to come across this site. Great work!

  11. Dear Ian,
    I really like this tutorial and your Thematic theme. “I really like” is an understatement: I love it! It’s awesome. But I have a question: I made a child-theme and I want to post it on wordpress.org, so everyone can use it. If I want to post it I need to implement the parent-theme. How do it do that?

  12. Does the functions.php completely override the existing functions.php? Basically, if your parent theme has various important functions/tags/hooks in its functions.php, then it sounds like you’re limited to copying them across manually into your child theme’s functions.php?

  13. This is truly awesome stuff! Many hearty thanks for making my design / development life easier and more satisfying.

  14. How did u implement the “This post is part of the series” section? Did you use it inside the post code, or did you use a plugin for it??

  15. This is great! But, I guess I don’t fully understand. With this example, you can only overwrite the code for Fusion into your Child theme? Not, say, write entirely new CSS for it?

    What if you wanted to mimic:


    and the CSS for it:


    If you copy that CSS into your new child theme, everything is messed up. As I have done:


    Huzzah? Thanks for these articles! They are well written and incredibly easy to understand and follow along!

  16. This is all great.

    What I’m trying to do though is create a two column sidebar and can’t work out how I can do this?

    Any ideas?


  17. THANK YOU x ∞!! I was using Vigilance and followed the steps they gave me, and it was all screwed up (as you describe before the import is done) and turns out they gave me the wrong import path and I didn’t know what to do but because of your webpage I figured it out.

    Bless you!

  18. Thanks for the info. I’m a relatively new WordPress and using your theme framework. I’ll know to use this in the future. Very cool.

  19. OMG! This is just what I was looking for. You’ve really made this easy to understand for a newbie in the WP theme design. Bookmarking now!

  20. The problem with overriding parent theme template files (if you need to change something that’s hardcoded) in your child theme is that whenever the parent theme gets updated, you have to go through and redo all of your overrides in the template files you’ve copied into your child theme. Is there a way around this?

Comments are closed.