Presumably, you have seen people suggest you use a WordPress child theme when you start looking to make changes to your WordPress site’s theme, but, what is a child theme, and how important are child themes in your website?
We will give you some explanation and a step-by-step tutorial on installing a child theme and we expect it could help you decide on using one.
What is a WordPress Child Theme and What is the Benefit of Having One
A WordPress child theme is a child of an existing parent theme that provides a chance to safely make changes to your parent theme without editing the parent theme itself.
A child theme requires a parent theme to be installed as well, so a child theme can’t be a standalone theme. A child theme inherits most/all of the design settings by pulling them from the parent theme, in a situation where you make a change to the child theme, that change will override the settings in the parent theme.
You might wonder, why not just change directly to the parent theme?
You need to keep your theme up to date if you want to keep your WordPress site secure and perform better. If you customize your site by editing your theme directly, then that means every time an update comes out and is applied, you will override all of your changes, and that’s a pretty awful experience right?
Aside you don’t have to worry about the theme update, if you have a child theme that also means:
- You can make all changes in the child theme without worrying about losing any of your work
- Easier to keep track of all of your modifications and tweak them as needed in the child theme
- You can easily go back to the parent theme design anytime by disabling the child theme
How to Create a WordPress Child Theme
Now, let’s get into the more practical part of this tutorial. We will show you how to create a WordPress child theme with two methods:
- Using a Plugin
- Using the manual method.
Creating a WordPress Child Theme Using Plugin
We recommend that you make a full backup of your site before proceeding. Or, ideally, set everything up on a staging site.
In this tutorial, we choose the Child Theme Generator plugin to create our child theme. It has an active install of over 300.000 which makes it the most popular option for creating and customizing a child theme.
Let’s start by installing and activating the plugin from WordPress.org. Next, from the WordPress dashboard, go to the Tool menu → Child Theme to create the child theme.
Select the theme for which you want to create your child’s theme in the Select a Parent Theme setting then click the Analyze button.
Once the plugin analyzed your theme, some additional options to configure your child’s theme will show up below the analyzed result. Each additional option has a brief explanation of what it does. However, you can leave it as default if you’re not sure about the options.
Once you’ve finished making your choice, click the Create New Child Theme button to create a new child theme.
Then, after you got the notice about successful child theme creation, we still need to activate the child theme. Go to Appearance → Themes to apply the child theme.
Before activating it, let’s look at the Live Preview of what your site looks like with your child theme to make sure it’s working.
Once you are ready, click on the Activate button to activate the child theme.
You can use the tool included in the Child Theme Configurator plugin to help you manage your child theme, such as, viewing all of the associated files in both your child theme and parent theme and copying files from the parent theme to the child theme by going to the Files tab of the plugin’s settings to override the parent templates settings.
Creating a WordPress Child Theme Manually
We’ll assume that you know a little bit about PHP and CSS for this section or you can use the plugin method from the previous section if you do not feel comfortable with the instruction here.
To manually create a child theme, you need to have at least these two files:
- style.css ~ Child theme main stylesheet
- functions.php ~ This file will ensure the child theme inherits its parent theme styling by enqueueing the stylesheet from the parent theme.
Let’s start by creating the folder for your child’s theme. Open file manager on your web hosting service. Go to your WordPress installation directory, and open /wp-content/themes/ folder.
You can name the folder anything you want, however, you could name the child theme folder with the parent theme folder name by adding “child” at the end to help you remember it.
Continue by opening the folder and creating the first file, the style.css file. Open the file then add the following code at the very top of the file:
/* Theme Name: Twenty Twenty One Child Theme Theme URI: https://www.wppagebuilders.com/ Description: Twenty Twenty-One child theme Author: WPPagebuilders Author URI: https://www.wppagebuilders.com Template: twentytwentyone Version: 1.0.0 Text Domain: twentytwentyonechild */
The code inside the comment bracket (/*…*/) contains information about the child theme. The Template line must have the same line as your parent theme folder name as your child theme won’t work without this. Feel free to change everything after the colons except the Template line with your actual information.
Now, let’s create the second file, the functions.php file. Continue by opening the file and add the following codes:
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?>
Once you created both files, you can also add a picture in the child theme folder to give it a thumbnail to help you recognize the child theme when you search for it. You should name the picture with “screenshot” as its name for the thumbnail to appear in the theme selection.
The next step is activating the newly created child theme. The activation is just like you would on any other WordPress theme which is by going to Appearance → Themes from your WordPress dashboard. You may want to look at the Live Preview first before activating it.
More on WordPress Child Theme
A quick Google for a child theme of your theme may let your creative juice flow. For example, themes like Divi have a market for child themes on their website, and Astra has a tool to generate child themes.
Installing a Pre-Made WordPress Child Theme
To install a pre-made child theme is just like you would any WordPress theme and that is by going to Appearance → Themes → Add New and then click on Upload Theme to upload the child theme.
Note: The creator of the child themes may give you more instructions on how to install them to get the same style and appearance as their theme preview.
Customizing the Child Theme
You may want to customize your child theme (actually you’re using the child theme to override the parent), just as customizing a regular WordPress theme, there are multiple methods for it, here are some of the methods:
- By using the WordPress customizer in your WordPress admin screen
- By utilizing the theme builder from the page builder of your choice
- By adding a custom CSS code to your child theme’s style.css
- Override the parent theme’s template by copying the template file and then editing it on the child theme
For the last two methods, you will need to have some knowledge of CSS, HTML, and PHP.
However, if you only want to put some code snippets to add some function from the internet to your WordPress site, let’s take Metabox custom field generated code for example, then you can put them in the child theme’s functions.php file anytime without worrying about breaking or updating the parent theme.
Removing a WordPress Child Theme
To stop using your child theme, you can deactivate it just like you would on any other WordPress theme which is, by activating another theme in Appearance → Themes. Either a brand new WordPress theme or go back to the parent theme, just a reminder, if you move back to your parent theme default design, all of the changes from the child theme will disappear until you activate it again.
4 thoughts on “How to Create a WordPress Child Theme”
How do you create a WordPress theme with your own name from scratch, Any guide on this?
Hi Wellborn,
To create a WordPress theme from scratch you can follow this guide https://developer.wordpress.org/themes/getting-started/your-first-theme/
However, you need to have some knowledge of HTML, PHP, CSS, and JavaScript for it.
For creating a theme without coding you can use this guide
https://www.wppagebuilders.com/create-wordpress-theme-without-coding/
Thanks for the detailed explanations!
I just wanted to point out that it’s not obvious for a non-programmer that the lines of code to add to
style.css
should be at the very top of the file and be commented out with/*...*/
.Somehow, the theme/template you’re using here has cut them out — even using the copy code feature, the comment brackets are not copied, just the lines of text instead.
Note that similar cases exist on other articles here on WP Page Builders, with the difference that they’re more related to adding snippets of PHP code to existing files, which will already have the proper PHP opening tag at the very top. But here, in this case, the reader is instructed to create a new file from scratch, so it’s important to show them precisely what they need to place there.
Hi Gwyneth,
Thank you for your feedback, and we appreciate your observation. We understand that it might not be immediately clear for non-programmers about the specific placement of lines in the style.css file.
In order to enhance the clarity of our instructions, we have updated the articles and explicitly mentioned that the lines of code should be added at the very top of the style.css file. and also add a note about the use of comment brackets (/*…*/) to ensure that readers can easily identify it.
Thanks again for bringing this to our attention!