How to Create a WordPress Child Theme – Step by Step Guide

Do you want to play with the design and functionality of your WordPress theme but are scared that it might disrupt your original theme?

Don’t worry!

Using a child theme is a great way to modify, alter and test your theme without worrying about the risks involved. Since you’d be modifying the child theme and not the parent, you won’t lose any customization when updating the parent theme.

If you encounter any issues after making the changes, you could always revert back to the original theme by deleting the child theme you created.

In this tutorial, I will demonstrate how to create a WordPress Child theme and its customizations.

So let’s begin!

What Is a WordPress Child Theme?

Child themes – as the name suggests – is a theme that derives functionalities from a parent theme. Editing your WordPress theme can be risky because any customizations can alter the core theme. Therefore, child themes can be a risk-free alternative to making changes to your WordPress theme.

WordPress child themes exist in a different folder than a parent theme, and the child theme depends on the functionalities of the parent theme unless modified. When installing a child theme in the WordPress dashboard, you’ll notice that it’s connected to the parent theme.

If you use a child theme on your website, then the WordPress core will check the child theme files first. If it is not changed, WordPress will execute the parent theme files.

It’s important to remember that a child theme can’t function independently. It must be installed adjacent to the parent theme.

What Is the Difference Between Parent and Child WordPress Themes?

A parent theme is a complete WordPress theme that includes template files, stylesheets, CSS, JavaScript files, and other assets required to run a WordPress website. On the other hand, the child theme inherits its functionality from the parent theme.

Here’s a table to help you understand the differences between the two.

Parent Theme	Child Theme
Originally present in WordPress	Was developed later on
Parent theme is independent of other themes	Child theme is dependent on Parent theme and inherits the functionality of Parent theme
Contains all the files and assets	A child theme generally has only two files: style.css and functions.php
Parent theme is mandatory	Child theme is best for customizations

When to Use a Child Theme in WordPress?

You can use a child theme when:

• You want to customize your theme’s templates or styles without altering the parent theme’s code.
• You want to test new features or customizations without risk.
• You’re developing a new theme and want to use an existing theme as a starting point.
• You want to create a custom theme for a specific client or project and use an existing theme as a starting point

Prerequisites Before Creating a WordPress Parent Theme

The first and most important thing to do before creating a child theme is to create a backup of your site. In case of any mishap, you should have a backup to restore your site on a running point. There are several ways to create a backup. You can use plugins like Updraft, or you can also create a backup from your hosting platform.

If you’ve never backed up a WordPress website, you can follow our easy guide on how to back up your WordPress websites.

The second suggested method is to create a staging environment, make changes in the staging environment and then push the changes on the live environment once you are done with the changes. Creating a WordPress staging website lets you test changes without affecting your live website.

Try the Fastest Hosting Platform With Pay-As-You-Go Pricing & 24/7 Expert Support!

Host your beautifully created masterpieces with flexible & affordable hosting.

GET STARTED TODAY

How to Create a Child Theme Manually

Creating a child theme in WordPress only takes a few steps. To completely understand the concept of child themes in WordPress, we will create a child theme of Twenty Fifteen default WordPress theme and make certain modifications to get the idea behind Child Themes.

To create a WordPress child theme, we will follow these 5 simple steps:

1. Create a Child Theme Folder
2. Create a Stylesheet for Your Child Theme
3. Enqueue the Parent and Child Themes’ Stylesheets
4. Edit the style.css File of Child Theme
5. Edit a Template File of single.php

Let’s discuss each and every step in detail.

Step 1: Create a Child Theme Folder

First, create a separate folder to place all the essential files for your child theme in your local system.

Why in the local system?

Well, once you have completed all the files, you can upload the folder to your website using FTP (File Transfer Protocol) technology.

Second, name this newly created folder resembling your parent theme and add the word ‘child’ after the name. For example, I’m using a Twenty Twenty-Two theme on my WordPress website.

If I want to create a child theme for Twenty Twenty-Two, I’d name the folder Twenty-Twenty-Two-child. It indicates that this folder is a child theme folder of the Twenty-Two theme.

Step 2: Create a Stylesheet for Your Child Theme

Next, you’ll need to create the ‘style.cs’ file inside your child theme folder. The CSS file will contain all styling rules and declarations for your child theme.

To create the CSS file, you can use a text editor like Notepad or any code editor like Sublime Text.

