Set Up and Use a Child Theme

Our themes look great and work great out of the box, but we understand that sometimes you might need to customize your theme beyond what is possible via the Theme Options. These guidelines will teach you the basics of how to go about customizing your theme.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance.

What is a child theme?

Before we start it’s important that you understand what a child theme is. Read this guide from the WordPress Codex.

Download a sample Storefront child theme to get started

Make a Backup ↑ Back to top

Before customizing a theme, you should always ensure that you have a backup of your site in case anything goes wrong. More info at: Backing Up WordPress Content.

Getting Started ↑ Back to top

To get started, we need to prepare a child theme. That 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 and they can give you your FTP login details, and then download a FTP program to upload your files.

If you create a zip file of your child thme folder you can then simply upload that to your site from the WordPress > Appearance > Themes > Add New section.

Making the child theme ↑ Back to top

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 Theme 
Version: 1.0 
Description: Child theme for Woo. 
Author: Woo
Author URI: http://woocommerce.com 
Template: themedir */

Next we need to change the Template field to point to our installed WooTheme. In this example, we’ll use the Storefront theme, which is installed under wp-content/themes/storefront/. The result will look like this:

/* 
Theme Name: Storefront Child 
Version: 1.0 
Description: Child theme for Storefront. 
Author: Woo
Author URI: http://woocommerce.com 
Template: storefront 
*/  

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

Note: With Storefront you do not need enqueue any of the parent theme style files with PHP from the themes functions.php file or @import these into the child themes style.css file as the main parent Storefront theme does this for you.

With Storefront a child theme only requires a blank functions.php file and a style.css file to get up and running.

Uploading and Activating ↑ Back to top

The next step is to upload this file to a new folder e.g. wp-content/themes/storefront-child/. Once uploaded, we can go to our WP admin panel and activate the child theme:

themes-install

Customizing styles and template files ↑ Back to top

Your child theme is now ready to be modified. Currently it doesn’t hold any customization, so let’s look at a couple of examples on how we can customize the child theme without touching the parent theme. Let’s do a example together where we change the color of the site title. Add this to your /storefront-child/style.css:

.site-branding h1 a {
   color: red; 
}

After saving the file and refreshing our browser, you will now see that the color of the site title has changed!

red-title

Editing template files

But wait, there’s more! You can do the same with the template files (*.php) in the theme folder. For example if we wanted to modify some code in the header, we need to copy header.php from our parent theme folder wp-content/themes/storefront/header.php to our child theme folder wp-content/themes/storefront-child/header.php. Once we have copied it to our child theme, we edit header.php and customize any code we want. The header.php in the child theme will be used instead of the parent theme’s header.php. Neat!

Pluggable Functions ↑ Back to top

NOTE: The functions.php in your child theme should – be empty – and not include anything from the parent themes functions.php. The functions.php in your child theme is loaded before the parent theme’s functions.php. If a function in the parent theme is pluggable, it allows you to copy a function from the parent theme into the child theme’s functions.php and have it replace the one in your parent theme. The only requirement is that the parent theme’s function is pluggable, which basically means it is wrapped in a conditional if statement e.g:

if (!function_exists("parent_function_name")) {
      parent_function_name() {
           ...
      } 
}

If the parent theme function is pluggable, you can copy it to the child theme functions.php and modify the function to your liking.

Template Directory vs Stylesheet Directory ↑ Back to top

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.

get_template_directory();

will reference the parent theme. To make it use the file in the child theme, you need to change use

get_stylesheet_directory();

More info on this from the WP Codex

Child Theme Support ↑ Back to top

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 advise anybody confused with child themes to use the WordPress forums for help.

Sample Child theme ↑ Back to top

Download the sample child theme at the top of this article to get started. Place the child theme in your wp-content/themes/ folder along with your parent theme.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top