post-page

Ian Stewart On Child Themes – Part 1

25
responses

Child themes are a trend which appears to be gaining traction everywhere you look. Theme authors such as Ian Stewart, Justin Tadlock and Darren Hoyt are just a few of the influential people pushing this concept. In order to try and grasp an understanding of child themes, I interviewed Ian Stewart of Themeshaper.com. His responses were so long, this interview will end up being published in two parts. Here is part 1.

1. First off, could you please explain what Child themes are in the simplest way possible?

A Child Theme is a WordPress theme that installs and activates just like any other WordPress theme—with 2 crucial differences. Firstly, it requires no PHP template files of it’s own to work. That’s because it uses the template files of a defined Parent Theme. The Parent Theme must be installed—but not activated—in your blog’s themes directory for the Child Theme to work.

Secondly, as of WordPress 2.7, template files located in your Child Theme folder will be used instead of the template file in your Parent Theme folder. Don’t like how the header is coded up for a particular theme you want to edit? Copy the header.php file from your Parent theme into your Child Theme folder and make the change there. WordPress, as of 2.7, will look for header.php (or any possible template file) in the Child Theme first and use the Child Theme template file instead. This new feature in WordPress 2.7 makes custom theming really exciting and even easier.

It’s really very simple to make your own Child Theme. So simple, I can tell you and your readers how to do it right here in four ridiculously easy steps. It’ll help you get your head around using a Child Theme if you follow along (with a test blog—this’ll be easy but our test theme isn’t going to be pretty).

1. Make a folder in your blog themes directory called “achildthemetest”.

2. Create a “style.css” file in that folder with the following code copy-pasted into that “style.css” file.

/*
Theme Name: A Child Theme Test
Theme URI:
Description: Trying out a Child Theme with the classic theme
Author:
Author URI:
Template: classic
Version:
*/

/*
For the sake of simplicity we're going to import
the classic stylesheet and override the styles.
You don't have to do this though. You can just
start fresh with new CSS or copy over large chunks of
the original styles and edit them here.
*/
@import url(../classic/style.css);

/*
Now, for a demonstration, let's make all the anchors red.
*/
a {
color:red;
}

3. Refresh your blog’s theme directory in the WordPress admin. You should see a theme called “A Child Theme Test”. It’s using the classic theme as a Parent Theme. If you look at the code above you should see a line that starts with “Template” it’s there that we defined that Parent Theme as “classic”, the folder name of our Parent Theme (which could be any installed theme).

4. Activate your new Child Theme and check out your blog. Are all the links in the main content area red? Congratulations. You just made a WordPress Child Theme. You can now edit your WordPress theme of choice—in this instance, the Classic theme—through CSS alone without having to modify any of the original template files. (If you’re a more advanced WordPress developer you can also include a functions.php file in your Child Theme that lets you interact with WordPress and your themes just like a plugin. But that’s another story altogether.)

2. What are some of the benefits that child themes offer versus stand alone themes?

There’s 2 main benefits for the end user when it comes to using a Child Theme versus editing a theme directly: Simplicity and Upgrade-readiness. To explain, I’ll tell you why I use a Child Theme of my own theme, Thematic, on ThemeShaper.com. That’s right, I’m not even editing my own theme directly on my own WordPress Theme blog.

Firstly, it really is just simpler. I currently have only 2 files in my Child Theme folder: style.css and functions.php. Everything else is coming from the same Thematic template files anyone can download and use. When I want to change the look of my theme, I do it in style.css. If I want to get really serious with theme changes, like, plugin-serious, I write some simple code in functions.php. I don’t think about my Parent Theme and, excepting the XHTML it eventually outputs and displays in my browser, I don’t even look at it. Except! Except when it comes time to upgrade.

When I need to upgrade Thematic, my Parent Theme, I can do so without worries. That’s because I haven’t touched the original template files. I haven’t edited the header. I haven’t edited the footer. I haven’t edited single.php. Or index.php. All my theme edits have been made in the stylesheet and functions file of my Child Theme.

