How to Create a WordPress Child Theme

Child themes are extremely useful if you want to make changes to your chosen theme. They are the best way to modify specific theme features and appearance. Whether you are using a free or premium theme, you should always create a child theme for any further customization or modification you want to add.

In this article, we’ll show you how to create a child theme, how it works, and how to use it to customize your WordPress site. We will also cover the concept of parent themes and how they relate to child themes. To help you navigate, we divided the article into several sections:

What Is a WordPress Child Theme and Why Should You Create One?

Any customization of a WordPress theme carries with it certain risks. For example, if you install a WordPress theme and then change something in the code, the next update to the theme will override all those changes. This means that not only will your site revert to what it was before you’ve customized it, but all your work on making those changes will be in vain. This, of course, does not apply to the content you add—text or images you place on your site will not be affected by any updates.

Therefore, using child themes to edit, update, or customize existing WordPress themes is strongly recommended for anyone working on developing a WordPress website as they provide a safe way to maintain custom design and code.

A child theme represents a set of design rules, as well as functions for adding functionalities or modifying an existing theme’s layout. So, a child theme allows you to change small aspects of your website’s appearance while preserving the looks and functionality of your parent theme. To help you understand how child themes work, we’re going to first explain the relationship between parent and child themes.

A parent theme is a complete WordPress theme that includes all the WordPress files and resources required to make it work. All themes, except child themes, can be regarded as parent themes. On the other hand, a child theme in WordPress is one that works in conjunction with a parent theme and it inherits all its functionality and style from the parent theme.

Since the child theme inherits the characteristics of the parent theme, you can customize its code and layout without affecting the original functionalities. This way any changes you make will be saved with the child theme and you won’t be at risk of losing them when the parent theme gets updated.

Another reason to use a child theme is that it allows you to keep track of what you’ve customized since the child theme’s files are separate from the parent theme’s files. And, it can provide you with added protection in case of unforeseen editing errors.

This is why many premium theme developers, us at Qode included, create blank child themes that you can download along with parent themes.

How to Create a Child Theme Using a Plugin

You can use WordPress to create a child theme manually or you can install a plugin that will do it for you. There are several plugins created for this purpose and some of them are free. We will show you how to create a child theme using the Child Theme Configurator plugin. You can use it, or a plugin of your choice, to create a child theme.

After installing and activating the Child Theme Configurator plugin, you will be able to find it under Tools > Child Themes option in the admin panel. Next, select the parent theme you want to use and click on the Analyze button.

The analysis will return information about the suitability of your chosen theme being used to make a child theme. Moreover, you will get information about additional settings options.

You only need to follow the plugin’s setup steps through to the end and then click the Create New Child Theme button.

It might take a few moments for your child theme to be configured, so just wait until the plugin finishes. Then you can use the preview child theme option to check how your child theme-based site will look before activating it.

Creating a WordPress Child Theme Manually

The first thing you need to do when you start making your child theme manually is create a new folder where you’ll keep its files. Name this folder however you like; it’s common to just add a -child as a suffix to the parent theme’s name. We will apply this method in our example and name the child theme’s folder boldlab-child. When you’re done, you should save your folder to the server in the /wp-content/themes/ directory of your WordPress site.

To do this, you can access the server using your hosting account and the File Manager option or connect to it using FTP. In the following steps, we’ll be using FTP and the FileZilla client software to connect to the server.

Once you upload your folder you can proceed to add two essential files to it. Those are the stylesheet and function files and the child theme won’t work without them. Of course, you can add more files, but these two mustn’t be omitted.

Stylesheet

If you have a testing environment (localhost, for example) or a staging site, we recommend that you first place your child theme’s folder there. And then add the files which you’ll be modifying with your custom code. That way, you can make sure that everything is working properly before transferring the child theme to the live server.

The first file you need to make for your child theme is a stylesheet. Name it style.css (pay attention to the extension, it needs to be .css) and open it in your preferred text editor. Then enter the following text:

/*
Theme Name: Your Child Theme Name
Theme URI: https://example.com/your-child-theme
Description: Child theme for your Parent Theme
Author: Your Name
Textdomain: yourchildtheme
Author URI: https://yourwebsite.com/
Template: childtheme
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html 
*/

This text does not constitute code and it won’t run any kind of function on your site or provide any functionalities. It’s written using CSS’s block comment syntax and its sole role is to provide WordPress with information about the theme. This text is added for every theme as it helps WordPress recognize them.

To clarify what each line of text represents, we’re going to go through them individually and explain in more detail.

Out of all of these lines, only the Theme Name and Template are mandatory. The most important information for a child theme to have is the Template line; without it, the child theme won’t function as a child theme. And this line is only used with child themes. Generally, everything except the Theme Name and Template lines can be left out or left blank if you prefer.

We’ve entered the following text into our child theme’s style.css file:

