Create a Child Theme

A child theme is a theme that inherits the functionality and styling of a parent theme, with additional customizations. This guide will explain how to develop a child theme, which is an advanced process that requires knowledge of HTML and PHP.

This feature is available on sites with the WordPress.com Creator or Entrepreneur plan. If your site has one of our legacy plans, it is available on the Pro plan.

In this guide

1. About Child Themes
2. Create a Child Theme
   1. Create a Child Theme Manually
   2. Create a Child Theme Using the Create Block Theme Plugin
   3. Create a Child Theme Using Child Theme Configurator
3. Create a “Grandchild” Theme
4. Make Changes to Your Child Theme
5. Support for Your Child Theme

About Child Themes

You can make many changes to your theme’s appearance using Styles, custom CSS, and 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.

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 are screenshots of two themes in our repository, Bradford and Seedlet. Bradford is a child theme of Seedlet. You’ll see that Bradford inherits much of Seedlets’s design and has its own additional customizations:

Create a Child Theme

To use child themes with a WordPress.com site, you must first install WordPress locally on your computer. After you’ve created your child theme locally, you can zip it up and upload it to your WordPress.com plugin-enabled site.

An alternative to manually creating your child theme is to use a plugin that will create your child theme for you (for example, Child Theme Configurator or Create Block Theme, both of which are explained later in this guide). Search the plugin repository for “child themes” for more 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:

Create a Child Theme Manually

For the example below, we will be using the Twenty Seventeen theme. To manually create a child theme, follow these steps:

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

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.

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

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 or 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 URL:        http://example.com/twenty-seventeen-child/
Description:  Twenty Seventeen Theme
Author:           John Doe
Author URL:   http://example.com
Template:         twentyseventeen
Version:          1.0.0
License:          GNU General Public License v2 or later
License URL:  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 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 in the WordPress theme handbook.

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

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 or CTRL+A > delete on Windows.

Afterward, copy and paste the code below 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()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

 

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.

7. You can now upload the .zip file of your custom theme to your WordPress site by going to Appearance → Themes and clicking the “Upload Theme” button. Upload both your parent theme and your child theme and activate your child theme.

Create a Child Theme Using Child Theme Configurator

Another plugin, called “Child Theme Configurator”, can simplify the process of creating a child theme. The following steps will walk you through the process:

1. Install the Child Theme Configurator plugin.
2. Once installed, go to Tools → Child themes. Select a parent theme.
3. Click the “Analyze” button. This checks that the parent themes are using WordPress standard practice and that there’ll be no surprises with your theme.

4. Give a name to the directory/folder that is housing the theme on your site.
5. Select where you’re saving your styles. It’s recommended that you select the default primary stylesheet style.css option:

6. 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.
7. Customize the child theme name, description, author, and version. This is where you enter your theme’s credentials that will appear in your style sheet CSS.

8. 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.

9. Click the “Create New Child Theme” button.

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/

Create a Child Theme Using the Create Block Theme Plugin

If you’re using a block editor theme, you can use the Create Block Theme plugin to create a new child theme with the currently active theme as the parent theme. This plugin makes it easier than ever to create a child theme right from within your site’s dashboard. Visit the Create Block Theme plugin to get started.

Create a “Grandchild” Theme

It’s not possible to create a child theme of a theme which is already the child of another theme. For instance, Morden is a child theme of Varia, so we can’t create a child theme of Morden itself.

However, it is possible to create a modified version of the child theme, which will still receive the updates made to its parent theme the same way as the original child theme.

The steps for doing this are outlined below, using Morden and Varia as our example themes:

1. Visit the theme page for the child theme you use as the basis for your modified child theme.
   • For Morden, this would be https://wordpress.com/theme/morden.
2. Scroll to the bottom of the theme page and click the Download button next to “This theme is available for download to be used on your WordPress self-hosted installation.”
3. Unzip the downloaded theme file and locate the style.css file.
4. Near the top of style.css, you’ll find the Template name as shown in the image below.
   • For Morden, this will be varia-wpcom.

5. This template name must match the slug of the parent theme. The template name will have -wpcom as a suffix, so remove this, then save and re-zip the theme files. If you don’t make this change, the website won’t be able to “see” the parent theme and the child won’t function.
   • In this case, the theme is looking for varia-wpcom, but the slug for Varia is actually just varia.
6. Rename the theme .zip folder to something distinctive which you’ll be able to identify as your “child of a child” theme.
   • For a modified version of Morden, you might use morden-child or morden-edit.
7. Upload the theme to your website and activate it.

It’s important to note that the modified “grandchild” theme will still have the same name as the original child theme. For this reason, we suggest deleting the original theme from your website to prevent any confusion with the new modified child theme.

Make Changes to Your Child Theme

We always recommend testing changes to your theme away from your live site. You can create a staging site for this purpose.

Support for Your 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). More advanced HTML and PHP fall outside the scope of our support. If you require more advanced help, you could consider hiring a web designer or contacting your theme’s author directly.

Working With Developers