How to Create a WordPress Child Theme (Beginner’s Guide)

Are you looking to create a child theme in WordPress?

Once you learn the WordPress basics, you probably want to learn how to customize your WordPress site. Child themes are a great starting point for anyone looking to customize WordPress themes.

In this article, we will show you how to create a child theme in WordPress.

Why Do You Need a Child Theme?

A child theme is a WordPress theme that inherits the functionality, features, and style of another WordPress theme, which is the parent theme. You can then customize the child theme without making any changes to the parent theme.

Child themes are the best way to customize a WordPress theme because they save time and effort. The parent theme already contains lots of formatting and functionality, so you don’t have to code everything from scratch.

They also make it safe to update your WordPress themes. Because you modified the child theme and not the parent, you won’t lose any customization when you update the parent theme.

Once you’re happy with your child theme, you can even use it on another WordPress site.

Before You Start Creating a Child Theme

To create a child theme, you should be aware that you will be working with code. You’ll need a basic understanding of HTML and CSS to understand what changes you need to make to the code to achieve your goals.

Some knowledge of PHP is also helpful. You should at least be familiar with copying and pasting code snippets from other sources.

We recommend you practice in your local development environment. You can move a live WordPress site to a local server for testing purposes or use dummy content for theme development.

Finally, you need to decide on a parent theme. You should choose a parent theme that’s similar in appearance and features to your end goal. The aim is to make as few changes as possible.

In this article, we will use the Twenty Twenty-One theme, which is one of the default WordPress themes.

Creating Your First Child Theme

You can create a child theme manually by creating the folder and files that are needed. Or you can create one using a child theme plugin.

The manual method is helpful because it will help you become familiar with the files you need to work with later in the tutorial. The plugin method can be used if you have difficulties creating those files.

You only need to use one method, and you can jump to the method you prefer using the links below:

• Method 1: Creating a Child Theme Using Code
• Method 2: Creating a Child Theme Using a Plugin

Method 1: Creating a Child Theme Using Code

First, you need to open /wp-content/themes/ in your WordPress installation folder and create a new folder for your child theme.

You can name this folder anything you want. For this tutorial, we will be naming it wpbdemo.

Next, you need to create the first two files for your child theme. Start by opening a text editor like Notepad.

Then you need to paste the following code into the empty document:

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

This code contains information about the child theme, so feel free to change it to meet your needs. Now save this file as style.css in the child theme folder you just created. This is your child theme’s main stylesheet.

The next thing you need to do is create a second file that will import, or enqueue, the stylesheets from the parent theme. To do that, create a new document in your text editor and add the following code:

/* enqueue scripts and style from parent theme */

function twentytwentyone_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

This code will work when you use Twenty Twenty-One as the parent theme. If you use a different parent theme, then you need to use different code as described in the WordPress Theme Handbook.

If you have difficulty modifying the code for a different parent theme, then you might want to use the plugin method instead.

Now save this file as functions.php in your child theme folder. We will come back to this file later to add functionality to your child theme.

Note: In the past, the parent theme was imported using the @import command in style.css. We don’t recommend this method anymore because it will increase the amount of time needed to load the style sheets.

You’ve now created a very basic child theme, and when you navigate to Appearance » Themes, you should see the WPB Child Theme. You’ll need to click the ‘Activate’ button to start using the child theme on your site.

Since you haven’t changed anything in your child theme yet, your site will use the functionality and appearance of its parent theme. You can now move on to the next section, where you’ll customize the child theme.

Method 2: Creating a Child Theme Using a Plugin

Child Theme Configurator is an easy-to-use WordPress plugin that lets you create and customize WordPress child themes quickly without using code.

The first thing you need to do is install and activate the Child Theme Configurator plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

On activation, you need to navigate to Tools » Child Themes in your WordPress dashboard.

On the Parent/Child tab, you’ll be asked to select a parent theme from a dropdown menu. We will select the Twenty Twenty-One theme.

Once you click the ‘Analyze’ button, the plugin will make sure the theme is suitable for use as a parent theme.

Twenty Twenty-One is OK.

Next, you will be asked to name the folder the child theme will be saved in and choose where to save the styles.

We will leave the default settings.

In the following section, you’ll be asked to choose how the parent theme stylesheet will be accessed.

Again, we will go with the default setting.

When you get to Section 7, you’ll need to click the button labeled ‘Click to Edit Child Theme Attributes’.

You can then fill in the details of your child theme.

When you create a child theme manually, you lose the parent theme’s menus and widgets. Child Theme Configuratator can copy them from the parent theme to the child theme.

Check the box Section 8 box if you’d like to do this.

Finally, click the button to create your new child theme. The plugin will create a folder for your child theme and add the style.css and functions.php files you’ll use to customize the theme later.

Before you activate the theme, you should click the link near the top of the screen to preview it and make sure it looks good and doesn’t break your site.

If everything seems to be working, click the ‘Activate & Publish’ button.

Now, your child theme will go live.

At this stage, the child theme will look and behave exactly like the parent theme. Next, we will begin to customize it.

Customizing Your Child Theme

Now we will customize the child theme so that it looks a little different from the parent theme. We do this by adding code to the style.css file, and that requires some familiarity with CSS.

You can simplify the process by copying and modifying the existing code from the parent theme. You can find that code by using the Chrome or Firefox Inspect tool or by copying it directly from the parent theme’s style.css file.

Method 1: Copying Code from the Chrome or Firefox Inspector

The easiest way to discover the CSS code you need to modify is by using the inspector tools that come with Google Chrome and Firefox. These tools allow you to look at the HTML and CSS behind any element of a web page.