As you can see, we omitted the lines with tags and license. Since we are creating a child theme for an already installed parent theme, we have these properties in the parent. You can add them if you need to, especially if you are creating a custom child theme.

Now that we’ve seen what each line represents, you can go through them and add your own child theme information. When you’re done, save the changes you made to the file.

Functions File

The next step in using WordPress to create a child theme is inserting a functions file. This is necessary to let you keep the parent theme’s stylization even as you add a new one. Without it, your child theme won’t have styles at all.

You need to create a functions.php file in your child theme’s folder and then, using a text editor, enter this code:

<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; 
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

The code uses the wp_enqueue_style () function to enqueue the stylesheet from the parent theme, and the get_template_directory_uri () function to indicate where that file is stored.

If your style.css file contains CSS code, it’s necessary to call it using a function. Setting ‘parent-style’ as the dependency will allow the stylesheet of the child theme to be loaded after it.

Of course, you can edit this code freely and add the appropriate prefix for your function. In our case, we’re making a child theme using the Boldlab theme as the parent, and you can see what our code looks like in the screenshot below.

Once you’ve customized the code to fit your needs, save all changes made to the file.

Then, since we prepared both the style and functions file, we can take a look at our child theme. You can do so by logging into your WordPress dashboard and going to Appearance > Themes.

As you can see from the screenshot below, our child theme is here and it’s listed as a child of the Boldlab theme.

To make it look nicer, we’re going to add an image to it. You can use the screenshot.png file from the parent theme if you want to keep the same image for your child theme or you can add a custom image. However, you must name the image screenshot.png if you want it to show. We’re going to use our parent theme’s image by copying it into the child theme’s folder.

Now the child theme is ready and you can activate it via the WordPress admin panel.

From there on, you can use it to develop your site further.

How to Customize Your Child Theme in WordPress

If you want to use a child theme, you need to have basic knowledge of HTML and CSS to be able to make necessary changes. Also, if you want to add any new functionalities to your child theme then you will need some knowledge of PHP as well.

Additionally, we recommend that you test any changes beforehand using a local test environment and only then apply them to the live server. You can transfer your site to a local environment at any time. This will let you run tests or make changes that won’t be visible to users on the live site. When you’ve finished making and testing changes, you can migrate the site from the local environment back to the live server.

In the next section, we’ll show you how to stylize, add template files, and insert features to a child theme.

How to Stylize a Child Theme

To stylize your child theme, you need to add CSS code to the style.css file. The code you add determines how the appearance of a particular element or page on your website will be affected.

You can get a lot of help with stylization using built-in inspect tools found in all modern browsers. They are intended to help users inspect elements on a website. However, you can use them to view the HTML structure and CSS styling of any element on a page. For example, if you want to check the title style of a page, just right-click on it, and select Inspect (for Chrome). Different browsers have different names (e.g. Firefox uses Inspect Element) for this tool, so look for the option with inspect in its name.

The Inspect tool will show the page elements and code in a section of the display. In Chrome, it will be on the right and you’ll be able to see the selector used for styling as well as the CSS properties used for stylization. So, if you want to change anything in your child theme’s style, then the easiest method is to copy the selector you like and adjust it to get custom styling for your child theme’s style.css file.

We’ll show you how to do this by changing the color of the title in the image above. We’ll copy the class used for stylizing titles and simply paste and adjust this code in the style.css file of the child theme to get new title styling.

If you recall, we mentioned earlier that WordPress will first call the parent theme’s stylesheet and then the child theme’s stylesheet. This means that if you have the same element styled differently in both stylesheets then the child’s stylesheet will override the parent’s. That applies only when you use the same selectors. Using the same title example as earlier—our child’s font color will be green. We used the same selector, so even though the parent’s style has a black font, by setting the child’s color to green we overrode the original settings.

You can apply the same principle to any element on the page, just remember to clear the cache after saving the change so you can see it in the browser.

How to Add Template Files to a Child Theme

Much like you can add CSS code to a child theme and override styles from a parent theme, you can use the same principle for template files. You can utilize them to create your own layout and change the structure of elements on your website.

Your new template file must have the same name and path as the one in the parent theme. Therefore, we recommend that you always copy the template file from the parent theme to the child theme first and only then modify it as you like.

The main template files are located in the theme directory. Among those, the single.php is a template file that allows individual blog posts to be displayed and page.php is the template for displaying pages on your site.

Every part of your website is managed by a different template file. They are located in the theme folder and are usually named after the part of the website that they manage. For example, the footer.php usually manages a website’s footer, the header.php file manages the header and navigation menus, and so on. Some areas of the website, such as content, are managed by multiple files and those are called content templates.

So, when customizing your child theme, you should start by selecting the theme file you want to change and copying it to the child theme’s folder. The path to that file in the child theme must be the same as the one in the parent theme. So it’s extremely important that you pay attention to where exactly the files you copy for modification are originally located.

