How to Create a Child Theme in WordPress

A WordPress child theme is defined as “a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.”. For instance lets say that you want to change the way on your blog looks for a certain time of the year, but you want to revert back to its original look after that. A child theme is the perfect way to do just that because it makes no change to the original theme, but still allows you to change things up a bit.

They are, in fact, the recommended way of making modifications to a theme because:

1. Changes made using a child theme will not be overwritten by defaults when you update the parent theme
2. You’ll know what you have changed because every modification will be in the folder of the child theme
3. You will be able to restore your blog much more easily if your modifications crash your blog or you simply don’t like them; any problems can be dealt with by a do-over

Building a child theme

The creation of a child theme is simple; all it takes is a folder, a CSS file and a screenshot. We are going to build a simple child theme using the ever famous twenty twelve theme.

We will begin with the folder. In your wp-content/themes folder you need to create a folder with the name of your child theme. For the purposes of this article, we are going to name this folder ourfirstchild. Once you have created this folder we need to take the second step, which is building the style sheet. Before you move any further, it is important that you have at least a working knowledge of Cascading Style Sheets, or CSS, before you continue. This is something that is relatively easy to learn and you can find a number of great tutorials on the web for free.

Once you have your favorite text editor fired up you need to enter the following lines into your style sheet:

/*
Theme Name:     Our First Child
Theme URI:
Description:    Learning about child themes
Author:         WP Themes
Author URI:
Template:       twentytwelve
Version:        1
*/

Of course, you can enter your information for the name, description and author. If you are using a template other than twentytwelve, that would need to be changed as well.

When that is complete, save the style sheet as style.css and upload it to your newly created folder. Your theme should now appear under the Available Themes section of WordPress.

Of course, we haven’t referenced its parent theme, done any styling to this yet nor have we uploaded the screenshot so the image is blank. If we were to activate it, your site would look pretty weird.

To reference our twentytwelve theme, or any other theme of our choosing, we need to add this bit of code to our style sheet:

// This will reference the style sheet from the parent theme
@import url("../twentytwelve/style.css");

Now we need to make some changes otherwise there is no point in using a child theme. To do this, let’s change the background color and the font color of the parent theme. This can be accomplished by adding a body and paragraph class to your style sheet like such:

body {background: #999999; }
p {color: #931212; }

Save your changes and upload the newly edited file to your folder. Once you have done this, go back to your WordPress dashboard and check out a live preview of your changes.

Pretty cool huh? Ok, so its not ready to be called a masterpiece but at least you get the idea of how to make changes. It would be best to refer to a copy of your theme’s style.css file so you can see what classes and IDs you want to make changes to. But before you actually finish styling your new child theme, let’s get that screenshot uploaded.

With your blog displaying your new theme, simply take a screenshot of it in action. Using an image editor, you are going to want to reduce your image to 600 x 450. The manager will actually display this at 300 x 225 but the larger image is the standard. When you are done, save the image as a .png or .jpeg and upload it to your child theme folder.

Extending the child theme

What you have just done will not make changes to the functions.php file, but you can add one for your child theme if you like. This is important if you would like to utilize any of the hooks that the parent theme has to offer.