How to Create a WordPress Child Theme: A Step-by-Step Guide

A WordPress child theme gives you a safe way to customize your WordPress theme’s code. If you want to make direct edits to your theme’s CSS, HTML, or PHP, you should absolutely use a WordPress child theme. Otherwise, you might lose your changes the next time you update your theme.

In this detailed WordPress child theme tutorial, you’ll learn everything that you need to know about WordPress child themes, including how to create one. This post will cover:

• What is a parent theme in WordPress?
• What is a child theme in WordPress?
• Benefits of Creating a Child Theme
• How to Create a Child Theme in WordPress
• Three Other Methods to Create a Child Theme

Let's get started.

What is a parent theme in WordPress?

A parent theme is a complete WordPress theme. Meaning, it includes the WordPress template files and assets required for the theme to work.

The index.php and the style.css files (the main template and style files, respectively) are the only required template files. However, most themes will also include PHP files, localization files, graphics, JavaScript, and/or text files.

All themes are considered parent themes — except for child themes. Let’s take a closer look at what a child theme is and the benefits it offers WordPress site owners.

What is a child theme in WordPress?

A child theme is a subtheme that inherits the look, feel, and functions of the parent theme. You install it just like any other theme, but it relies on the parent theme to control its functionality.

When you make modifications to the child theme, they are kept separate from the parent theme’s files. What’s more, any modifications that you make to the child theme will take precedence over the behavior in the parent theme.

It’s important to note that a child theme will not function by itself. It must be installed alongside the parent theme.

When you install a child theme, you’ll be able to see that it’s connected to the parent theme in the WordPress dashboard.

Benefits of Creating a Child Theme

Creating a child theme allows you to modify the parent theme without losing your customizations.

Without a child theme, you’d have to modify the parent theme’s files directly whenever you wanted to make a change. This means that whenever you update the parent theme, all of your changes would be overwritten.

As a result, you’d be faced with an impossible choice. You can ignore all updates to your theme, which can cause issues with compatibility and security. Or, you can update and lose your customizations — along with the time you invested in creating them.

The other two benefits of creating and customizing a child theme are related to the first.

• Keeping these modifications in a separate folder from your theme makes them easy to replicate or move from one site to the next.
• You can start learning about and dabbling in theme development in a low-risk environment. If you begin customizing your child theme and something goes wrong or you aren’t satisfied, you can just disable the child theme. This will restore the parent theme and your website as it was.

Now that you understand the ideal use cases for creating and customizing a child theme, let’s walk through the process below.

How to Create a Child Theme in WordPress

Creating a child theme in WordPress only takes a few steps. Below we’ll cover each one in depth so you can follow along. This demo will use the default WordPress theme Twenty Twenty-One as an example, but the basic steps will apply to any WordPress theme.

In general, you only need two files to create a basic child theme:

1. style.css
2. functions.php

In this section, we’ll show you how to create a child theme in WordPress manually. However, if you want to save some time, there are also some tools/strategies to automate the process. We’ll share those in the next section.

Even if you do use one of those other methods, reading over the manual method is still helpful because it will help you better understand how child themes work.

Step 1: Create a child theme folder.

First, you’ll want to create a folder where you can place all the template files and assets of your child theme.

For now, you can create this folder on your local computer. Later in this tutorial, you’ll learn how to install the child theme on your site by adding the files to a Zip folder and installing them via your WordPress dashboard.

Name this folder using the parent theme’s folder name and add “-child” to the end. So if you were creating a child theme of Twenty Twenty-One, you’d name the folder “twentytwentyone-child.”

Step 2: Create a stylesheet for your child theme.

Next, you’ll need to create the “style.css” file inside of your child theme folder, which will contain all of the CSS rules and declarations for your child theme.

This file is also what you use to tell WordPress which parent theme to use, so it’s quite important.

To create the file, you can use any basic text editor (e.g., Notepad) or your favorite code editor (e.g., Sublime Text).

Most importantly, you’ll have to add a required header comment at the very top of the file in order for the stylesheet to actually work.

This comment contains basic info about the child theme, including that it is a child theme with a particular parent theme.

You really only need to include two elements:

1. Theme Name. This is the name of your child theme. It could be the name of your site or just something like “[theme name] Child.” For our example, we’ll make it “HubSpot Twenty Twenty-One.”
2. Template. This is the name of the directory that contains your parent theme. It’s a big part of what links the child theme with the parent theme. For the Twenty Twenty-One theme, this is “twentytwentyone.” For other themes, it will typically be the theme name, but you might want to double-check. You can do this by looking in the wp-content/themes folder or downloading your theme and opening the Zip file.

