How to Create a WordPress Child Theme CodeUnit 13 JUN 2011

To create a WordPress child theme of another existing theme turns out to be quite simple to achieve. If you haven’t heard of child themes yet, basically a child theme is an extension of an existing theme, which allows you to make changes to the parent theme without actually editing any of the files of that theme. For object-orientated programmers, you will recognise this concept as being that of inheritance.

So how do we do this?

Well to create a child theme is nothing more than making a new theme folder and then putting a specially formatted CSS file in it.

So using the default WordPress TwentyTen theme as an example, let’s do this. First, create a new folder called twentyten-child in your /wp-content/themes directory. In it, create a blank css file called style.css (your theme’s main stylesheet always needs to be named as such).

Now a child theme can contain as little as a single .css file, or as much as a fully fledged wordpress site, including things like functions.php, template files and just about anything else you can think of! But because the style.css file is what defines a child theme, let’s focus on that.

Opening up the style.css file of a child theme we will see something like this at the top of the file:

Theme Name:     Twenty Ten Child
Theme URI:      http: //
Description:    Child theme for the Twenty Ten theme 
Author:         Your name here
Author URI:     http: //
Template:       twentyten
Version:        0.1.0

Most of the descriptors are pretty self-explanatory, but note the Template: declaration. It is this one line that marks this style.css file as being a child theme, in this case of a theme named twentyten, or rather contained in /wp-content/themes/twentyten

Now when it comes to the functions.php file, inheritance takes over and everything that is available in the parent theme is available to you in your child theme without having to redeclare it. However, the stylesheet is different in that nothing from the parent theme is carried over. If you are creating a child theme just to make small visual adjustments to the theme, then you can either copy the parent style.css into your child theme’s style.css file, or you can make use of the import rule which looks like this:

Theme Name: Twenty Ten Child
Description: Child theme for the Twenty Ten theme 
Author: Your name here
Template: twentyten

@import url("../twentyten/style.css");

Note that no CSS rules can appear above the import line or else it will be invalidated.

And that is how simple it is to create a child theme. For more reading on actually tweaking the theme, be sure to check out the almight WordPress Codex!

Related Link:

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.