One of the best parts of using WordPress is that you’re free to choose from thousands of themes. Even better, you can fully customize your chosen option, right down to modifying its code. But if you’re going to make significant changes to a theme, you’ll need to know how WordPress child themes work.
A child theme is a “copy” that you can use to add any customizations to a WordPress theme. Using a child theme prevents you from losing your custom settings if you update the parent theme (which should happen often!).
In this article, we’ll explain what a WordPress child theme is and when to use it. We’ll then show you how to create a child theme in WordPress step by step, customize it, and more.
What is a child theme in WordPress?
When it comes to WordPress themes, there are both parent and child themes. A parent theme is any regular, self-contained theme. It comes with a unique set of configuration files, stylesheets, and page templates.
A child theme inherits all the characteristics of its parent. WordPress will recognize it as a different theme, even if it’s functionally and stylistically identical. That differentiation between themes means that you can customize the child without impacting the parent.
Here, we have an example of a WordPress website using the Twenty Twenty-Two theme. As you can see, there’s also a Twenty Twenty-Two child theme:
When should you use a child theme?
At first glance, a child theme might seem a bit redundant. After all, if a theme inherits the configuration and style of its parent, it will look and function identically. But child themes fulfill a vital role in WordPress development.
When you update a theme, you lose any custom additions that you made to its code. That’s because WordPress replaces those files with new versions during the update process. That’s a big problem if you’re the kind of person who likes to customize themes to fit your needs.
Child themes solve that problem by separating the base templates and enabling you to use a theme that simply “pulls” the code and styles from its parent. Instead of customizing the parent theme, you use the child to make any changes to the code.
This approach enables you to update themes without worrying about losing your customizations. That’s critical because failing to update themes can lead to security vulnerabilities and compatibility issues with your website.
How to create a child theme in WordPress
This WordPress child theme tutorial will include step-by-step instructions for the entire process. Let’s start by playing it safe and creating a complete backup of your website.
Step 1: Back up your WordPress website
Whenever you’re about to make any big changes to your website, we recommend backing up all its files first. A full website backup can come in handy if you run into errors. Instead of spending hours troubleshooting, you can simply revert your site to its status before the changes.
There are several ways to create WordPress backups, including using Jetpack. Ideally, you should be backing up your website regularly, even if you’re not planning to make massive updates.
Step 2: Create a folder for your child theme
Every WordPress theme has its own folder. To find it, you’ll need to connect to your website via File Transfer Protocol (FTP) and open the WordPress root directory. That directory should be called www, public_html, public, or your site’s name.
Inside that directory, navigate to the wp-content/themes folder. Here, you’ll find a list of folders corresponding to each of your themes (both active and inactive).
Go ahead and create a new folder inside the themes directory. We recommend naming it after the parent theme and adding the –child suffix to it.
Now enter the folder, which should be empty at this stage. We’re going to add two files inside.
Step 3: Create a style.css file for the child theme
Every theme has a stylesheet or style.css file. It’s where you add all of the CSS you want to use to customize the theme. For a child theme, the style.css file is also where you declare the parent theme using a header.
Create a new file called style.css within the child theme’s directory and open it. Now copy and paste the following code inside:
/*
Theme Name: The name of your theme goes here
Theme URI: http://example.com/twenty-twenty-two-child/
Description: The description of the child theme goes here
Author: John Doe
Author URI: http://example.com
Template: twentytwentytwo
Version: 1.0.0
*/The essential parts of that header are the theme name and the template. The theme name tells WordPress how to recognize the child theme. The template line indicates the child’s parent theme.
We’re using the Twenty Twenty-Two theme as the parent in our example. But you might notice that the template name doesn’t include any spaces, and it’s all in lowercase. That’s because we refer to the template using the name of the parent theme’s folder.
Beyond those two lines, you can use the rest of the header to add more details about the child theme. When you’re ready, save the style.css file, now with its theme header, and close it.
Step 4: Create a functions.php file
The child theme’s stylesheet indicates who its parent is, but it doesn’t load the styles from the parent. To do that, you’ll need to use the WordPress enqueue function.
The enqueue function enables you to configure which stylesheets to load with a theme and in which order. For a child theme, you’ll use the enqueue function to load the child’s stylesheet before the parent’s, even though it inherits the latter’s style.
If that sounds confusing, simply think about the enqueue function as the code that tells WordPress that the child theme should inherit its parent’s style. You need to add that code to a functions.php file in the same folder as the child theme’s stylesheet.
Create the file and add the following code inside it:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>Save the changes to the file, and that’s it. Now you’re ready to activate the child theme.
Step 5: Activate the child theme
If you set up the child theme’s stylesheet and functions.php file correctly, it should be ready to go.
You can log in to WordPress and jump to the Appearance → Themes tab. Look for your new child theme inside.
Click on the Activate button, and that’s it. Now you’re ready to start customizing your child theme.
How to customize and edit your WordPress child theme
You can customize your child theme just as you would any other WordPress theme. That means you’re free to edit its templates and code in any way that you see fit.
The primary way you’ll customize a child theme is by editing its stylesheet. To locate the child theme’s stylesheet, connect to your website via FTP and go to the wp-content/themes folder. Open the child theme’s styles.css file and add any custom CSS.
Alternatively, you can access the child theme’s stylesheet without leaving the WordPress dashboard by going to Appearance → Theme File Editor. From here, you can use the built-in code editor to add custom code to any theme files.
If you use Jetpack, you’ll also get access to a CSS editor to customize any of your themes. The Jetpack CSS editor lets you preview changes before saving them, making it a more user-friendly option.
How to update your WordPress child theme
One of the advantages of using a child theme is that you don’t need to update it separately from its parent. If there’s an update available for the parent theme, you can simply download and install it.
Once you update the parent theme, the child theme will inherit the changes as well. Still, on rare occasions, updating a parent theme might cause conflicts with some of the custom code of its child.
If you run into errors while using a child theme after updating its parent, you may need to troubleshoot it. Here’s what we recommend doing, step by step:
- Switch to using the parent theme to see if the error persists.
- If the error disappears, check the child theme’s code to see what could be causing the error.
- If the error persists, try disabling your active plugins to see if one of them is causing the conflict.
In most cases, updating the parent and child themes is seamless. After updating the parent theme, you can get right back to work on customizing the child.
How to export and import a child theme
If you spend a lot of time working on a child theme, you might wish to re-use it across other projects. You can easily install the parent theme on another website and export the child theme files alongside it.
Exporting child theme files is simple. To get started, you’ll need to access your website via FTP or using your web host’s file explorer.
Navigate to the WordPress root directory and go to wp-content/themes. Inside, you’ll find individual folders for all the themes on your website, including one for the child theme that you’re using.
To export the child theme, download its folder and save it to your computer. Now, connect to the website where you want to import the theme via FTP. Navigate to the wp-content/themes directory once more and upload the child theme folder inside.
Keep in mind that WordPress will only recognize the theme if you also install its parent on the second site. If the child theme doesn’t appear when navigating to the Appearance → Themes tab, ensure that its parent is installed.
How to remove a child theme from WordPress
The easiest way to remove a child theme from WordPress is to navigate to the Appearance → Themes tab and select it. When you click on a theme, a details window will pop up, including a full description, its version number, and the options to activate, deactivate, or delete the theme.
Alternatively, you can connect to your website via FTP and navigate to the wp-content/themes directory. Inside, you’ll find folders for each theme installed on your website. Deleting any of these folders will uninstall the corresponding themes from WordPress.
If you choose to delete a child theme, make sure that you won’t need to re-use it later. Alternatively, remember to back up its data beforehand. Deactivating the theme temporarily can be a much safer option unless you’re 100% sure that you won’t want to use it in the future.
Troubleshooting common child theme errors and issues
WordPress child themes are relatively easy to set up and customize. But you may run into minor technical problems while using a child theme, depending on its configuration. Let’s talk about how to troubleshoot common errors.
1. The child theme is not overriding the parent theme
Any changes you make to a child theme should “override” the style and functionality of its parent. We say override in quotation marks because the enqueue function makes the child theme’s stylesheet load before the parent’s. If you’re using a child theme but not seeing the changes you make reflected on your site, its stylesheet isn’t loading in the proper order.
In most cases, this is due to a problem with how your child theme inherits the parent’s style. Connect to your website via FTP and open the child theme’s folder in the wp-content/themes directory to troubleshoot the issue.
Look for the functions.php file inside and open it. You should see the following enqueuing function at the top of the file:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>You’ll want to verify that there are no typos in the function. This code tells WordPress to import the style for the theme specified in the child theme’s style.css file. If the code looks OK, return to the child theme’s folder and open its style.css file.
The child theme’s stylesheet should include a section of code that looks like this:
/*
Theme Name: Twenty Twenty Two Child
Theme URI: http://example.com/twenty-twenty-two-child/
Description: A child theme for the Twenty Twenty Two theme
Author: John Doe
Author URI: http://example.com
Template: twentytwentytwo
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-two-child
*/The part of that code that we care about is the Template line. It should indicate the name of the folder for the child’s parent theme.
If there’s an error in either the style.css or functions.php file, the child theme won’t work as intended. You’ll still be able to add custom code to either file, but it won’t load on your website.
2. The child theme is not appearing in the Themes area
When you create a child theme, it should appear as a separate entry in the Appearance → Themes tab. If it doesn’t, it usually means there’s a problem with the child theme’s stylesheet.
To check the child theme’s stylesheet, connect to your website via FTP and navigate to the wp-content/themes folder. Look for the child theme’s folder inside, open it, and select the style.css file.
When you open the file, it should contain a section that looks like this:
/*
Theme Name: Twenty Twenty Two Child
Theme URI: http://example.com/twenty-twenty-two-child/
Description: A child theme for the Twenty Twenty Two theme
Author: John Doe
Author URI: http://example.com
Template: twentytwentytwo
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-two-child
*/The key lines in that code are the following ones:
/*
Theme Name: Twenty Twenty Two Child
Theme URI: http://example.com/twenty-twenty-two-child/
Description: A child theme for the Twenty Twenty Two theme
Author: John Doe
Author URI: http://example.com
Template: twentytwentytwo
Version: 1.0.0
*/For the child theme to work, you need to include each of those parameters and specify their values. The values can be anything that you want except for the Template line. That line needs to include the name of the parent’s theme folder (the name of the folder inside the wp-content/themes directory).
Make sure that you’re not missing any lines from the code in the style.css file, and save any changes.
Once you add the missing lines and attributes, the child theme should appear in the Appearance → Themes tab. Remember that it will be a separate entry from the parent theme. It will display the name, description, and author you specified in the styles.css file.
3. The child theme enqueue function is not working
If your child theme isn’t inheriting the parent’s style, there might be a problem with the “enqueue” function that you’re using. The enqueue function imports the styles for the parent theme you select when creating a style.css file for the child.
To check the enqueue function, connect to your website via FTP and navigate to the wp-content/themes directory. Find the folder that corresponds to the child theme and open it.
Look for the functions.php file inside and open it. The function that you’re looking for should look like this:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>Make sure the get_template_directory_uri parameter points to the style.css file for the child theme. The file should be in the same directory as functions.php, so add a slash before style.css if it’s missing one.
Alternatively, verify that the rest of the code is free from typos. If you want to play it safe, copy and paste that code snippet in the functions.php file and delete its predecessor. Save the changes to the file, and your child theme should work.
It might also be possible that the style.css file for the child theme isn’t referencing the parent correctly. For instructions on fixing that, you can read the previous section in our troubleshooting guide.
4. The child theme is not loading the latest style.css updates
If you make changes to a child theme’s style.css file and they don’t show up on your website, it might be due to a caching issue. Before you do anything else, clear your browser cache. If the error persists, you might need to manually flush your site’s cache or use a plugin.
If you’re not dealing with a caching issue, the parent theme’s style.css file could be overriding the child’s. One way to circumvent that problem is to add the !important property value to the CSS styles that aren’t loading.
Here’s how a CSS line using !important looks:
p { background-color: red !important; }The !important property value tells the browser that style takes precedence. If there’s conflicting CSS between the parent and the child, the !important value will ensure the child supersedes it.
How to get the most out of your WordPress child theme
If you followed our WordPress child theme tutorial, you’ll probably want to get as much value from your new theme as possible. Here’s how to get the most out of your WordPress child theme:
1. Experiment with customizations
The entire point of using a child theme is to be able to customize a theme without losing those changes when you update it. If you’re not experimenting with new styles and functionality using your child theme, you’re not getting the most value.
You don’t have to change the parent theme’s style entirely. But we recommend changing it by adding custom CSS and functions little by little and seeing what works and what doesn’t. If you’re not happy with how your child theme is developing, you can always delete the custom code and start from scratch.
2. Don’t forget to update the parent theme
Once you set up a child theme, you can safely update its parent without losing any custom code. That means there’s no reason not to update the parent as often as possible.
In fact, not performing regular updates can open your website up to vulnerabilities. It might also make you miss out on new features.
Sometimes, updating a parent theme can cause problems with your site if the new version contains code that conflicts with the child. The child theme’s styles should always take precedence over the parent’s. If they don’t, check out the child theme troubleshooting section above for instructions on how to fix the problem.
Frequently asked questions about WordPress child themes
If you still have any questions left about WordPress child themes and how they work, this section will answer them. Let’s start by talking about the differences between child and custom themes.
What’s the difference between parent, child, and custom themes?
The term “custom” theme can have two meanings. One is a theme that you create from scratch where you design every aspect of its style and functionality. You can also take an existing theme and modify it to suit your needs better, and you end up with a custom theme.
A child theme is a theme that WordPress recognizes as being different from its parent. The theme might look and function the same, but they’re different entities as far as WordPress is concerned.
Any changes you make to the child theme will override the styles it inherits from the parent. Those changes will reside separately in the child theme’s files and not in the parent’s.
Do I need to update the parent theme, child theme, or both?
Since child themes inherit their parents’ style and functionality, you only need to update the parent. Updating the parent won’t impact the customizations you make to the child theme since they load separately.
How do I know if I have a child theme in WordPress?
If you’re working on a WordPress website and customizing one of its themes, it’s a smart move to see if it already has a child set up.
In your WordPress admin panel, go to the Appearance → Themes tab to verify the active theme. If it’s a child theme, you should be able to see this in its name or description, and it should have the same featured image as its parent.
If you can’t find themes with matching featured images or a “child” name, open the wp-content/themes directory in the WordPress root folder. There could be a folder for a child theme inside, and it might not be loading due to problems with the style.css or functions.php file. In that case, you can use the child theme troubleshooting guide above to fix the requisite files.
Can I create a “grandchild” theme in WordPress?
A grandchild theme would be the child theme of a child theme. There’s no reason you’d want to set up a grandchild theme from a practical standpoint. Moreover, WordPress doesn’t enable you to use the enqueue function to import the style of a child theme for a new one.
If you want to test different variations of a child theme, you can set up multiple child themes with a single parent. You can do this by duplicating the child theme’s folder in the wp-content/themes directory and changing its name.
Additionally, you’ll also want to change the child theme’s name within its style.css file. That way, WordPress won’t try to load two themes with the same name.
Start customizing your WordPress themes
Customizing a WordPress theme might seem intimidating, but if you know the basics of CSS, you’re more than ready to go. Using a child theme will enable you to test customizations without altering the parent theme. More importantly, you won’t lose your custom code with theme updates.
Creating a child theme requires adding some code to WordPress. But you can copy and paste most of it and only alter a few key lines. From then on, all you have to do is flex your CSS skills.
Are you ready to try customizing your WordPress child theme? Jetpack includes a CSS editor to customize any theme that you want. Try out Jetpack today!
Jetpack 