Again, the two elements above are 100% required for your child theme to function.

However, you’re free to include other information, including a description, author name, version, and tags. These will affect how your child theme displays in the Appearance > Themes dashboard, and they can also be helpful if you’re going to publish or sell your child theme.

We recommend including a version number, as well, as this will make it easier to enqueue your theme's stylesheets.

Here’s an example of a complete header comment for a Twenty Twenty-One child theme:

 

/*
Theme Name: HubSpot Twenty Twenty-One
Theme URI: https://example.com/twenty-twenty-one-child/
Description: Twenty Twenty-One Child Theme
Author: Anna Fitzgerald
Author URI: https://example.com
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-column, responsive-layout
Text Domain: twentytwentyonechild
*/ 

Notice the slashes and asterisks. These signify that this code will be “commented out” in CSS, so WordPress doesn’t try to execute it.

You can add custom CSS later when you’re ready to begin customizing your child theme.

For now, click Save so this stylesheet will be saved in your child theme’s directory.

Step 3: Enqueue the parent and child themes’ stylesheets.

Now it’s time to enqueue your parent and child themes’ stylesheets. This will ensure two things:

1. That the child theme inherits its parent theme’s styling. So, when you activate your child theme, you’re not just looking at a bunch of unstyled text.
2. That the child theme’s stylesheet is loaded before the parent theme’s — without overriding it. That way, once you add custom CSS and otherwise modify your child theme, these modifications will augment or replace certain styles and functions of the parent theme.

Unfortunately, this step can be a little trickier because the code that you need to use will depend in part on how your parent theme is coded.

For most themes, you should be able to use this code:

 

<?php
add_action( 'wp_enqueue_scripts', 'hubspot_blog_theme_enqueue_styles' );
function hubspot_blog_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

However, if this code isn’t working, your theme might be coded differently, or it might not be following WordPress code conventions. In that case, you can consult the WordPress Codex or try one of the other methods that we’ll share later in this post.

Step 4: Install and activate your child theme.

Once you’ve created the two needed files — “style.css” and “functions.php” — you have everything that you need for a basic child theme.

To package the child theme into a file that you can install via your WordPress dashboard, you need to compress the child theme folder as a Zip file.

On both Windows and macOS, you should be able to do this by right-clicking on the folder on your local computer and selecting the option to compress as a Zip file.

Here’s what that looks like on macOS.

Now, you can install this Zip file just like you would any other WordPress theme.

To upload the file, go to your WordPress dashboard and click on Appearance > Themes > Upload Theme. Then, use the file picker to select the Zip file that you just created and click Install Now.

Once you upload it, you should see a message from WordPress telling you that it requires a parent theme and confirming that the parent theme is installed.

If everything looks good, click the Activate button.

Good news: Your child theme is now live! You should see the correct details when you open the theme in your dashboard.

Note: To control the image thumbnail that appears for your theme, you can upload an image named screenshot.jpg or screenshot.png to the child theme’s folder. This is totally optional; it just makes your dashboard look nicer.

However, the only problem right now is that your child theme looks exactly like your parent theme. To fix that, it’s time to customize.

Step 5: Customize your child theme.

There are three main ways that you can use your child theme to customize your parent theme:

1. Custom CSS.
2. Code snippets in functions.php.
3. Custom template files.

Custom CSS

To customize your child theme, you’ll likely start by adding CSS to the style.css file in your child theme’s directory. It’s one of the easiest ways to make changes to your theme.

Whether you want to customize the color scheme, padding, typography, or other fundamental design elements of the parent theme, simply add code to your child theme’s stylesheet below the header comment. This code will override the code in your parent theme’s stylesheet.

functions.php

To modify the functionality of the parent theme, on the other hand, you need to add functions to the functions.php file in your child theme’s directory.

For example, if you want to allow writers and other users to format their posts in different ways, then you can use the add_theme_support() function.

To allow them to format posts as notes, links, a gallery of images, quotes, a single image, or video, then you’d add the following to your functions.php file in your child theme directory:

 

add_theme_support( 'post-formats', array ( 'aside', 'gallery', 'quote', 'image', 'video' ) );

You can put as many or as few functions as you want between the opening and closing PHP tags of your file.

Custom Template File

Finally, you can also use your child theme to directly modify your parent theme’s templates, such as the template for individual blog posts or for your site’s header.

However, this will require a solid understanding of PHP and HTML, as you’ll be working directly with these languages. You’ll also want to understand the WordPress template hierarchy.