For example, if you want to modify the page.php template file, copy it to the child theme’s folder, and then open it in a text editor to make your changes. So, you need to make sure to put the file in the top-level directory. However, if you’re copying a file from a subdirectory in your parent theme, then you need to create the same subdirectory in your child theme and place the file there.

Let’s say you want to include a logo image and some accompanying text at the end of each page; you can add them using HTML and you can choose a new class that will help you stylize these elements.

Then using the class you can style the elements you added in the style.css file. In the example below, we aligned our text to be in the middle of the page:

This is what our page looks like after the changes have been saved:

*Some premium themes, including those we make at Qode, are built with a custom framework. On the one hand, this makes them very user-friendly as the framework provides options that allow users of any level to change the look of each section of the website individually via the admin panel alone. You can use these options to choose multiple types for header layout, control how footer content will be displayed, manage content layout on pages, choose layouts for custom post types, and so on. On the other hand, this means that these themes include more template files, specific custom functions, individual coding quirks, and more. Therefore, if you want to change premium themes by making a child theme, you need to have advanced knowledge of WordPress and experience in programming.

How to Add Template Files to a Child Theme

You can use a child theme to add new functionalities or to override any existing functionality from the parent theme. All you need to do if you want to add a new function (that doesn’t interact with an existing function in your parent theme) is insert one into the functions.php file of your child theme. Just assign it the appropriate action and it will be ready to execute.

We’re going to show you an example of how you can add a new function to your child theme. We’ll write the name of a custom function without including any code inside it just to show you how you can add functions.

if ( ! function_exists( ‘new_function_from_child_theme’) ) {
new_function_from_child_theme() {
// contents of function here
}
}

Any function you plan to add to a WordPress child theme should first be identified with a conditional check. This serves to verify whether there is another running function with the same name. If one exists, then your custom function won’t run. Generally, WordPress will first run functions from the child theme and after them the functions from the parent theme. So, if the conditional check encounters a function with the same name in the parent theme, then simply won’t run the one in the child theme.

If you want to, you can override a function from the parent theme and stop executing it. We’ll show you how to do that in the section below. Let’s say you have a function in the functions.php file of your parent theme called parent_theme_function and you want to stop running it in the child theme. The function would look something like this in the parent theme:

function parent_theme_function() {
//contents of function here
}
add_action( ‘init’, ‘parent_theme_function’ );

To prevent it from running in the child theme, you need to add the following code in the functions.php file of the child theme:

function remove_parent_theme_function() {
remove_action( ‘init’, ‘parent_theme_function’);
}
add_action( ‘wp_head’, ‘remove_parent_theme_function’ );

The second function requires the addition of a wp_head hook that will run at the start of each page. You can then add a new function to the child theme to replace the one you removed.

Troubleshooting

The most common error you will encounter is probably a syntax error. It usually occurs because of an error in the code that you’ve entered.

In that case, you should start by checking a couple of the most common causes first. One of them is a function in the functions.php file of the child theme that draws on styling from the parent theme that hasn’t been called back properly. Another probable cause is incorrectly entered text for the Theme Name and Template lines in the style.css file. So if you experience problems with the child theme you’ve created, you should always check these things first.

And, if you’ve used modified template files, check again that the paths to the copied files in the child theme are accurate and that the callback to those files is correct.

If you used a plugin to create or configure your child theme, then you should consult the plugin documentation for any problems configuring the child theme or contact the plugin developer(s).

When NOT to Use a Child Theme?

Child themes are extremely useful, but that doesn’t mean that they are always the ideal solution. Here are some situations where you should think twice about using a child theme.

If you just want to make some basic stylistic changes with CSS, like changing text color, you don’t need to use a child theme, there are several easier options for adding custom CSS. Most premium themes allow you to add custom CSS code using the theme’s settings and options. You can also style your theme within the WordPress dashboard—add custom CSS code by going to Appearance > Customize > Additional CSS. Alternatively, you can install a suitable plugin for adding custom CSS.

Any changes that you can make using the options of your chosen theme or the WordPress admin panel should be made that way. Those include changing colors, layouts, adding and removing images, etc. All of these are easier to make with predefined options so there’s no need to use WordPress to create a child theme just for that.

When it comes to altering the structure or functionality of the parent theme, you should first carefully check all the features the theme already has. If you find you need to copy almost all files from the parent theme to modify them for your child theme then it may be better to create a new custom theme from scratch or to simply find a new theme that suits you better.

Final Thoughts

Child themes are a very useful addition to WordPress. They allow you to customize any theme without directly changing its code. You can use them to add new functionalities to a theme or change its looks by customizing, modifying, and creating new template files.

You only need to have a little knowledge of CSS, HTML, and possibly PHP to create your child theme in WordPress. And in return, you get a great way to explore options and play around with changes without worrying about spoiling your theme or breaking your site.