How (and When and Why) to Set Up a Child Theme in WordPress

If you aren’t quite up to creating your own WordPress theme from scratch, but you know some CSS, you can still customize a WordPress theme. The secret is using a child theme.

Besides knowing a bit of CSS to customize your theme, you also need to know how to create a folder and add a file to it on your server. You can do this with FTP, or you can sign in to your server and use the control panel to do it.

Pick a Theme

What kind of theme do you want? You might be looking for a responsive design that will work on any device, you might want a certain number of columns or a certain layout. It’s often easy to find something that’s almost what you want. Maybe you don’t like the colors or want different fonts, but it comes close to what you want. That kind of theme is a perfect candidate to customize with a child theme.

Get your almost-perfect theme installed in WordPress and make it the active theme. Now you’re ready to start working on the child theme.

Create up the Child Theme Folder

For the examples, I’m going to assume you picked the WordPress theme twentyeleven. Everything I say about twentyeleven should be changed to reflect the name of the theme you actually use instead.

In your themes directory, create a new folder. If the theme you’re using is twentyeleven, the folder for the child theme would be twentyeleven-child. That’s the theme name, a hyphen, and the word child. Here’s an example of how it might look.

Add the new Style Rules

The only file that has to be placed in the new child theme folder is a style.css file. Any changes you make to the CSS for the theme will be saved in the style.css file in the child theme folder and will overrule the CSS in the parent theme once you’ve set it all up.

The style.css document you put in the child theme folder must start with specific information. Of course, you change it to match your particular names.

/*
 Theme Name:   Twenty Eleven Child
 Description:  Twenty Eleven Child Theme
 Author:       Jane Doe
 Author URI:   http://example.com
 Template:     twentyeleven
*/

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

/* =Theme customization starts here------------ */

You don’t have to have all that. The only required lines are the Theme Name, the Template, and the ‘@import url’ line. The @import line brings in all the style rules from the parent theme.

Under the line where it says “Theme customization starts here,” put any new style rules you need. The rules you’ll need are things you want to be different from the way they are in the parent theme.

Activate Your Child Theme

Even before you add any CSS rules to the child theme stylesheet, you can activate the theme. Log in to your WordPress site’s dashboard. Go to Administration Panels > Appearance > Themes. You will see your child theme listed there. Click Activate.

When you look at your blog in the browser, it will look exactly like the parent theme, but as you add new rules to the child theme style.css file, you will see your customizations taking shape.

Find the Selectors and Write New Styles

If you see something you want to customize, you need to look for it in the style.css file for the parent theme. Once you’ve found the rule in the parent stylesheet, you know what selectors to use to make changes in the child stylesheet.

For example, on one of my blogs, I didn’t like the way the h3 headings in the parent theme looked. I found the rule for the the h3 headings. In my parent theme, it looked like this:

.entry-content h3,
.comment-content h3 {
	font-size: 10px;
	letter-spacing: 0.1em;
	line-height: 2.6em;
	text-transform: uppercase;
}

I didn’t like the size, or the line height, and I didn’t like the uppercase. To overrule that, I used the same selectors, but I put a new rule for those selectors in the style.css file in the child theme folder.

.entry-content h3,
.comment-content h3 {
	font-size: 16px;
	font-weight:bold;
	line-height: 1.6em;
	text-transform: none;
}

I got bigger, bolder, headings that weren’t all uppercase! Just what I wanted.

More Advanced Customizations

Other parts of your theme can be customized as well. You might want to add something to the header.php file or the functions.php file. This can be done by adding the changed files to the child theme folder. If the parent theme is updated, none of your changes in the child theme folder will be lost. The WordPress Codex has more information to help you to move to the advanced level.

Note that a child theme can only be used when a blog has WordPress installed on its own domain. Child themes won’t work for themes hosted on wordpress.com.

GoDaddy Managed WordPress is built from the ground up for maximum performance, security and ease of use. Click here to experience the difference.