If you don’t feel comfortable with those technologies, you might want to skip this or use a visual builder such as Elementor Pro or Divi.

To edit a template file, you first need to copy that template file from the parent theme’s folder to your child theme’s folder.

For example, to edit the single post template, you would copy the single.php file from your parent theme to your child theme.

Then, you can make direct code edits to the single.php file in your child theme’s directory. When a template file exists in both the parent theme and child theme folders, WordPress will use the one from the child theme.

However, because you’ve added the template file to the child theme, it won’t be overwritten when you update your parent theme.

And that's it! Your child theme is good to go. Test your site in a WordPress staging environment, then push your changes live.

Other Options to Create a WordPress Child Theme

While the instructions above show you how to create a WordPress child theme manually, you might not need to go the manual route.

Here are three other options to start working with a child theme for your site.

1. See if your theme developer offers a pre-made child theme.

Because using a child theme is essential if you want to make modifications to your theme, many theme developers provide a pre-made child theme that you can use alongside the parent theme.

Typically, you should be able to find a link to this child theme in your theme developer’s support documentation. Or, you can reach out to your theme developer for help.

For example, the popular Astra theme offers its own WordPress child theme generator tool that will create the necessary files for you.

The same is true of most other popular themes.

2. Use a WordPress child theme plugin.

If your theme developer doesn’t offer a pre-built child theme (and you don’t want to use the manual method), you can also use a WordPress child theme plugin to generate your child theme.

Here are some of the most popular free child theme plugins.

• Child Theme Wizard
• WP Child Theme Generator
• WPS Child Theme Generator
• Child Theme Creator by Orbisius

For example, with the free Child Theme Wizard plugin, you can go to Tools → Child Theme Wizard to easily set up a child theme with just a few clicks.

3. Use a browser-based WordPress child theme generator.

In addition to plugins, you can also use a cloud-based WordPress child theme generator that you can access via your browser.

The free Child Theme Generator site is one of the most popular options. All you need to do is enter some basic information, and the site will let you download the two key files for your child theme.

If your parent theme is listed at WordPress.org, the site can also try to pre-fill the information for you.

WordPress Child Theme Not Working

Is your child theme not working? Here are some things to check for.

1. Double-check your functions.php file.

Make sure you’ve enqueued your child theme’s stylesheet in your functions.php file. If you haven’t enqueued it, your child theme won’t load.

Your site will stay on the parent theme, so it’ll look all right. The problem is that the changes you make to the child theme won’t appear on the front end. Refer to step 3 above to add the enqueueing code to your PHP file.

2. Ensure you named the sheet “style.css.”

Check to make sure that you’ve named your CSS sheet “style.css,” not “stylesheet.css.” Since “style.css” is the WordPress standard naming convention, using that file name will enable your functions.php file to automatically know that that’s your stylesheet. If you name your stylesheet anything else, the functions.php file won’t be able to retrieve it and render it to the end user.

3. Make sure you used the correct Template name in style.css.

If you don’t enter the proper Template name in the style.css file, WordPress won’t know which theme is the parent.

Again, the Template name should be the name of the folder that contains your parent theme.

4. Clear your cache.

Try clearing your WordPress cache — your WordPress server may be showing you an older version of your site.

If you’ve installed a cache plugin to improve your website’s speed, you also might want to deactivate it while you’re working on your child theme.

In addition to clearing the WordPress cache, you should also clear your browser cache for the same reason. Alternatively, open up your website in an incognito window to look at your published changes.

5. Add !important to your CSS code.

If the parent theme is still overwriting your child theme’s CSS code, add !important to the elements that you changed. This will forcibly override whatever is written on the parent theme’s CSS sheet. You’d add !important right before the semicolon, like so:

 p { background-color: gray !important; }

The !important rule can be used for IDs, CSS classes, and standard HTML elements such as paragraphs, tables, headings, and more.

To learn more about this property, check out How to Use the !important Property in CSS.

6. Contact your theme’s support or check the theme forum.

If you’ve taken all of these steps and the CSS is still not loading, it’s time to reach out to your theme’s support team or check the theme’s forum on WordPress.org.

While this should be your last resort, it has the benefit of giving you answers specific to your theme.

Your WordPress theme’s developer may have used custom code or implemented a different naming system for the theme files.

Create your WordPress child theme.

Installing a WordPress theme is a great first step in creating a WordPress website. To customize it, you can use the built-in Gutenberg editor or your theme builder (if it comes with one). But to go even further and customize not only its design but its functionality, you’ll want to create a child theme.

Editor’s note: This post was originally published in October 2020 and has been updated for comprehensiveness.