Design

Uploading & Setting Up Custom Themes »Child Themes

The WordPress.com Business and eCommerce plans enable you to make many changes to your theme’s appearance using custom CSS and to build upon its default functionality using third-party plugins. If you’d like to go further and make changes to your theme’s underlying code, then you could consider creating a child theme.

What is a Child Theme?
Creating a Child Theme
Creating a Child Theme Manually
Creating Child Theme Using Child Theme Configurator
Making Changes to Your Child Theme
Support for Your Child Theme

What Is a Child Theme?

A child theme is a theme that inherits the functionality and styling of a parent theme.

To use an analogy from Kathryn Presner’s talk on Getting Comfortable with Child Themes: Think of a parent theme as a master recipe for brownies. You could create a child recipe called nutty brownies that inherits all of the ingredients and steps, but with the addition of nuts.

Below you’ll find screenshots of two themes in our repository, Edin and Goran. Goran is a child theme to Edin, you’ll see that Goran inherits much of Edin’s design and has its own additional customisations.

Edin is a parent theme to Goran.
Goran is a child theme of Edin.

↑ Table of Contents ↑

Creating a Child Theme

To use child themes with a WordPress.com site, you’ll need to first install WordPress locally on your computer. After you’ve created your child theme locally, you can then zip it up and upload it to your WordPress.com Business site.

An alternative to manually creating your child theme is to make use of a plugin that will create your child theme for you (for example Child Theme Configurator). Search the plugin repository for “child themes” to browse through your available options.

Please note: You can download a copy of free themes in our collection at the bottom of each WordPress.com showcase page. Look for the download link:

Download free themes

We cannot provide files for premium themes.


↑ Table of Contents ↑

Creating a Child Theme Manually (Business Plan or eCommerce Plan)

For the example below, we’re going to be using the Twenty Seventeen theme.

Step 1.

Search and download your theme file from the WordPress.org repository here. Once downloaded, double-click on a Mac and that will extract the folder. Or if you’re on Windows, right-click and “Extract all.”

WordPress support creating a child theme manually step 1

Step 2.

Create a new folder and give your child theme a name, for example, ‘twentyseventeen-child’.

It is recommended that the name of your child theme directory is appended with ‘-child’. Make sure that there are no spaces in your child theme directory name.

WordPress Support creating a child theme manually step 2

Step 3.

Copy and paste the style.css and functions.php files from your original parent theme (twentyseventeen) into your new child theme (twentyseventeen-child).

WordPress Support creating a child theme manually step 3.1
WordPress Support creating a child theme manually step 3.2

Step 4.

In your new child theme, open up your style.css file using a text editor, such as Notepad, Atom, Sublime Text, or any other text editor of your choice. Empty the file by clicking  command+A > delete on Mac (CTRL+A > delete on Windows).

Afterward, copy and paste the below lines of code:

Please note that the CSS code below may be theme specific.

/*
Theme Name:   Twenty Seventeen Child
Theme URI:        http://example.com/twenty-seventeen-child/
Description:  Twenty Seventeen Theme
Author:           John Doe
Author URI:   http://example.com
Template:         twentyseventeen
Version:          1.0.0
License:          GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twentyseventeen
*/

You need to change the following lines to include the parent folder name in order to show that this particular theme will be its child.

– Theme name
– Description

You should keep the following fields as they are:

– Template 
– Text domain

The other fields are optional but not required. You can read more about what they are for here.

The template line should contain the folder name of your parent theme. Make sure to save this file after the changes have been made.

WordPress Support creating a child theme manually step 4

Step 5.

In your new child theme, open up your functions.php file using the same text editor. Empty the file by clicking  command+A > delete on Mac (CTRL+A > delete on Windows).

Afterward, copy and paste the below code and replace the ‘$parent-style’ value with the name of your theme with a -style added (in this case it’s twentyseventeen-style) .

Make sure to save this file after the changes have been made.

<?php
function my_theme_enqueue_styles() {
    $parent_style = 'twentyseventeen-style'; // This is 'parent-style' for the Twenty Seventeen theme.
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()-&gt;get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
WordPress Support creating a child theme manually step 5

Step 6.

Now we need to zip up the folders.

On Windows:

  1. Locate the file or folder that you want to zip.
  2. Press and hold (or right-click) the file or folder, select (or point to) Send to, and then select Compressed (zipped) folder.

A new zipped folder with the same name is created in the same location. To rename it, press and hold (or right-click) the folder, select Rename, and then type the new name.

On Mac:

  1. Locate the items to zip in the Mac Finder (file system)
  2. Right-click on a file, folder, or files you want to zip.
  3. Select “Compress Items”
  4. Find the newly created .zip archive in the same directory.

Step 7.

If you have a WordPress.com Business or eCommerce plan, you can upload your custom theme by going to My Site → Design → Themes, then use the Upload Theme button. Upload both your parent theme and your child theme and activate your child theme.

To see details on how to upload a custom theme click here.


↑ Table of Contents ↑

Creating Child Theme Using Child Theme Configurator (Business Plan or eCommerce Plan)

Download and install the plugin here: https://wordpress.org/plugins/child-theme-configurator/. To see more on installing plugins click here.

Please note that Child Theme Configurator is a third party plugin and support for this plugin can be found and submitted here: https://wordpress.org/support/plugin/child-theme-configurator/

Once installed go to Tools > Child themes

Step 1 – Select a parent theme.

Step 2 – Hit Analyze. This checks that the parent themes are using WordPress standard practice and that there’ll be no surprises with your theme.

Creating a child theme using Child Theme Configurator

Step 3 – This is the name of the directory/folder that is housing the theme in your site.

Step 4 – Select where you’re saving your styles. It’s recommended that you select the default primary stylesheet style.css option

Creating a child theme using Child Theme Configurator

Step 5 – Select the parent theme stylesheet handling option, this determines how your child theme will use the styles of your parent theme. It’s recommended that you use the WordPress style queue option.

Step 6 – Customize the child theme name, description, author and version. This where you enter in your themes credentials that will appear in your style sheet CSS.

Creating a child theme using Child Theme Configurator

Step 7 – Copy parent theme menus, widgets and customizer settings. If you’ve been setting up your parent theme in the Customizer, this option will copy over those settings into your new child theme.

Creating a child theme using Child Theme Configurator

↑ Table of Contents ↑

Making Changes to Your Child Theme

We always recommend making changes to your theme away from your live site – please see the following methods below.


↑ Table of Contents ↑

Support for Your Child Theme

Knowledge of HTML and PHP is needed in order to make changes via a child theme. The WordPress.com support team will be happy to help point you in the right direction or offer alternatives to a child theme (if they exist) but more advanced HTML and PHP falls outside the scope of support. If you require more advanced help, you could consider hiring a web designer (we can recommend Upwork) or contacting your theme’s author directly.

Not quite what you're looking for?

Get Help