For example, if you want to see the CSS used for the body of the post, then simply take your mouse over the post and right-click to select Inspect.

This will split your browser screen into two parts. At the bottom of the screen, you will see the HTML and CSS for the page.

Depending on your browser’s settings, the HTML and CSS may appear on the right of the screen instead.

As you move your mouse over different HTML lines, the Chrome inspector will highlight them in the top window. It will also show you the CSS rules related to the highlighted element.

You can try editing the CSS right there to see how it would look. Let’s try changing the background color of the body to #fdf8ef.

You will see that the page background color will change, but the change is only temporary.

To make it permanent, you’ll need to copy this CSS rule and paste it into your child theme’s style.css file.

body {
background-color: #fdf8ef;
}

Save the changes you made to the style.css file and then preview your site.

You can go on to repeat the process for anything you want to change in your theme’s stylesheet. Here is the complete stylesheet that we have created for the child theme. Feel free to experiment and modify it.

Theme Name:   WPB Child Theme
Theme URI:    https://www.wpbeginner.com/
Description:  A Twenty Twenty-One child theme
Author:       WPBeginner
Author URI:   https://www.wpbeginner.com
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}

Method 2: Copying Code from the Parent Theme’s style.css File

You can also copy some code directly from the parent theme’s style.css file. You can then paste it into the child theme’s style.css file and modify it.

That’s particularly helpful when using Twenty Twenty-One as a parent theme because it makes extensive use of CSS variables.

For example, when we modified the page’s background color above, the original code was:

background-color: var(--global--color-background);

Here, ‘–global–color-background’ is a variable. The variable can be used in multiple locations throughout the theme. To change the color in all of those places at once, you simply have to change the value of the variable.

You need to navigate to /wp-content/themes/twentytwentyone in your WordPress installation folder and then open the style.css file in your text editor. You can then find where the –global–color-background is defined.

--global--color-background: var(--global--color-green);

We discover that the variable is defined by yet another variable!

In fact, in the :root section of the parent theme’s style.css we find a whole range of color variables defined. This is the color palette used by the Twenty Twenty-One theme.

:root {
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
}

Once you choose the perfect color scheme for your WordPress site, these variables will let you quickly customize your child theme.

You simply copy that code and paste it into your child theme’s style.css file. Then you need to replace the color codes with new ones you chose for your own color palette.

Those colors will then be automatically used in multiple places throughout your child theme. It’s not only quicker but will make the colors of your theme more consistent.

Be adventurous. The green color variable doesn’t have to be green.

You can do the same for other variables. Twenty Twenty-One’s style.css lists variables for font families and sizes, headings, line spacing, and more. You can copy any of these to your new style.css file, where you can customize them.

Editing the Template Files

Each WordPress theme has a different layout. For example, the Twenty Twenty-One theme has a header, content loop, footer widget area, and footer.

Each section is handled by a different file in the twentytwentyone folder. These files are called templates.

Templates are usually named after the area they are used for. For example, the footer section is usually handled by the footer.php file, and the header and navigation areas are handled by the header.php file.

Some areas, like the content area, might be handled by multiple files called content templates.

If you’d like to modify a template, then you first find the file in the parent theme folder and copy it to the child theme folder. After that, you should open the file in a text editor and make the modifications you want.

In this tutorial, we will copy the footer.php file from the parent theme folder to the child theme folder. Once you’ve done that, you need to open the file in a plain text editor like Notepad.

As an example, we will remove the ‘Proudly powered by WordPress’ link from the footer area and add a copyright notice there. To do that, you should delete everything between the <div class= “powered-by”> tags.

<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->

Then you need to paste in the code you find below those tags in the example below.

<div class="powered-by">
<p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->

Once you save the file and visit your WordPress website, you should be able to see the new copyright notice.

Adding New Functionality to Your Child Theme

The functions.php file in a theme uses PHP code to add features or change default features on a WordPress site. It acts like a plugin for your WordPress site that’s automatically activated with your current theme.

You’ll find many WordPress tutorials that ask you to copy and paste code snippets into functions.php. But if you add it to the parent theme, it will be overwritten whenever you install a new update to the theme.

That’s why we recommend using a child theme when adding custom code snippets. In this tutorial, we’ll add a new widget area to our theme.

We can do that by adding this code snippet to our child theme’s functions.php file. You can also use the WPCode plugin to add the custom code in WordPress, which means you won’t need to edit the functions file:

<?php
// Register Sidebars
function custom_sidebars() {

$args = array(
'id'            => 'custom_sidebar',
'name'          => __( 'Custom Widget Area', 'text_domain' ),
'description'   => __( 'A custom widget area', 'text_domain' ),
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
);
register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );
?>

Once you save the file, you can visit the Appearance » Widgets page of your WordPress dashboard.

Here, you will see your new custom widget area.

You can learn more about adding widget areas in our guide on how to add dynamic widget-ready areas and sidebars in WordPress.

There are plenty of other features you can add to your theme using custom code snippets. Check out these extremely useful tricks for the WordPress functions file.

Troubleshooting

If you’ve never created a child theme before, then there’s a good chance you’ll make some mistakes. Just don’t give up too quickly. You can check out our list of most common WordPress errors to find a fix.

The most common errors you’ll probably see are syntax errors caused by something you missed in the code. You’ll find help in solving these issues in our quick guide on how to find and fix the syntax error in WordPress.

You can always start again if something goes very wrong. For example, if you accidentally deleted something that your parent theme required, then you can simply delete the file from your child theme and start over.

We hope this tutorial helped you learn how to create a WordPress child theme. You may also want to learn how to choose the best website builder or check out our list of the must-have WordPress plugins to grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.