To make your stylesheet work properly, you need to add the header comments at the very top of your CSS file. The header comments contain basic information about the child theme, including that it is a child theme of a particular parent theme.

The most important two elements in the comments would be the Theme Name and Template directory. The themes are usually located in the wp-content/theme folder.

Open Notepad, copy and paste the below code into your file and save this file with a .css file extension.

/*
Theme Name: Twenty Twenty Two Child
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentytwentytwo
Description: Child Theme of Twenty Twenty-Two
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentytwentytwo-child
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Now, if we navigate to our WordPress Admin Dashboard → Appearance → Theme, we will see that Twenty Fifteen Child has appeared. We can now apply that theme on our site.

As style.css is present in the WordPress child theme directory, WordPress will load that style.css and not the parent theme’s style.css. Every other file, like index.php, page.php, and functions.php will be loaded from the parent theme.

As we do not have any styles defined in the child theme’s style.css, we will have to import the styles. The best practice recommended on WordPress codex is to enqueue the style sheets using the functions.php file.

Step 3: Enqueue the Parent and Child Themes’ Stylesheets

Unlike other files, the theory behind the functions.php file in WordPress child themes is: WordPress first loads the functions.php of the child theme and initializes the functions in it. Later, it will execute the parent theme’s functions.php.

As I mentioned, importing style sheets is the best way to enqueue them through the functions.php file.

Create the functions.php file in your child theme directory and add the following code.

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

This will call the style sheet ‘style.css’ from the parent themes file. If you want to edit anything in the style sheets, you can add those rules in the style.css of the child theme.

Step 4: Edit the style.css File of Child Theme

In WordPress child themes, you can easily edit the style sheets by defining rules in the style.css in the child theme folder. For example, if we want to change the anchor color, all we need to do is add the following code in our child theme’s style.css

a {
color: #D54E21;
text-decoration: none;
}

What happens here is that the child theme’s style.css rule for ‘a’, overrides the parent theme’s style.css, rest remains intact.

Step 5: Edit a Template File of single.php

We can easily edit individual template files in the child themes. For example, if we want to edit single.php, we must copy that file from the parent theme folder and paste it into the WordPress child theme’s folder.

Let’s say we want to remove the comments section from single post pages. After copying the file into our child theme folder, we can edit it and remove the following comments section.

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

What happens here is that WordPress checks the child theme folder for single.php. If it exists in the directory, it will load it from there. Else, it will fall back to the parent theme folder.

Just like that, we can edit any individual template file in our themes. This approach is generally good because it keeps our parent theme intact and updates the parent theme without losing our customization.

How to Create a Child Theme Using Plugin

If you are not a developer and don’t have a technical background or don’t want to use the manual method, then you can create a child theme using a plugin. There are several plugins available in the WordPress repository for child theme creation.

Here are 3 of the most popular free child theme plugins:

1. Child Theme Wizard
2. WPS Child Theme Generator
3. WP Child Theme Generator

For this tutorial, I’ll use the Child theme Wizard plugin to generate the Child Theme.

To begin:

• Go to WordPress Dashboard > Plugin > Add New.
• Search for the Child Theme Wizard plugin on the right-side search bar.
• Click on the Install button.
• Once installed, click on the Activate button to activate the plugin.

• Once the plugin is successfully activated, you’ll see the Child Theme Wizard option under the Tools option on a left-side WP admin bar

• Now, you must select the Parent Theme. To do that, you need to add the Title, Description, and Child Theme URL and click on Create Child Theme.

• Now go to Appearance > Theme and see your newly created child theme.

This is how you can simply create a child theme using a plugin – Child Theme Wizard.

How to Check the Child Theme After Installation

Either you create a child theme manually or from a plugin, you can see your child theme by navigating to Appearance > Theme. From here, you can view the installed child theme. You can Activate and Delete the theme as well.

You May Have a Beautifully Designed Website, but Is It Fast?

Give your website a great place to live and be seen at an affordable cost. Starting at $10/mo.

GET STARTED TODAY

Summary

And that’s it. I hope you now know what a WordPress child theme is and how it differs from a parent theme.

In this blog, I tried to explain the benefits of using child themes and the prerequisites you need to consider before implementing them.

I also covered steps in detail to create child themes manually and using a plugin. If you still have any questions, feel free to reach out.