I Am Blogie

Oyako (親子) is a Japanese term that means “parent-child”. In Japanese cuisine there’s a tasty dish I like that’s called oyako-don, which is a bowl of rice toppings of chicken and egg. And why am I talking about this? WordPress’ child themes!

Ever got tired of copying over the changes you’ve made to your templates each time your theme is upgraded? Ever lost template changes after upgrading your WordPress theme? Well don’ fret, because here’s something that I’m sure you’ll find heaven-sent.

Child themes have existed since WordPress 2.7 (but I’ve only now gotten around to tinkering with it), and it’s the best way to go about modifying — and keeping the changes to — your themes’ templates.

I’ve started using child themes in some of my blogs. Take a look at the screenshot of Blogie Blog’s dashboard, showing the child theme:

Basically, when you use child themes, you can create a separate theme (based on the parent theme) that will hold all your template modifications. So, when your theme provider publishes an update, you can update the parent theme and keep the changes you’ve made in the child theme.

Child themes inherit all the templates (index.php, single.php, etc.) from its parent — that is, those templates that you don’t override. One template that must be unique to the child theme, however, is style.css. That’s right: when you create a child theme, it must have its own stylesheet file.

If you’ve read the Codex, you’ll know that you’ll need to create a style.css file and that’s where you’ll place your own style declarations for your site. And, to include all the style declarations from the parent theme, you’ll need to import it into your new stylesheet file (using @import). This is all that’s required for you to have a child theme.

If you create a new single.php template for your child theme, it will override the parent theme’s template. This is useful for those templates that you want to modify to suit your needs. The templates that you don’t override will simply be inherited by the child theme. In fact, you’ll notice that the parent theme’s templates will appear in your child theme’s list of templates (Appearance > Editor).

Some things to watch out for when using child themes–

When overriding templates (e.g., header.php), check to see if hyperlink calls are properly formatted. Some theme designers use the WordPress function <?php bloginfo('template_directory'); ?> to call theme images or CSS files. For example:

[php toolbar="false"]

On this blog, the above code will resolve to the following:

[html toolbar="false"]

Please take very careful note of this: Even if the above sample code is placed in a child theme template, the <?php bloginfo('template_directory'); ?> function will still return the URL of the parent theme. On the other hand, the WordPress function <?php bloginfo('stylesheet_url'); ?> will always return the URL of the style.css template of the active theme. So, if you have a piece of code like below placed in a child theme’s template, the latter function will most certainly return the URL of the child theme’s style.css file.

[php toolbar="false"]

Child themes don’t seem to see below its parent theme’s directory. I use WooThemes’ excellent themes, and their theme files (PHP templates, CSS files, images, JS files) are organized in sub-folders. All the main PHP templates (index.php, page.php, archive.php, etc.) are in the root directory of the theme, but most of the support files are placed in sub-folders. It seems that the files in those sub-folders are not accessible to child themes… You see, I tried to override some of the templates existing in the parent theme’s sub-folder by recreating those templates and sub-folders under the child theme’s own directory. No go.

Solution: change the hyperlinks calling those templates (or images, etc.) to reflect the actual locations.

So far, I’ve only been experimenting with the fundamentals of WordPress child themes. I know there’s a lot more to it, especially in the functions.php arena. To get you started on that, do read this article.