A Child Theme in WordPress is a theme that takes all the juice out of its parent without doing much itself, pretty much like regular kids. This guide explains what a Child Theme is and how to create one for the latest version of WordPress 3.6.

The core benefit of a child theme is that is if you have found a theme you like and want to make minor/major changes to it, you can do so with the safety that if the parent theme is upgraded your changes are still intact.

If you didn’t make a child theme of a parent and instead worked directly on the parent theme – and one day the parent theme is updated similar to how a plugin is updated – then your changes are over written and you become not a happy camper.

So I guess what I am trying to say – is always make a child theme.

OK so how do you make a child theme?

All themes in WordPress are filed under the path:

public_html/wp-content/themes/

Check it out with your FTP software, (your web root may also be known as ‘htdocs’) – In the themes folder  you will find the default themes such as Twenty Ten and Twenty Twelve, do you see a pattern here? can I hear a Twenty Twelve coming around the corner…

All you have to do is to create a folder named anything you like, but keep file naming convention to lowercase and no spaces. In this example I will be using the highly original name of ‘childoftwentytwelve‘, so the path to the folder is like so:

public_html/wp-content/themes/childoftwentytwelve

Create the style.css file

There is only one minimum file that you need in your folder to create a real child theme and that is a file named ‘style.css’, create this file with a plain text editor either NotePad or Text Edit or something similar all attempts to use Microsoft Orifice need to be strictly prohibited. So far we have a file in a folder:

public_html/wp-content/themes/childoftwentytwelve/style.css

The important thing is what is added to the style.css file, and what it is, is a description of the theme and a link to the parent theme and then a link to bring in the parent CSS styles:

/*
Theme Name: yourchildthemename-can-be-anything-you-like
Theme URI: http://www.greatwebsite.com
Description: Designed by <a href="http://www.greatwebsite.com">Neil Gee</a>.
Author: Neil Gee
Version: 0.0.1f
Template: twentytwelve
Tags: bold purple clean & elegant and just peachy

*/
@import url('../twentytwelve/style.css');

So in the code above the text describes the theme is commented out by a beginning of /* and closed by */ – the @import line is outside of the comments and needs to be kept outside.

Keep each line separate and fill in your details – the key line is the Template line, this links the child to the parent and in this case I using the twentytwelve theme as my parent. Which is filed alongside my theme in the themes folder.

The 2 required lines in the comments are Theme Name and Template – the others are optional.

The other key line (and required) is the @import line which is a call to bring in the parent CSS style – it is essentially a path to the CSS style of the parent – twentytwelve in this case. The beginning dots (‘.. is saying the path to the folder is one folder up a level to the themes folder and then one folder back down to the twentytwelve folder and the file to link to is – style.css. This style.css contains all the styles of the parent theme.

So for additional CSS styles to your child theme just add them in after the @import line.

To get extra creative with your work, you can add a graphic for your childtheme, create a file called screenshot.png at 300 x 225 pixels, fill it with your Photoshop finest and file it in your childtheme folder called ‘screenshot.png‘.

Switch WordPress over to the Child Theme

That’s all your hard back-end work done – to choose it from the front end log into WordPress, go to Appearance > Themes and switch over to your master piece.