Look at it this way: I have another blog I manage with a really fresh and distinctive design that I get compliments on all the time. Unfortunately, I made that design by hacking up and heavily modifying The Sandbox version 0.6. If I wanted to upgrade to a newer version of The Sandbox I’d have to recreate that design. That means I’d have to pull the theme apart, find all my changes, and reintegrate it with a newer version of the theme. If I’d made the modifications in a Child Theme upgrading would mean uploading a newer version of The Sandbox and, well, that’s it really. How long does it take to upload a theme? 10 seconds? When you’re using a Child Theme, upgrading turns from a day long affair into a 10 second chore that can be done while you’re reading weblogtoolscollection.com.

3. Based on what I’ve seen, the child theme trend is really starting to gain traction thanks in large part to you and other theme designers. How long has the ability to develop child themes been available for WordPress? If it’s been available to develop for some time now, why is it that we are only now starting to see heavy development in this area?

As far as I can tell, Child Themes have been available since version 2.1. But I first heard about Child Themes when I entered the Sandbox Designs Competition (http://sndbx.org/). Every entry there is a Child Theme that defines The Sandbox as it’s Parent Theme and modifies the theme with CSS alone. Consequently, I think a lot of the credit for popularizing Child Themes needs to go to Scott Wallick (http://www.plaintxt.org/), co-creator of The Sandbox and organizer of the Sandbox Designs Competition.

But that brings us to why I don’t think there’s been much talk about Child Themes: I think there’s sort of a lack of faith amongst theme authors and users when it comes to what you can actually do with CSS. WordPress developer and theme author Ben Eastaugh thinks that “one reason it hasn’t been more widely publicized is that [modifying Parent Themes with CSS] wasn’t, as it stood, terribly useful” (http://extralogical.net/2008/08/theme-inheritance/). I’d disagree with that in principle but that sort of sums up the feeling of theme authors that have been ignoring this feature.

And, by the way, if you don’t think Child Themes can really do anything with CSS alone make sure you check out the winning entries in The Sandbox Designs competition (http://sndbx.org/results/) or the oft-mentioned and linked to CSS Zen Garden (http://www.csszengarden.com/).

But regardless of what you think you can do with CSS alone, now that WordPress 2.7 let’s you overwrite Parent template files from your Child Theme I expect we’ll be seeing more and more people using them.

Plus, there’s a few other WordPress developments in the works that’ll likely further popularize this method of theme modifying. Namely, the WordPress.com Themes Marketplace and allowing GPL Child Themes to be released through the WordPress Theme Directory.

4. Before we move on, could you explain what a theme framework is? Perhaps providing a few examples for the readers.

In my mind, a Theme Framework would be a theme that, at the very least, was made with clear intentions of being used to develop further themes. A starting point theme if you will. I think a good Theme Framework also shows consideration of, or planning for, what can be done with Child Themes, now and in WordPress 2.7+. And that’s because, really, you shouldn’t be touching a framework if you can help it.

Think of WordPress as a framework where the contents of the database are output in a controlled fashion by your theme. We don’t go in and tinker with the WordPress core in order to make our themes work better (well, some people do but that’s another story again). The same thing with a theme framework. We can modify the theme framework with our Child Themes and leave the framework pristine for easy, safe upgrades.

This concludes part 1 of the interview. Stay tuned for Part 2 which will be arriving shortly.

heading
heading
25
Responses

 

Comments

  1. Andrea_r (29 comments.) says:

    Child themes, just by using the stylesheet and an existing template, have been around a lot longer than that.

    The newer variations allow for their own function.php file, which is more of the fuss.

    • Ian Stewart (28 comments.) says:

      I was expecting to be corrected on that. Has it been there since the beginning?

      • Andrea_R (29 comments.) says:

        I poked around a bit to try and find out, but I think it showed up in or shortly after 1.5 when themes were moved from smarty templates and just using stylesheets, to the full blown template sets we see now.

        Man, I remember those “just a stylesheet” days. :D

    • Scott (15 comments.) says:

      Andrea is correct. The Sandbox Designs Competition was really the follow-up to Alex King’s WordPress Styles Competition, but I appreciate the nod by Ian. :D

  2. Randy (6 comments.) says:

    I have to say I’ve been avoiding reading about Child themes because I thought I might like them and thus end up spending countless hours reading about the possibilities and how-to’s and what not…

    Honestly though, how freaking simple is that.. I love this and it fits perfect for me. I have a base Template that I’ve created which really only get updated once a month while my client themes seem to be changing regularly with every whimiscle idea they have.

    I think with the Overwrite made available were going to start seeing a lot of good things from the WP theme community…

    extra question for anyone,,,

    Is their any talk of a full blown Official WP desktop app any time in the future…(marsEdit is great, but im talking about full admin, Database and Posting features… just a thought)

  3. demetris (1 comments.) says:

    Good interview! Thanks, Ian and Jeff.

    I played a bit with child themes and child templates in 2.7, and they work as they are supposed to, but I don’t find this possibility as hassle-free as what is available now.

    Here is why — please, someone correct me if I got anything wrong.

    In child stylesheets, for example, you can take advantage of the cascade, override parts of the parent stylesheet, and keep using the rest as it is improved/changed/fixed from one upgrade to the next.

    Child templates, on the other hand, are cut off from the equivalent templates of the parent theme, which they override. If you want to keep up with changes/fixes/improvements in the parent template, you will have to run a comparison/merge every time the parent theme is updated. The real advantage, as I understand it, is that your modifications cannot be overriden by accident, which can easily happen if you modify a template of the parent theme in place.

    Greetings,
    Demetris

    • Andrea_R (29 comments.) says:

      Yep, that’s what I got out of it too.

      I like being able to use the template files from another theme and my own stylesheet, but I’m not sure how often I’d use a full child theme.

      I tend to rip themes apart and make them my own anyway, so I don’t often follow through with a theme upgrade. :D

      I could see how it would be useful though.

  4. Kerry Webster (12 comments.) says:

    His responses were so long…
    Should be “His responses were so thorough…” :)
    Nice interview. This is a great aspect of WP that is starting to catch a little fire. Even though it has been around awhile the uses being championed by a few key designers is great. Thanks for the info.

  5. Carson (46 comments.) says:

    I can see benefits from child themes for serious developers, but if I wanted to take a base theme and just change the stylesheet to suit myself I would simply rename the base style.css file to base_style.css and then modify style.css. The base stylesheet is always there if I need to refer back to it.

    On the “upgrade-readiness” offered by child themes: What if the upgrade to the parent theme changes some of the html class and/or id names or adds new ones? If so you have to make some changes to your child theme to maintain the style of your site.

  6. Jacob Santos (4 comments.) says:

    There is another reason to use child themes. I wrote about on my blog, but I’ll summarize here. With WordPress 2.7, you will be able to upgrade themes located on the Themes Extend on wordpress.org. If you modify your themes that you downloaded from that site and upgrade, you will lose all of your modifications. By creating child themes, you don’t have to worry about that. You can edit the files you need and still get updates from the files you don’t.

  7. Alexa says:

    Hi – I understand the need for the child theme but in my case, it’s late as I’ve already made changes to not only the CSS but a few of the php files. Can you specifically tell me how to “create” a child theme from the theme as it is now on the server (it’s live!) as it’s what I want, then I can reload the parent theme as I still have the original install files. The theme released an udpate and that’s when I realized I was in trouble from my changes.

    Thank you for your help -
    Alexa



Trackbacks/Pingbacks

  1. [...] a lot of talk about child themes these days. As the designer of two child themes for the Thematic theme [...]

  2. [...] Child Themes in WordPress 2.7 – Part 1 and Part 2 [...]

  3. [...] Thematic: Was man hier sehen kann, ist auf dem Thematic-Framework aufgebaut; Ian Stewart nennt das Child-Theme. Tatsächlich sind das Modifikationsdaten, die das Aussehen (und Verhalten) einer bereits [...]

  4. [...] Weblog Tools Collection – Child Themes in WordPress 2.7 – Part 1 and Part 2 [...]

  5. [...] Weblog Tools Collection – Child Themes in WordPress 2.7 – Part 1 and Part 2 [...]

  6. [...] Stewart explains in a little more depth what child themes [...]

  7. [...] “Ian Stewart on Child Themes” [...]

  8. [...] “Ian Stewart on Child Themes” [...]

Obviously Powered by WordPress. © 2003-2013

page counter
css.php