1. Computing

Make Your First WordPress Child Theme in Five Minutes

Store Your Tweaks to Your Favorite Theme

By

If you want to tweak your WordPress theme, with changes above and beyond the theme's admin screens, you need to learn about WordPress child themes. You don't have to be a PHP guru to make a WordPress child theme. With a few well-chosen lines of CSS, your child theme can have a completely different look, while still leveraging the power of the parent theme. And you can get this in about five minutes.

Version: WordPress 3.x

Problem: CSS Tweak Needed

Let's say you love the Twenty Twelve theme that ships with WordPress these days. You love everything about it, except there's not enough space between the list items in the sidebar. Whenever a post title is more than one line, you can't easily see where that title stops and the next title begins. You want more space between titles.

You're not going to find an "increase spacing between list items in the sidebar" setting anywhere. This is a job for CSS.

However, you also don't fancy building an entire theme from scratch for the sole purpose of making your post listing more readable.

Enter the child theme.

Solution: All You Need Is style.css

With a child theme, we only need a single file: style.css. With this file, we can insert not only our CSS tweaks, but even the basic theme configuration.

Spot Check: Can You Edit Files on Your Server or Make a Zipfile?

Spot check: to make your own child theme, it's best if you can add subdirectories and files to your WordPress webhost. (For instance, you can't add a custom theme if you have a free Wordpress.com blog. You'd need certain upgrades.)

If have edited configuration files before, you should be able to make a child theme with no trouble.

However, even if you can't use FTP or ssh into your web host, there's another way to load your child theme. You can create the theme directory and files on your own computer, make the directory into a ZIP file, and then upload it using the WordPress admin screens.

On the sidebar, do Themes -> Add New. Then, in the horizontal row of links under Install Themes, click Upload.

Step 1: Make a Subfolder For Your Theme

First, make a subfolder (subdirectory) for your theme. We'll need an original name. In an act of complete disregard for future namespace conflicts, let's call this "Bill Powell's Theme". (In honor of William Powell, the famous actor. Obviously.)

Browse to wp-content/themes/.

(If you've set up a WordPress network, don't worry. The basic folder structure is the same as a normal WordPress site. You still browse to wp-content/themes/.)

You should see several subfolders here, each for a different theme. Specifically, you should see twentytwelve/ (or whichever theme you want to use for a parent theme).

Within wp-content/themes, make a subfolder for your child theme. We'll name it billpowell_th.

Step 2: Make the style.css File

Within the billpowell_th subfolder, make a new file: style.css.

This file needs only three parts.

First, the theme header:

/*
Theme Name: Bill Powell's Theme
Template: twentytwelve
*/

These are the only two required elements. The WordPress Codex explains other possible header lines, but these are the essentials.

Notice that Template must contain the directory, not the human-readable name, of the parent theme.

Next, a single, crucial line:

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

This directive pulls in the parent theme's styling. Without this line, your child theme starts with no CSS. When you fire up the child theme, the site will look broken. But with this line, your child theme will look just like the parent theme, except for any tweaks you add.

(Note: If a parent theme has an exceedingly complex CSS structure, a single @import may not be enough. But try this first.)

Finally, we come to your CSS tweaks. With the rest of the file, you can add custom CSS that will override the parent theme.

Here's how to add some spacing to those list items:

.widget li { line-height: 1.5em; margin-bottom: 1em; }

A Complete Child Theme in Less Than Ten Lines

Let's take a look at our complete child theme:

/*
Theme Name: Bill Powell's Theme
Template: twentytwelve
*/

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

.widget li { line-height: 1.5em; margin-bottom: 1em; }

Aren't you glad you didn't start a new theme from scratch?

Enable As Usual

With your directory and style.css in place, you should be able to enable the theme as you would any other. If you're on a WordPress network, remember you'll need to activate the theme on the network, then enable it on your site.

If you don't see your theme in the main listing, check for a Broken link at the top. Your theme may be on this list of broken themes. For instance, you have to choose a valid parent theme, or your theme will be broken.

The Power of Child Themes

CSS tweaks are splendid, but they're only the beginning. You can override almost any template file of the parent theme. Simply make a file of the same name in your child theme.

Want a new sidebar? Copy twentytwelve/sidebar.php into billpowell_th/sidebar.php, and tweak your new file.

Look through the parent theme to see which other files you can override.

The functions.php file is a special case. If you add your own functions.php, it doesn't override the parent functions.php, but instead adds to it. This is a great way to add a few code snippets without losing the parent theme's functionality.

For instance, with a few bits of code, you can customize a private WordPress blog.

  1. About.com
  2. Computing
  3. Content Management Systems
  4. WordPress
  5. WordPress Theming
  6. Make Your First WordPress Child Theme in Five Minutes

©2014 About.com. All rights reserved.