WordPress is well known for its almost limitless possibilities for customizations, making it one of the most popular CMS (Content Management System) today.

However, you need to follow specific guidelines to keep your customizations in place and website from breaking.

This is where WordPress child themes come into play – they allow you to customize your website’s appearance and keep all your customizations in place.

What is a child theme?

Child themes look and work the same as a regular WordPress theme. Just by looking at a child theme – you wouldn’t notice it’s not a regular theme.

However, the significant difference is that child themes require a parent theme to work on your website and inherit all of its characteristics.

When you create a child theme, you can customize it all you want without affecting your parent theme in any way.

A child theme allows you to update your WordPress theme safely without running the risk of breaking all the changes you’ve made previously.

Also, it’s easier to keep track of changes you’ve made as they exist in one layer of your website, i.e., on your child theme.

Most themes have hundreds of different files and trying to remember all the files and places where you’ve made changes can become overwhelming.

A child theme solely contains files that you’ve modified, so it’s easier to stay on top of things and keep organized.

Here’s an example:

Let’s say you create a child theme for the default Twenty Twenty-One WordPress theme – WordPress will list your child theme as a separate item, but the child theme will inherit all styling, properties, and characteristics of the parent Twenty Twenty-One theme.

Any tweaks you make to the child theme will override the parent theme. In this way, your child theme acts as a customization layer on top of the parent theme.

When should you use a child theme?

Deciding if you want to use the child theme is pretty easy:

If you’re happy with your WordPress theme and you don’t plan on making any changes – you should stick to a parent theme, you won’t require a child theme

However

If you plan to customize the visuals, features, and the style of your WordPress theme – then you should use a child theme for your website

If you only want to make small CSS changes, we recommend using the WordPress Theme Editor (Dashboard > Appearance > Theme Editor) as it’s easier than using a child theme.

Here are some additional benefits of using a child theme:

Helps avoid breaking your website, especially if your theme receives frequent updates (which is a good thing), as changes made to the child theme won’t get overwritten by updates
Allows you to test changes without performing them on your active (parent) theme and running the risk of breaking your website

How to manually create a child theme

To create your child theme manually, you’ll have to use FTP or your File Manager.

Enter your WordPress main directory (public_html if it’s your main website) and then navigate to wp-content/themes

Here you’ll find a folder for each of the installed themes on your website:

Go ahead and create a new folder for your child theme. In this example, we’ll create a child theme for the default Twenty Twenty-One theme, and we’ll call it twentytwentyone-child:

You can use any name you want, but we recommend using the theme-child pattern for practical purposes.

Next, we need to create the theme stylesheet file. Each theme uses its unique stylesheet, which is the case for a child theme.

A child theme inherits the parent theme styles, but it allows you to override those by adding new code to the style.css file.

Additionally, the child theme’s style.css file notifies WordPress that your child theme is active as well.

Create a new style.css file on your computer, and paste the following code:

/*
 Theme Name: Twenty Twenty One Child
 Theme URI: http://yourwebsite.com/twenty-twenty-one-child/
 Description: Your new child theme!
 Author: Your Name
 Author URI: http://yourwebsite.com
 Template: twentytwentyone
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: child theme
 Text Domain: twenty-twenty-one-child
 */

This seems like an excessive amount of information, but you only need to change one essential setting:

Template – this tells WordPress the parent theme your new child theme uses. The Twenty Twenty-One theme uses the twentytwentyone folder for theme files which is the reason we included it in the template configuration. If you’re using a different parent theme – make sure to insert the correct folder name.

Additionally, you can alter the Theme Name and Description as these show in the Dashboard under Appearance > Themes, and you can leave all the other information as is.

Go ahead and upload the file to your wp-content/themes/twentytwentyone-child folder:

Now, go to your WordPress Dashboard > Appearance > Themes, and you’ll see your new child theme displayed there:

Don’t try to activate your child theme yet as we haven’t configured it to inherit the parent theme’s functionality.

To do that, create a new functions.php file on your computer, and paste the following code:

<?php
// enqueue parent styles

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

add_action( 'wp_enqueue_scripts', 'ns_enqueue_styles' );

Save the file and upload it to your wp-content/themes/twentytwentyone-child folder.

There is no need to adjust anything in this code as we’ve made all the required changes in the style.css file.

Now we’re ready to activate the child theme!

Go to your WordPress Dashboard > Appearance > Themes, hover your mouse over the child theme, and click Activate:

Go to your website and test that everything works correctly.

Finally, let’s go the extra mile and add a theme thumbnail so it doesn’t show a transparent square in our WordPress dashboard.

The easiest way is to take a screenshot of our active website. If you use Firefox, you can do this by right-clicking the page or use Page actions > Take a Screenshot feature: