Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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.

How to Create a WordPress Child Theme

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.

Tip: Looking for an easy way to customize your theme without creating a child theme or editing the functions.php file? The free WPCode plugin allows you to easily insert code snippets for PHP, CSS, HTML, and more.

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

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.

Create a Folder for the Child Theme

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:
Description:  A Twenty Twenty-One child theme
Author:       WPBeginner
Author URI:
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.

Click the Activate Button

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.

Select a Parent 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.

Click the Analyze Button

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.

Name the Folder for the Child Theme

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.

Choose How the Parent Theme Stylesheet Will Be Accessed

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.

Click to Edit Child Theme Attributes

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.

Click the Button to Create Your New Child Theme

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.

Preview the Child Theme Before You Activate It

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

Now, your child theme will go live.

Click the Activate & Publish Button

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.

Right Click and 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.

You Will See the HTML and CSS for the Page

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.

Change the Background Color

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:
Description:  A Twenty Twenty-One child theme
Author:       WPBeginner
Author URI:
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.

Twenty Twenty-One Theme Layout

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">
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( '', '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:

// 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.

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.


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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

98 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      You would want to use the code from our article below the text /* enqueue scripts and style from parent theme */ :)


  2. Yogesh Sambare says

    Hi, Team wpbeginner,
    Thanks for this awesome guide, now I think I’m able to make my themes child theme, and it’s really helpful for me .

  3. Ricardo says

    The line:
    “wp_get_theme()->get(‘Version’) )”

    Should be:
    “wp_get_theme()->get(‘Version’) )”


    • WPBeginner Support says

      While our comments automatically changed that in your message, we see the issue, thank you for letting us know :)


  4. Eitan says

    You need to add quotation marks to the Y = (“Y”) at the echo date, or you’ll get an error. – echo date(“Y”)

  5. Bomo says

    So now that we have created a child theme, how do we update the parent theme when the child theme is activated?

    • WPBeginner Support says

      You would update the parent theme as you normally would. For safety, you may want to create a backup before you update the parent theme in case there is a conflict somewhere.


      • RYAD says

        But do we have to activate the parent theme before we update and them desactivate it and reactivate the child theme ?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.