Child Themes – Learn them, love them

As a general rule, I don’t do much help with themes. Not because I can’t, but because themes are a style and preference issue, which means what I think looks good, you may not. Once I find a theme I like, I prefer to spawn a child there-of to modify and customize. I’m going to step a little outside my comfort zone to discuss child themes.

The parent/child relationship in code is something that shows up everywhere. A child inherits from a parent, and only the aspects of the child you change will be different. This is most simply understood in the realm of WordPress themes. The official WordPress Codex doc on Child Themes is mostly straight forward for anyone who’s looked at a theme and played around a little. But the novice can get easily overwhelmed.

The easiest way to get started is to make a new folder in wp-content/themes for your theme. /wp-content/themes/child-of-2010 for example. I like to name my children something that will remind me right away of their parent. For example, on another site, I have a news-style theme, taken from Justin Tadlock’s Hybrid Theme, which I called ‘Hybrid News ala JFO – Blogging’. The folder name is ‘hnj-blog‘ to differentiate it from a very similar, but functionally different ‘hnj-video‘ and ‘hnj-plain‘. Each of the three themes is a small variation on the parent theme, but because of the way I wanted to call things, I decided that it was better to have three themes instead of an extensive functions hack and slash. This was after a lot of testing and tweaking and changing, but in the end, this worked for me.

For a proper child theme, you only need one file in that folder: style.css

You heard me right, just one. That Style file will be what tells your code where to look for your parent theme. Here’s what Child looks like:

 
/*
Theme Name: Child of 2010
Theme URI: http://Ipstenu.org
Description: This is a child theme of Twenty Ten (2010), the 'new' default WordPress Theme.
Version: 1.0
Tags: fixed width, widgets, valid CSS, valid XHTML, SEO, SEO friendly, adsense, custom header, three columns, clean,  right sidebar, blue,white, photoblogging, widget ready, simple, gravatars
Author: Mika Epstein
Author URI: http://ipstenu.org/
Template: twentyten
*/

/* Get base CSS */
@import url('../twentyten/style.css');

There are two really important parts to this. First is the line Template: twentyten — This is what defines the theme as a child theme. Period. Without this, you have nothing. The second is @import url('../twentyten/style.css'); which tells your CSS to pull down all the CSS from Twenty Ten and use it.

Once you’ve done that, you have a working theme and you can activate it. I know! It’s so easy, a caveman could do it! Any CSS changes you want to make go in your new child theme and, because of how inheritance works in code, they override anything imported from Twenty Ten, so your changes magically take effect, without having to reproduce the whole theme!

But what if you want to change a template file? I wanted to add one line to my comments.php file to turn on a subscription checkbox. This is done by copying the comments.php file from the twentyten folder into your child-of-2010 folder, and making the edits. It works almost the same way that the style.css. The main difference is that with template files, you can’t just have it contain only your changes, it must be the whole file, with your changes added in. This trips people up sometimes.

Now that you’ve seen how easy they are to make, you may wonder what the point is? After all, they are easy, but it’s easier still to tweak the parent theme. Yeah, it is. It’s also easy to lose all your changes when you upgrade WordPress.

For better of for worse, and yes, people argue about this all the time, WordPress upgrades overwrite the Twenty Ten theme, just like they used to overwrite the Default theme. I can’t begin to tell you how many times I’ve see angry posts ‘The upgrade blew away my theme changes!’ And for every one of those, someone’s posted ‘Yeah. It does that. Restore your theme from backup, and by the way, try a Child Theme.’ Now that WordPress lets you upgrade themes from inside the admin screen, you’re going to run into this more and more often. That’s why we’re always saying ‘Don’t change core! Don’t edit themes! Make functions/plugins/children!’ More on the other stuff later.

A child theme is smaller than a copy, and it’s just as fast. A child theme will never be overwritten when your theme is upgraded. Your child theme is safe even from a manual upgrade. Remember the directions for that? Even when we tell you ‘delete your WordPress folders…’ we always say ‘except for wp-content!’ That’s because your uploads, plugins and themes are in that folder, and you should NEVER delete them for an upgrade. And by making your own theme folder, no one but you will use it and no other theme will overwrite it.

So yes, use Child Themes. Learn them. Love them. Your life will be better the next time you upgrade WordPress.

StudioPress Theme of the Month

Comments

  1. Oh awesome! I thought this would be so much more complicated … and it’s not.

    Thanks for the great tutorial.

    • I know :) That’s one of the many reasons I think Child Themes are epic cool. They really are easy if you only want a couple small changes. And now you’ll never fear a theme upgrade again ;) … unless the theme author radically changes everything …

  2. Hah! Looks like you beat me to this by a day: http://ottopress.com/2010/wordpress-protip-child-themes/

    GET OUT OF MY MIND!

    • But it’s so warm and comfy here!

      (And yours addresses functions, which my post did not, so everyone go read Otto’s post too!)

  3. I wish I had read this article around two week ago! :sad:
    I could easily save the theme that I had and now finding it next to impossible to search for that one again. Darn! why did I delete wp-content folder!

  4. I’ve been playing around with this a little more – all of the template files show up when the child theme is selected. Wouldn’t I want to put all of them in the child theme folder so the client doesn’t edit a template file that could get overwritten with an upgrade? Of course, they rarely touch the template files but, you never know …

    • The child picks up the parent’s templates because that’s what it’s supposed to do :) And if you should copy them in … well. If you edit them, obviously copy them into the child folder and edit THERE. But otherwise, it’s a small case of educating your client. I’m assuming you’re designing the theme and handing it all over to them. If so, just make a robust readme.txt that explains what the templates are (page-foobar.php is used for showing foo over bar) and remember to tell them ‘If you want to edit any of the templates used in this theme, COPY the appropriate template file from ‘maintheme’ into ‘childtheme’ and edit there. Otherwise you WILL lose your edits when your parent theme is upgraded.’

  5. Thanks for the breakdown. I just upgraded and lost over 40 hours of changes because I hadn’t made a child theme… Lesson learned! lol

    Be sure to not just edit your core files. And if you do and lose everything on an upgrade.. playing donkey kong does help ease the pain a bit. ;)

Half-Elf? Try Half OFF WordPress ebooks!