While there are lots of great WordPress themes out there, I like tinkering and always find something I’d like to change. As WordPress, and by extension it’s themes, is built on open source and standards, this is pretty easy to do with a bit of CSS (style), HTML (structure) and PHP (function) and is (usually) allowed under the licence. However, when a theme is updated by the author, you risk loosing your hand-crafted customisation. That’s where child themes come in. They offer a simple, but flexible way to create a customised theme that inherits the style and function of it’s parent, but can be customised independently. And as any parent knows, their kids are always way cooler than their parents 😉

What is a child theme?

A WordPress theme is simply a set of template files and stylesheets that work with the core to control the look and function of a site. A child theme is one that (by default) uses the same files as it’s parent and so inherits the same style and function. However, you can customise virtually any aspect of the theme by adding new  style definitions and template files. The key point to understand is that changes to the child are independent of the parent, so updates to the parent theme will not overwrite changes to your child theme.

How do you make one?

To make a child theme, you simply create a new folder in your WP themes folder and add a new stylesheet to it. I also added a screenshot.png to show a preview of this file, which you don’t need to do, as well as a template file which I’ll explain later.

The CSS file starts with some comments that tells WordPress that this is a child theme, as follows:

[css]
/*Theme Name: Our Kid
Theme URI: http://www.netskills.ac.uk/
Description:    Child theme for the Twenty Eleven.
Author:         Steve Boneham
Author URI:     http: //www.netskills.ac.uk/about/
Template:       twentyeleven
Version:        0.1
*/
@import url(“../twentyeleven/style.css”);
body {background-color: #000000;}
[/css]

The important parts of this are the Template and the @import declaration that link this to the parent theme and import it’s styles for use in the child theme.

Once you’ve done this, the themes area in your dashboard will show your new child theme.

You can now add your new style rules to your child theme stylesheet (after the @import) and these will override those of the parent theme.

While you can do an awful lot with just CSS, the more ambitious of you might want to change the templates or functions used by your theme as well. Child themes make that easy.

Templates and Functions

Templates files in a child theme work like styles in that they are used instead of files with the same name in the the parent. So to override how a single post is displayed, you just add a new single.php (or for twenty eleven content-single.php) template file to your child theme folder. This will now be used in place of the parent template. The same goes with any of the other template files that are used to control posts, pages, views and comments in a theme.

As to functions, if you add a custom functions.php file to your child theme folder, this will load as well as that of the parent. This means you can  easily add new functions to your child theme without modifying any of the files in the parent theme. When that updates, your added functions will remain.

If you want to know more, then as always, the WordPress codex is a good place to start and links on to some more detailed posts.

Related posts: