Found a WordPress theme you really like but want to customize its appearance a little? You can easily do this by writing some custom code in your theme’s CSS stylesheet. However, these changes may easily get lost when you update the theme.
To prevent this, you can create a child theme, allowing you to do as much customization as you like without running the risk of losing these changes when you eventually update the parent theme.
We’ll walk you through every step of the process. First, let’s clear up a bit of jargon.
What Exactly Is a Child Theme?
A child theme is a fully functional WordPress theme that inherits its functions and properties from another theme—its parent theme. When you create a child theme, you are able to leverage all the features of the parent theme without losing these features every time the parent theme receives an update.
There are three basic components that you'll need to create a child theme, and these will be covered in detail when we discuss how to make a child theme manually.
First, though, we’ll quickly cover how to make a child theme using free child theme generators, and by using a plugin.
Ready? Let’s get into it!
1. How to Create a Child Theme Using a Child Theme Generator
This is probably the easiest and most straightforward method of all. All you have to do is navigate to a child theme generator website, enter a name for your child theme, and that’s it.
Two of the more popular child theme generators are Astra Child Theme Generator and Child Theme Generator, which makes child themes for the popular Astra theme.
The Astra theme is a popular, lightweight, and fast WordPress theme that's suitable for building any kind of website. It's also one of the top free WordPress themes of 2021, so it's an all-around good choice for building your website. To use the Astra Child Theme Generator, you will first need to install the Astra theme.
To then create your new child theme, simply log on to Astra Child Theme Generator, enter the name you would like for your new child theme, click Generate, and that’s it!
Your new child theme will automatically download as a zip folder. Install and activate it as you would any other theme.
2. How to Create a Child Theme Using a Plugin
This method is almost as straightforward as using an online child theme generator. There are numerous child theme generator plugins but we’ll recommend that you use one of the more popular options—Child Theme Configurator.
To get started, install and activate the plugin from the WordPress repository. In the left-hand panel, hover over Tools, then click on Child Themes.
To create your child theme, tick CREATE a new Child Theme, then scroll down and select the parent theme. Click Analyze and wait for the results. If all your theme files are in order, you will then see additional options on the screen. You can ignore most of these or make changes where appropriate.
To bring your child theme to life, simply click the Create New Child Theme button at the bottom of the screen, and that’s it.
Navigate over to Appearance > Themes, and your new child theme will be visible and ready for activation.
Using a child theme generator or a child theme generator plugin are both great solutions that are easy to implement and don't require advanced technical skills. If you'd like to get under the hood and play a more active role in creating your new child theme, however, the next method is for you.
3. How to Create a Child Theme Manually
Creating a child theme manually is a lot more engaging than either of the previous two methods, but it's still relatively simple to accomplish.
You will need three basic components: a theme file for your child theme, a style.css stylesheet, and a functions.php file.
1. Create a Theme File
You can do this in cPanel or using FTP. We recommend using cPanel if your hosting service provides it. Log in to cPanel > File Manager > Files > Public_html > wp-content > themes.
Click on the +Folder button from the top menu to create a new folder. You must name this after the name of the parent theme, adding "-child" at the end. If you're using the Twenty Twenty-One theme, for example, this would look like: "twentytwentyone-child".
2. Create a Style.css file
Style.css is the default WordPress naming convention for CSS stylesheets. This is where all the CSS for your child theme will go, but you might hold off on creating the CSS until you've fully set up your child theme.
To create a style.css file, simply click on the +File option from the top menu. The stylesheet must go in the new theme folder you just created. In the new file, paste in the following comment:
/*
Theme Name: Twenty Twenty One Child
Theme URI: http://example.com/twenty-twenty-one-child/
Description: Twenty Twenty One Child Theme
Author: Jane Doe
Author URI: http://example.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: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentytwentyonechild
*/
This is a comment and will not be executed at runtime, but without it, your CSS stylesheet file won't work. Save the file as style.css.
3. Create a Functions.php File
Just as you added a new file and called it style.css, add a new file and call it functions.php. Paste in the code below:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
That's it! You now have all three components required for your child theme to work. To finalize it, head back into your WordPress backend and activate the theme just as you would do for any other theme.
Getting Started with WordPress Child Themes
Child themes are a useful way to make changes to your WordPress theme without having to worry about updates to the parent theme. In this article, we've shown you three different, easy-to-use methods of creating a child theme. If all you're after is creating some custom designs for your web pages, an effective alternative is to use a WordPress page builder.