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.

fusion-html

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.

fusion-structure

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.

firebug-copy

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

88 thoughts on “WordPress Child Theme Basics

  1. Rich Staats says:

    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!

    Rich

      • Michael says:

        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

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

  2. Pingback: Child Theme Basics | WPLover

  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. Haarball says:

    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?

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

      • Haarball says:

        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. Pingback: Smarter Theme Development | The Latest Headlines

  6. Pingback:   Theming links round-up by Free WordPress Themes Blog

  7. Haarball says:

    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!

  8. CJ says:

    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.

  9. Pingback: What is a Wordpress Child Theme | Web Services and Tools

  10. Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

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

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

    • passingby says:

      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?

  13. Pingback: Why I Use The Free Buffet Framework Wordpress Theme | Code My Own Road

  14. Pingback: Enlaces en mi del.icio.us, 15 06 2009 | Vectoralia

  15. Pingback: Wordpress ile ilgili takip edilesi 10 muhteşem blog | MSN Sözleri | Güzel Sözleri | Özlü Sözler | Sevgi Sözler | Diziler | Filmler | Oyunlar | Yavaş | Sağlık | Sanat | Spor | Haber

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

    JIM

  17. Pingback: Wordpress ile ilgili takip edilesi 10 muhteşem blog « Bay Bedava – Netten Başlıklar

  18. Pingback: Utiliser un Framework WordPress | Eiffair

  19. Pingback: Structure du framework Thematic | Eiffair

  20. Samuel says:

    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?

  21. Pingback: 10 Most Helpful WordPress Design Blogs | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money

  22. Pingback: A Better Way to Modify WordPress Themes  | listen to...

  23. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework | Es Developed - Fresh Website and Graphic Design

  24. Pingback: Weekly Digest for October 12th » Alex Jones

  25. Pingback: 10 Resources I Use When I Build Any Website.

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

  27. Pingback: Details on the 10 Most Helpful Wordpress Design Blogs | Arbenting

  28. Jon says:

    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:

    http://therewasrain.com/

    and the CSS for it:

    http://therewasrain.com/wp-content/themes/milkforcereal/style.css

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

    http://jonschafer.com/blog/

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

  29. Simon says:

    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?

    Thanks

  30. Pingback: A Comparison of 6 Popular WordPress Frameworks | Pro Blog Design

  31. Pingback: A Comparison of 6 Popular WordPress Frameworks » WordPressURLs

  32. Pingback: iThemes and Child Themes – introduction : iThemes : Business WordPress Themes, WordPress CMS Themes

  33. Pingback: Duh! Wordpress Themes…Defaults! « Juanitas Web Spot (www.jack-in.com)

  34. eric:p says:

    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!

  35. Bryce says:

    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?

  36. Pingback: Comparison of Popular WordPress Frameworks | MikeCapson.com | A Saint John Web Designer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s