How to Create a Child Theme in WordPress?

In this article, you’ll learn everything there is to know about child themes in WordPress. By the end of this article, you’ll be equipped with the knowledge to work with child themes effectively. The article covers the following topics:

What is a Parent Theme?
What is a Child Theme?
When Do You Need a Child Theme?
When Do You Not Need a Child Theme?
How to Create a Child Theme?
How to Install a Child Theme?
How to Customize a Child Theme?
Other Methods to Create a Child Theme in WordPress
What to Do When the WordPress Child Theme Doesn’t Work?

To understand what child themes are, let’s start by briefly explaining what a parent theme is.

What is a Parent Theme?

A parent theme is a complete WordPress theme that contains all the necessary files required for the theme to function. (Refer to WordPress Documentation)

What is a Child Theme?

A child theme is like a “sub-theme” that inherits functionality and appearance from the parent theme. It works like any other theme but requires the parent theme to function. (Refer to WordPress Documentation)

When Do You Need a Child Theme?

Creating a child theme allows you to make changes to the parent theme without losing these modifications through an update.

Without a child theme, you would have to make changes directly to the parent theme. After each theme update, your changes could be overwritten. Additionally, a parent theme, especially for beginners, can seem very complicated.

Tip: Check out my post on the functions.php file to understand this better.

The advantages of a child theme are clear:

Changes are separated clearly from the parent theme.
Changes remain intact even after updates.
You can learn WordPress theme development in a safer environment without breaking anything.

When Do You Not Need a Child Theme?

There are situations where you don’t need a child theme. The reasons are usually one of the following:

You want to add theme-independent custom functions.
You only want to make minor style changes to your theme.

If you want to add custom functions that are independent of your theme, you can either create your own plugin or add custom code using a plugin like Code Snippets.

If you want to make minor style changes to a theme, you can easily do that through plugins or the WordPress Customizer.

How to Create a Child Theme?

Creating a child theme is quite simple. It doesn’t matter which theme you are using; you can follow these steps with any WordPress theme.

For a functional child theme, you only need 2 files initially:

functions.php
style.css

Let’s go through the process of creating a child theme. You can automate the process with various tools (I’ll show you later how exactly), but for now, I recommend going through the manual steps to understand how a child theme works.

Step 1: Create the Folder for Your Child Theme

First, you need to create a folder for your child theme, where all the essential files will be stored.

For now, it’s okay to keep this folder on your local computer. I’ll show you later how to install your child theme on your WordPress site.

To choose the folder name, find the name of the parent theme folder. Then simply append “-child” to the name of that theme. So, a possible child theme folder name could be “hello-elementor-child.”

Tip: You can find the themes in your WordPress file under wp-content → themes. From there, you can copy the name of your parent theme’s folder.

Step 2: Create the CSS File for Your Child Theme

Next, create a “style.css” file in your child theme folder. This file will contain the styling (CSS) for your child theme.

This file is essential! It specifies which parent theme your child theme references.

Your style.css file should look something like this:

/*
Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfifteen
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:  twentyfifteenchild
*/

Please insert the following elements at the top of your style.css file. Simply adjust the data after the colons to fit your child theme.

Important: Only 2 of the provided elements are required by WordPress. If you don’t have these two pieces of information, it won’t work.

Theme Name: This name must be unique.
Template: This is the name of the folder where the parent theme is located. As mentioned above, you can find the theme folders in wp-content → themes.

Here’s an explanation of the other optional elements:

Theme URI: A link to your theme’s website and/or documentation.
Description: A brief description of your theme.
Author: The name of the theme’s author.
Author URI: The website of the theme’s author.
Version: The version number of your theme.
License: You can simply leave this as default.
License URI: You can simply leave this as default.
Text Domain: Simply take the name of the parent theme and add “child” to the end. The “Text Domain” is used for internationalization, i.e., for translating your theme.

These optional pieces of information will change the appearance of your theme in the Theme Dashboard (Appearance → Themes). This is especially useful if you plan to publish your child theme.

Screenshot of the WordPress Theme area

I also recommend adding the version number, as it will make future processes easier.

If you want to customize the theme with custom CSS to change its appearance, you can do that in this area.

Step 3: Enqueue the Parent and Child Theme Stylesheets

Now it’s time to enqueue the stylesheets. This serves two purposes:

The child theme inherits the styling of the parent theme. So, when you activate the child theme, your website looks exactly as it did before!
The child theme stylesheet is loaded before the parent theme stylesheet. This ensures that changes you make to the theme’s style will be properly displayed and adopted.

To enqueue the stylesheets, you need to add the following code to your child theme’s functions.php file.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_include_style' );

function my_theme_include_style() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Tip: If you don’t know what a functions.php file is, check out my post about it!

This process may vary slightly from parent theme to parent theme. So, if you encounter any issues during this step, refer to the parent theme’s website or contact the developer.

Step 4: Verification and Creation of the Zip File

Great! You have created a child theme. The two essential files, “style.css” and “functions.php,” should now be in the child theme’s folder. Screenshot of the child theme folder

To install the child theme via the WordPress admin dashboard, you need to compress the folder into a Zip file. On Windows and macOS, you can usually do this by right-clicking on the folder. In the menu that appears, there should be an option to “Compress” or “Create Zip.”

