How to Create a WordPress Child Theme

Presumably, you have seen people suggest you use a WordPress child theme when you start looking to make changes to your WordPress site’s theme, but, what is a child theme, and how important are child themes in your website?

We will give you some explanation and a step-by-step tutorial on installing a child theme and we expect it could help you decide on using one.

What is a WordPress Child Theme and What is the Benefit of Having One

A WordPress child theme is a child of an existing parent theme that provides a chance to safely make changes to your parent theme without editing the parent theme itself.

A child theme requires a parent theme to be installed as well, so a child theme can’t be a standalone theme. A child theme inherits most/all of the design settings by pulling them from the parent theme, in a situation where you make a change to the child theme, that change will override the settings in the parent theme.

You might wonder, why not just change directly to the parent theme?

You need to keep your theme up to date if you want to keep your WordPress site secure and perform better. If you customize your site by editing your theme directly, then that means every time an update comes out and is applied, you will override all of your changes, and that’s a pretty awful experience right?

Aside you don’t have to worry about the theme update, if you have a child theme that also means:

• You can make all changes in the child theme without worrying about losing any of your work
• Easier to keep track of all of your modifications and tweak them as needed in the child theme
• You can easily go back to the parent theme design anytime by disabling the child theme

How to Create a WordPress Child Theme

Now, let’s get into the more practical part of this tutorial. We will show you how to create a WordPress child theme with two methods:

1. Using a Plugin
2. Using the manual method.

Creating a WordPress Child Theme Using Plugin

We recommend that you make a full backup of your site before proceeding. Or, ideally, set everything up on a staging site.

In this tutorial, we choose the Child Theme Generator plugin to create our child theme. It has an active install of over 300.000 which makes it the most popular option for creating and customizing a child theme.

Let’s start by installing and activating the plugin from WordPress.org. Next, from the WordPress dashboard, go to the Tool menu → Child Theme to create the child theme.

Select the theme for which you want to create your child’s theme in the Select a Parent Theme setting then click the Analyze button.

Once the plugin analyzed your theme, some additional options to configure your child’s theme will show up below the analyzed result. Each additional option has a brief explanation of what it does. However, you can leave it as default if you’re not sure about the options.

Once you’ve finished making your choice, click the Create New Child Theme button to create a new child theme.

Then, after you got the notice about successful child theme creation, we still need to activate the child theme. Go to Appearance → Themes to apply the child theme.

Before activating it, let’s look at the Live Preview of what your site looks like with your child theme to make sure it’s working.

Once you are ready, click on the Activate button to activate the child theme.

You can use the tool included in the Child Theme Configurator plugin to help you manage your child theme, such as, viewing all of the associated files in both your child theme and parent theme and copying files from the parent theme to the child theme by going to the Files tab of the plugin’s settings to override the parent templates settings.

Creating a WordPress Child Theme Manually

We’ll assume that you know a little bit about PHP and CSS for this section or you can use the plugin method from the previous section if you do not feel comfortable with the instruction here.

To manually create a child theme, you need to have at least these two files:

• style.css ~ Child theme main stylesheet
• functions.php ~ This file will ensure the child theme inherits its parent theme styling by enqueueing the stylesheet from the parent theme.

Let’s start by creating the folder for your child’s theme. Open file manager on your web hosting service. Go to your WordPress installation directory, and open /wp-content/themes/ folder.

You can name the folder anything you want, however, you could name the child theme folder with the parent theme folder name by adding “child” at the end to help you remember it.

Continue by opening the folder and creating the first file, the style.css file. Open the file then add the following code:

Theme Name:   Twenty Twenty One Child Theme
Theme URI:    https://www.wppagebuilders.com/
Description:  Twenty Twenty-One child theme 
Author:       WPPagebuilders
Author URI:   https://www.wppagebuilders.com
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild

The above code contains information about the child theme, feel free to change everything after the colons except the Template line with your actual information. The Template line must have the same line as your parent theme folder name as your child theme won’t work without this.

Now, let’s create the second file, the functions.php file. Continue by opening the file and add the following codes:

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

Once you created both files, you can also add a picture in the child theme folder to give it a thumbnail to help you recognize the child theme when you search for it. You should name the picture with “screenshot” as its name for the thumbnail to appear in the theme selection.

The next step is activating the newly created child theme. The activation is just like you would on any other WordPress theme which is by going to Appearance → Themes from your WordPress dashboard. You may want to look at the Live Preview first before activating it.

More on WordPress Child Theme

A quick Google for a child theme of your theme may let your creative juice flow. For example, themes like Divi have a market for child themes on their website, and Astra has a tool to generate child themes.

Installing a Pre-Made WordPress Child Theme

To install a pre-made child theme is just like you would any WordPress theme and that is by going to Appearance → Themes → Add New and then click on Upload Theme to upload the child theme.

Note: The creator of the child themes may give you more instructions on how to install them to get the same style and appearance as their theme preview.

Customizing the Child Theme

You may want to customize your child theme (actually you’re using the child theme to override the parent), just as customizing a regular WordPress theme, there are multiple methods for it, here are some of the methods:

• By using the WordPress customizer in your WordPress admin screen
• By utilizing the theme builder from the page builder of your choice
• By adding a custom CSS code to your child theme’s style.css
• Override the parent theme’s template by copying the template file and then editing it on the child theme

For the last two methods, you will need to have some knowledge of CSS, HTML, and PHP.

However, if you only want to put some code snippets to add some function from the internet to your WordPress site, let’s take Metabox custom field generated code for the example, then you can put them in the child theme’s functions.php file anytime without worrying about breaking or updating the parent theme.

Removing a WordPress Child Theme

To stop using your child theme, you can deactivate it just like you would on any other WordPress theme which is, by activating another theme in Appearance → Themes. Either a brand new WordPress theme or go back to the parent theme, just a reminder, if you move back to your parent theme default design, all of the changes from the child theme will disappear until you activate it again.