Creating a Child Theme for WordPress

Part two of Tuesday’s lightning talk revolved around the process of creating child a theme for WordPress. The benefit of child themes is that you’re separating your changes to a theme you’re modifying from the original; and if things go wrong with your code (as it is known to do from time to time) then you’ve always got the original as back up (but if you’re smart you’re keeping updated backups when you write new code anyway, right?? Yeah.. right). So creating a child theme is basically a non-destructive way to customise and modify an existing theme.

Creating a child theme is a really simple process.

Navigate to the theme directory which is in wp-content/themes and create a new directory for your child theme. In this example we’re making a child of TwentyEleven, so our child directory will be called twentyeleven-child.

Then in your favourite text editor create a new stylesheet called style.css. The critical part of this process is to include the following code

/*
Theme Name: Twenty Eleven Child
Theme URI: http: //example.com/
Description: Child theme for the Twenty Eleven theme
Author: Your name here
Author URI: http: //example.com/about/
Template: twentyeleven
Version: 0.1.0
*/


Only two lines of the above are required. The Theme Name, and the Template. The template name must refer to the DIRECTORY name of the parent theme.

The next step is to import the stylesheet from the parent theme… add this line to your stylesheet after the above code.

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


Now you’re free to add css in this child stylesheet.

Every new property you write in this stylesheet will supersede the same property in the parent css file.  Actually, I’ve found it easier in the past to  comment out the import code temporarily and copy the stylesheet wholesale from the parent into the child them. Then I go about modifying the properties I need to change (marking them with comments like this <code>/*modified */ </code> and then when the stylesheet looks how I want it to, deleting everything in in the child theme that wasn’t modified, uncommenting the import tag and doing final testing.  I’ll also to a search/replace for the  <code>/*modified */ </code>  tags to reduce the size of the stylesheet.

This is just the beginning. You can go on in your child theme to change functions (creating a new functions.php in your child theme will prepend to everything in the parent functions.php file) or to copy and amend templates from the parent folder into your child theme (template.php files in your child directory supersede the parent files).

If you want to create a new thumbnail to show up in the Theme Chooser create a new image 300x225px in size and call it screenshot.png, save it to your child theme directory. ta DAH!

Honestly, the best reference for this stuff is over at WordPress.org, it’s where I got the basic references for above and if you jump over there you’ll find a whole lot more detail!!!

If you want to see the slides from the Lightning Talk, you can jump over to yesterday’s post - and when the video’s complete I’ll throw that in here as well.