Create a Child Theme With WordPress (3 Methods)

A child theme is useful for a number of reasons, but mainly because it lets you keep your theme updated without erasing modifications.

What you need to know:

1. A WordPress theme only becomes a ‘parent’ once you create a child theme. Until then, it’s just your main theme.
2. Updates will only change parent theme files and not child theme files. This is why your custom code or design remains in place after a theme update.
3. The child theme is dependent on the parent for structure and functionality. Both need to be present for your website to work.
4. WordPress checks both the child and parent theme before building a page for visitors. Modifications are taken from the child theme and the rest of the page from the parent.

Why You Should Use a Child Theme

After reading about what a child theme is, you probably already have a pretty good idea why we recommend using one.

You don’t have to use a child theme of course. But if you want to customize a theme in any way, you’ll find life much easier if you use one!

Child Theme Magic: Step-by-Step Guide

Now let’s get to the reason you’re here, to learn how to create a child theme.

There are three ways to do it:

If you use Astra, the child theme generator is the simplest, but we’ll show you how to do all three.

First, make a backup of your WordPress website so you have a copy if you need it. The process is safe, but just in case…

Method 1: Use the Astra Child Theme Generator

To use the generator, visit this link and give it a name. If you click Advanced Options, you can add extra details like author, description, and folder name. You can also add a screenshot and more details if you like.

Once done, click Generate. The child theme will be created and downloaded to your device.

Select the file you just downloaded, upload it to WordPress and install and activate it.

You now have a new child theme, which you can edit directly in the editor!

There are a number of free plugins available that let you create a child theme. 

They all function in more-or-less the same manner, although a few have unique features.

We recommend using this option if you don’t use Astra as it’s easier than creating one by hand.

It hasn’t been updated in a little while but it still worked okay when we tested it. Other plugins are available.

Here’s how to use it to create a child theme:

1. Install Child Theme Configurator as you normally would.
2. Navigate to Tools > Child Themes.

3. Click the blue Analyze button.

If your theme is suitable (as the Astra theme is), you’ll see a confirmation message telling you it’s okay to use it.

Then, choose where to save the styles. You can use the default style.css file or save it in a separate stylesheet.

That’s all there is to it!

Test it by making a change and seeing if it appears when you load a page.

If it doesn’t, revisit the stylesheet setting from within the Child Themes menu.

Select CONFIGURE an existing Child Theme at the top and select the child theme from the dropdown in the next section.

Then make any changes you need and hit the blue Configure Child Theme button to save them.

This video by Adam Preiser walks you through creating a child theme:

If you’d rather create a child theme yourself, you can. It takes longer than the Astra Child Theme Generator or a plugin but you’re in control of everything.

To create a child theme manually, you’ll need to upload a few files to your web host. 

The easiest way to do this is via FTP/SFTP, Putty (SSH) or the file browser in your host’s control panel (cPanel or Plesk)

Not sure how to do that? Read one of the guides below:

Once you’ve logged into your host, go to the /wp-content/themes folder.Create a new folder for the child theme and call it my-child or whatever you like. The first part of the name should ideally be the parent theme name, followed by a dash and the word child.

Now we need to create a style.css file to contain the CSS code. 

CSS stands for Cascading Style Sheets and is the language used to design elements on websites.

If you are totally unfamiliar with CSS, check out these two beginner guides:

Then, copy and paste the text below:

/*
 Theme Name:   Astra Child
 Theme URI:	http://example.com/astra-child
 Description:  Astra Child Theme is an awesome theme.
 Author:   	Brainstorm Force
 Author URI:   https://www.wpastra.com
 Template: 	astra
 Version:  	1.0.0
 License:  	GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:     	astra
 Text Domain:  astrachild
*/

Change details to match yours and save the file.

Then, upload the file to the astra-child folder of your site.

Step 3: Enqueue the Stylesheet

Enqueuing tells WordPress to load customizations from a separate stylesheet while using the parent stylesheet for everything else.

For that to happen, we need to add a short line of code that connects the parent to the child.

There are two ways to do this. 

The first is easy but inefficient, while the second takes longer but is recommended by WordPress.

