Customizing a Child Theme

Overview

Before we start it’s important that you understand what a child theme is. Read this guide from the WordPress Codex and also read a great explanation on the topic in this tutorial.

For a quick overview, have a look at this screencast:

Getting Started

To get started we need to prepare a child theme which means you’ll need FTP access to your host, so you can upload the new child theme. If you don’t have this, you should talk to your host so they can give you your FTP login details, and download a FTP program to upload your files.

Making the child theme

First we need to create a new stylesheet for our child theme. Create a new file called style.css and put this code in it:

/*Theme Name: Child WooThemeVersion: 1.0Description: Child theme for WooThemes.Author: WooThemesAuthor URI: http://www.woothemes.comTemplate: themedir*/ @import url("../themedir/style.css");

Next we need to change the Template field to point to our installed WooTheme. In this example we’ll use Object theme, which is installed under “wp-content/themes/object/“. We also need to change the imported style.css directory to point to Object. The result will look like this:

/*Theme Name: Object ChildVersion: 1.0Description: Child theme for Object.Author: WooThemesAuthor URI: http://www.woothemes.comTemplate: object*/ @import url("../object/style.css");

We’ve now got all we need to create a child theme. The next step is to upload this file to a new folder e.g. “wp-content/themes/object-child/”. Once uploaded, we can go to our WP admin panel and activate the child theme:

Activate the new child theme

Your child theme is now ready to be modified. Currently it doesn’t hold any customization, so lets look at a couple of examples on how we can customize the childe theme without touching the parent theme.

Example: Edit stylesheet

Lets try the same example as we did before, changing the color of the navigation link in the stylesheet. Simply find the styles like we did in above and paste them into our /object-child/style.css file:

/*Theme Name: Object ChildVersion: 1.0Description: Child theme for Object.Author: WooThemesAuthor URI: http://www.woothemes.comTemplate: object*/ @import url("../object/style.css"); .nav a{color:#ff0000;}.nav a:hover{color:#000000;}

After saving the file, and refreshing our browser you will now see that the link colors should have changed, and if you hover over the style.css link in FireBug, you will see that the path points to the object-child directory.

Styles from child theme applied to parent theme

Example: Editing template files

But wait, there is more! You can do the same with the template files (*.php) in the theme folder. Lets try to remove the top right description. This is located in header.php, so we need to copy header.php from our parent theme folder “wp-content/themes/object/header.php” to our child theme folder “wp-content/themes/object-child/header.php“.

Once we have copied it to our child theme, we edit header.php and find the description code on line 89 and remove it:

        <p id="tagline"><?php bloginfo('description'); ?></p>

Then we upload our changes to our host and refresh our page to check that the changes have been applied

Removing description from header.php in child theme

Using functions in child theme

Although you can override template files in your child theme, functions.php will be loaded in both the parent theme and child theme (with the child functions loaded _before_ the parent’s) – so you can’t directly replace the functions already loaded in parent theme functions.php without some extra steps. For an example of how to override the parent functions, see this tutorial for adding your own theme options to a child theme.

TEMPLATEPATH vs. STYLESHEETPATH

WordPress has a few things that it handles differently in child themes. If you have a template file in your child theme, you have to modify how WordPress includes files. TEMPLATEPATH or bloginfo('template_directory') will reference the parent theme. To make it use the file in the child theme, you need to change use STYLESHEETPATH. The same goes for use of template_directory parameter in bloginfo() function, which needs to be changed to stylesheet_directory.

More info on this from the WP Codex

Alternative styles

If you are using an alternative style on your theme, then this will be loaded after the child themes style.css and overwrite your styles. There are two good ways to fix this:

1. Add body in front of your CSS tags so they override the ones in the alt stylesheet e.g. body #header { font-size:14px; }
2. You can unload the function from being outputted in the header by adding a functions.php file to your child theme (if you haven’t already), and adding remove_action('wp_head', 'woothemes_wp_head');.

Child Theme Support

Although we do offer basic child theme support that can easily be answered, it still falls under theme customization, so please refer to our support policy to see the extent of support we give.

We highly advice anybody confused with child themes to use the WordPress forums for help.