How to Create a Simple Child Theme for your WordPress Site

First of all, let me explain why it’s a good practice to use a child theme.

Assuming you ever get into your code editor, even if only to install your analytics code, you’ll already have sufficient justification to keep reading. Any modifications you make to any of your template files may be lost when you update to the next version of WordPress or of your theme.

The only theoretical downside to using a child theme that I’m aware of is a slight difference in performance, as the WP framework has to look in two different locations for template files. I’ve found the difference to be negligible on small to medium sized sites, however.

A child theme is a theme you create, but not from scratch. It’s fashioned after your main theme, but will be home to any changes you might make. You may select Twenty Eleven as your parent theme, and then create a child called My Twenty Eleven Clone. So let’s talk about how you go about it.

Creating the Child Theme

The first thing to do is to create the folder that will house the child. This folder will be located in the wp-content/themes folder.

You will then create the one required file for a child theme – a style.css file, such as:

 

[code]

/*

Theme Name:                      My Twenty Eleven Clone

Theme URI:                           http: //yoursite.com

Description:                            My First Child theme

Author:                                    John Doe

Author URI:                            http: //yoursite.com

Template:                               twentyeleven

Version:                                   1.0

*/

[/code]

 

 

A caution: the template entry must be the exact file name of the parent theme (case-sensitive).

Once that’s done, your child should appear in your WP backend, in Available Themes.  You can now activate the theme, but don’t have a heart attack when you see that your display is totally out of kilter… you haven’t given it any CSS in the style sheet yet. We can fix that, by importing the Twenty Eleven style sheet. Let’s change the background color while we’re at it. We’ll just add the following to the style.css:


[code]

// This @import line loads the stylesheet from the parent theme
@import url("../twentyeleven/style.css");
// Now we can override styles from the parent theme...
body {
     background: # A9D0D6;
}

 

[/code]

 

Now your site should display a little better, so your heart can stop pounding.  What happens is that the WordPress framework will first look in the child theme for a template file, and if it doesn’t find one, it’ll move along to the parent theme to find it. Similarly, you can make your child theme its own author.php, category.php and functions.php files, among others, which will override those in the parent.

Customizing the Child Theme

Now that you have a functional theme, you can begin customization. and the sky is the limit. Well, the sky and your coding ability. Your CSS should look something like this now:

 

[code]

/*

Theme Name:                      My Twenty Eleven Clone

Theme URI:                           http: //yoursite.com

Description:                            My First Child theme

Author:                                    John Doe

Author URI:                            http: //yoursite.com

Template:                               twentyeleven

Version:                                   1.0

 

*/

@import url("../twentyeleven/style.css");
body, input {
     line-height: 1.75em;
     background: #A9D0D6;
     font-size: 11.5pt;
     color: #5A6466;
     font-family: Kreon, serif;
}

 

[/code]
Of course, you can go on to modify all other CSS elements for your menu items, sidebar, footer, etc., as you desire.

After the index.php and style.css files, the next most important file for your site is the functions.php file. You can use the functions.php file as it stands in the parent theme, or you can build a custom file for different functionality. Remember, though… your style.css file overwrites the parent’s file, but if you create a custom functions.php file, it will load before the parent’s file. So if you’re going to write any functions, you’ll need to write them correctly. The main framework will check function names to see if there is already a function of the same name. If so, your child’s file will take precedence.

Writing a thorough functions.php file isn’t a simple task, so if you don’t feel very comfortable coding php, you might want to start out with the parent’s file running the show. The same is true of the template files.

Building your first child theme is fun and educational, and you’ll finish, knowing more about how your site functions. You’ll also be able to update your WP framework and parent theme without holding your breath in fear of losing all your precious changes.

Leave a Reply

Your email address will not be published. Required fields are marked *