We’ll show you both methods so you can make your own decision about which to use

This first method is considered outdated as it increases the amount of time that it takes to load the stylesheet. 

However, it is much simpler to do and if your site is not particularly large, there is very little practical downside.

This is especially true if you are only making a small number of edits.

Simply add the following code to the bottom of your style.css file:

@import url(“../astra/style.css");

Just change the text to match the directory structure you created.

Method 2

The second method is recommended by WordPress, but requires a little more technical knowledge.

Navigate to Appearance > Theme Editor 

Select your child theme and find the functions.php file from the list on the right.

Paste the below code and save it.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( ' astra-child', get_stylesheet_uri(),
        array( astra ), 
    );
}

Replace astra-child with your child theme name and array( astra ) with the parent theme name.

Note that unlike the style.css file (or any other file), the child theme version of functions.php doesn’t overwrite the parent. 

It reads the child file’s code and uses it instead of the same code in the parent file.

Once you’ve uploaded the files, open your WordPress admin panel and go to Appearance > Themes. 

Your new child theme should now be listed. Activate it.

Since we haven’t added any new code yet, the child theme will be exactly the same as its parent theme.

The easiest way to preview changes to your website theme is with the inspector tool in your browser. 

In most browsers, including Google Chrome, Mozilla Firefox, and Safari, you can do this by right clicking on an element. A developer panel will appear on the side of the browser window.For example, right click on the top heading, then select Inspect. This will bring up the developer sidebar.

Since we specifically inspected the heading, you can see the <h1> HTML tag displayed. Since we want to modify this header (and all headers), we want to target the H1 element.

Make a change in the developer panel, check it’s what you want and copy it into your theme file.To do this, go to Appearance > Edit Themes. On the right hand side, select your child theme. Then, add the following code to the style.css file.

h1 { color: blue; }

You’ve just modified your child theme and checked that it works at the same time!

Yes, it’s just a tiny change and not one you would likely want to keep, but it demonstrates how child themes work.

These are your template files and shouldn’t be modified directly, for the same reason you shouldn’t modify style.css. 

If you want to change any of them, follow a similar process that we did above.

Copy the file, customize it and upload it to your child theme folder.

For this example, let’s use the header.php file.

Create a copy of the file, make your modifications and save the file as header.php.

Upload it to your child theme folder so WordPress can begin using it.

To make modifications in the future, either edit it in the WordPress editor or change the file on your device and re-upload it to your child theme folder.

You can do the same for many other types of file. 

Depending on the type of file, WordPress will either use it instead of the parent file or add it to the contents of the parent file.

Troubleshooting Your Child Theme

Creating and managing child themes is relatively easy but it can go wrong occasionally.

The great thing is, if it doesn’t work, you can edit or delete the file and start over.

Here are a couple of situations we often hear about when discussing child theme and their fixes:

Child Theme Isn’t Appearing

If you tried to enable your child theme but it isn’t appearing in your themes list:

• Check the stylesheet in the child theme folder and double check the name, the parent theme folder name and Theme URI.
• There may be a typo there, change it if there is.
• If everything looks correct, create a new copy of the stylesheet.css and retest.

Can’t See Changes to Child Theme

If you made changes to your child theme and they aren’t showing up:

• Reset your WordPress cache if you use one
• Force refresh your browser (Ctrl + Shift + R for most browsers)
• Recheck the section on enqueuing above and look for typos in function.php

If all else fails, delete the child theme file and replace as we showed you earlier.

Creating and Working with Child Themes

That about sums up child themes. As you have seen, they are easy to create and offer many benefits for busy website owners.

If you get frustrated when your changes are overwritten by a theme update or want to experiment with design without ruining your theme, you now know what to do!

Are you using a child theme? Which method do you use to make changes? Let us know in the comments!

Child Theme FAQs

Here are some common child theme questions and their answers:

Conclusion

That about sums it up! As a reminder, you should always try to use a child theme when making modifications to a WordPress theme. While it may seem easier to just quickly modify the parent theme, in the long run, you’ll have more issues.

Are you using a child theme? Which method do you use to make changes? Let us know in the comments!