Screenshot of Zip creation on macOS

Need help creating your child theme?

Feel free to reach out to me! I'm happy to assist.

Contact now

How to Install a Child Theme?

Now that you have a Zip file containing your child theme, go to your WordPress admin dashboard and navigate to Appearance → Themes → Upload Theme. Upload your Zip file and click on “Install”.

Once the theme is installed, you’ll receive a short message from WordPress, indicating that the parent theme is required. You will also be informed if the parent theme is currently installed. If everything looks good, you can click on “Activate”.

Screenshot of theme activation

Awesome! Your child theme is now active. You should be able to see it in the themes section of your website.

Tip: If you want to customize the screenshot displayed in the themes section for your child theme, upload a “screenshot.png” or “screenshot.jpg” file to your child theme folder. This is not essential for functionality, but it’s a nice touch.

Okay, so the child theme is up and running. But wait! The purpose of the child theme was to make changes to the parent theme without any issues. So, let’s do that now.

How to Customize a Child Theme?

There are three main ways to customize a child theme:

Custom CSS
Custom functions in functions.php
Custom template files

1. Custom CSS

To add custom CSS, simply edit the style.css file in your child theme folder. In this file, you can easily change margins, colors, font sizes, and more. The CSS rules you specify in this file will override the styling of the parent theme.

2. Custom Functions in functions.php

To modify the functionality of the parent theme, you’ll need to edit the functions.php file of your child theme and write PHP code.

In this file, you have a lot of possibilities. For example, you can create an options page to manage contact information and other details in one central location. You can learn how to do this in another article.

If you need help adding specific functions, feel free to message me.

Tip: If you’re not familiar with the functions.php file and how to edit it, check out my post about it.

3. Custom Template Files

Finally, you can use the child theme to override the templates of the parent theme. Template files control the layout and content of various parts of your site, such as the footer, header, blog archives, or blog detail page.

To do this, you need a good understanding of PHP and HTML. If that sounds too technical for you, you might consider using a page builder plugin like Elementor.

If you want to edit a template file from the parent theme, simply copy the file from the parent theme folder to your child theme folder.

For example, you can copy the single.php file, which controls how a blog post looks. Now, you can customize the individual parts of this file in the child theme folder. WordPress will then use your modified version (the file in the child theme folder) as the template.

Other Ways to Create a Child Theme in WordPress

As mentioned at the beginning, there are different ways to create a child theme. You now have the basics covered. Let me explain a few other methods to create a child theme.

1. Use a Child Theme Plugin

There are various free plugins that can help you create a child theme. Simply search for “Child Theme” in the plugins section of your website, and you should find some results.

Important: When choosing a plugin, make sure it appears reliable, is compatible with your WordPress version, and has some active installations and reviews. This way, you can ensure that the plugin won’t harm your site.

2. Pre-made Child Themes by the Parent Theme Developer

In most cases, you’re probably using a theme developed by someone else. Some parent themes offer pre-made child themes. You can usually find these pre-made child themes on the official website of the theme, often linked in the themes section of the WordPress admin dashboard (Appearance → Themes).

3. Use a Child Theme Generator Website

There are free websites that can generate your child theme for you. One such website is Free WordPress Child Theme Creator & Generator. You simply provide some basic information, and you’ll get the basic files of your child theme.

What to Do If the WordPress Child Theme Doesn’t Work?

If your child theme isn’t working, it could be due to various reasons. Here are some tips to help you troubleshoot the issue.

1. Check the functions.php File of Your Child Theme

If the functions.php file doesn’t properly enqueue the styles (see Step 3 of the “How to Create a Child Theme” section), your child theme won’t load correctly. Your site might look normal at first glance because the parent theme’s styling still applies, but changes from the child theme won’t be applied.

If you’ve added custom PHP code, make sure to check it for errors (syntax errors, typos, logic errors, etc.).

2. Check the style.css File of Your Child Theme

Make sure you’ve named the CSS file of your child theme “style.css”. Not “styles.css”, “stylesheet.css”, “styling.css”, “main.css”, or anything else. Your child theme won’t work if the name of this file is incorrect.

Also, check if you’ve correctly specified the name of the parent theme in the style.css file. The name you need to specify is the parent theme’s folder name (wp-content → themes).

Review the style.css file for any syntactic CSS errors. A code editor like Visual Studio Code can help you with this.

Additionally, make sure you’re styling elements, IDs, and classes that actually exist. For example, if you want to style the class “container” but accidentally misspell it as “conainer”, your CSS won’t work.

3. Clear the Cache

Some WordPress sites use caching plugins, which can display an old version of the website. Try clearing the cache; the process may depend on the plugin you’re using. You can find more information on the plugin’s website.

Also, try clearing your browser’s cache. Additionally, open the site in a private tab to see if the changes are visible there.

4. Use “!important”

Sometimes, the parent theme may override the child theme’s styling for some reason. In such cases, use the “!important” declaration in your CSS rules that are being overridden by the parent theme. Here’s an example:

p {
  color: red !important;
}

You simply need to place the “!important” before the semicolon.

5. Seeking Help from a Developer or Theme Support

Finally, you can seek assistance from an experienced developer or the support team of your parent theme. I’m also happy to try and help - just send me a message.

Need help with your child theme?

Feel free to contact me! I'm glad to assist you.