How to create a Child Theme in WordPress 3
January 12, 2012 
2 Comments
how to create a WordPress child theme
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.3.2.
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 Eleven, 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 ‘childoftwentyeleven‘, so the path to the folder is like so:
public_html/wp-content/themes/childoftwentyeleven
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/childoftwentyeleven/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: twentyeleven
Tags: bold purple clean & elegant and just peachy
*/
@import url('../twentyeleven/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 twentyeleven 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 – twentyeleven 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 twentyeleven 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 250 pixels, fill it with your Photoshop finest and file it in your childtheme folder.
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.
Related posts:
Pingback: How to create a Child Theme in WordPress 3 « coolestguyontheplanetnow