How to Create a WordPress Child Theme and Customize It

One of the biggest strengths of WordPress is its customizability, which is also true with WordPress themes. With them, users have a high degree of flexibility in creating and modifying their site’s appearance.

However, creating a complete theme from the ground up can be a difficult and time-consuming task. That is why most people prefer to create child themes for their WordPress websites.

This tutorial will explain why this practice is necessary and guide you through creating and editing your first child theme.

Download Ultimate WordPress Cheat Sheet

Why You Should Use WordPress Child Themes

Using a child theme is one of the most efficient ways to create a new WordPress theme based on an existing one while also maintaining most of its characteristics. As it uses the features and elements from its parent theme, there is no need to code everything from scratch.

Since a child theme inherits the characteristics of a master or a parent theme, it is possible to customize its code without breaking the original’s functionality. This way, if a theme receives an update, all of the changes you made won’t be overwritten.

Building a child theme is also relatively easy since you don’t have to dig too deep in your site’s root files. Tasks such as transferring files and customizing CSS files can be done using your control panel’s file manager and the WordPress dashboard.

Child themes also allow you to maintain certain visual aspects from the parent theme and keep them uniform across multiple domains.

Essential aspects, including constant security updates and patches, will also be taken care of, especially if you choose a parent theme from a reputable developer.

Another reason to use a child theme is that it offers a fail-safe solution if you ever misconfigure it. Plus, it allows you to efficiently track the parts you have changed since the files of a child theme are separate from its parent.

How WordPress Child Themes Work

A child theme is stored in a separate directory from its parent theme with its own style.css and functions.php files. These two core theme files are required to make your WordPress theme work, but the folder may contain other files as well.

Using the relevant .css and .php files, you can modify everything from layout styling parameters to the code and scripts used by a child theme, even if the attributes aren’t present in its parent theme.

When a visitor accesses your website, WordPress will first load the child theme and then fill the missing styles and functions using parts from an existing theme.

As a result, you’ll get the best out of your customized design without sacrificing the parent theme’s core functionality.

How to Create a Child Theme in WordPress

Before you start creating a child theme, keep in mind that a basic understanding of HTML, CSS, and PHP is essential since the process involves some coding. With numerous parent themes available, it is also important to choose one that suits your needs.

There are two common methods of creating a WordPress theme. Users can either use a plugin or build a child theme using custom code. Each option has its own strengths and weaknesses. In this tutorial, we will focus on creating a basic child theme manually.

We recommend installing WordPress locally when developing a child theme. Doing so will let you make changes to your WordPress site without any risk of damaging the live version. It also lets you create a child theme without buying a domain name or a web hosting plan. The following instructions use Twenty Seventeen as the parent theme, although it is possible to use another one if you prefer. We’re also going to use Hostinger’s File Manager to add and edit files, but FTP works as well

Let’s take a look at the step-by-step guide on how to create a child theme in WordPress:

1. Access hPanel and open File Manager.

2. Navigate to public_html -> wp-content -> themes folder. This is where your parent theme and child theme’s directory will be located.

3. Create a child theme’s directory by clicking the New Folder icon on the upper menu. Enter a name for your child theme and click Create.

4. Create a style.css file in the child theme folder. Populate its content with the following code:

/* 
Theme Name: Twenty Seventeen Child 
Theme URI: http://yourdomain.com
Description: Twenty Seventeen Child 
Theme Author: Your Name
Author URI: http://yourdomain.com
Template: twentyseventeen 
Version: 1.0.0
Text Domain: twentyseventeen-child
License: GNU General Public License or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/

This code contains basic information about the child theme, such as its name and what theme is used as its parent. Additional details like author and description are mainly used as identifiers if you decide to publish the theme.

5. Change all the values accordingly. The most important field is Template because it tells WordPress which parent theme your child theme is based on. Once done, click Save and Close.
6. In this step, you will enqueue the parent and child theme stylesheets. Create a PHP file named functions.php in the child theme’s directory, but do not fill it with the code from the parent theme’s file because it has to remain separate.

Begin the code with an opening PHP tag, then include the functions that will enqueue the parent theme stylesheet. Take a look at the example 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' );
}
?>

7. Visit your website and access Appearance -> Theme. Activate the child theme you’ve just made, and you will notice it looks the same as the parent theme.

How to Customize Your Child Theme

To personalize your child theme, you need a basic understanding of CSS rules and how to inspect elements so that you can pinpoint their CSS code and the class they’re assigned to.

There are a few methods to customize your child theme. Users can change the page layout by adding template files to the child theme folder. It is also possible to change the child theme’s style by adding custom CSS code.

Finally, child themes can also have new functionality that overrides their parent theme.

Now, let’s take a look at the basics of customizing a child theme. To do this, navigate to Appearance -> Themes and click Customize on your active child theme. When the Theme Editor opens, select Additional CSS.

Changing the Background Color

Insert the following CSS rule if you wish to change the background color of your child theme:

.site-content-contain {
    background-color: #DEF0F5;
    position: relative;
}

The value next to background-color: corresponds to the hex code of the color you want. In this example, we are changing it from white to light blue, so the result looks like this:

Changing the Sidebar Color

You can create a pleasing display of your widgets by adding some color to the sidebar with the following CSS code:

.widget {
background: #B9EBFA;
padding: 25px;
}

Again, don’t forget to edit the color code accordingly. You should get a result like this:

Changing Font Types, Sizes, and Colors

To change the font type, size, and color of your child theme, insert the code below:

p {
color: teal;
}
p {
font-family: Georgia;
font-size: 18px;
}

The p tag stands for paragraph. As you can see below, the above rule has changed the look of the paragraph’s fonts based on the values specified.

To change the font of other text parts, like titles or headers, inspect the elements to see their CSS parameters first. Let’s try changing the title’s font color:

1. First, right-click on the text and select Inspect. In this tutorial, we are looking for this code in the Styles tab:

.entry-title a {
    color: #333;
    text-decoration: none;
    margin-left: -2px;
}

This code represents the title for this sample blog post, including its color, decoration, and margin.

2. Copy and paste the code to the Additional CSS tab and change the values accordingly. In this example, we changed the font color from black to red by modifying the hex value.

This process is also applicable to any other elements you wish to modify.

Changing the Layout of Posts and Pages

Just like how the custom CSS of a WordPress child theme overrides the style of its parent theme, template files allow you to create your own layouts.

Each WordPress theme has a different page layout and structure, but most of them consist of sections like header, content, footer, and sidebar.

These sections are controlled by template files that correspond to their function. For example, the header section is typically handled by the header.php file.

The original template files are located in the parent theme folder. If you want to make a WordPress page template, all you need to do is copy the template file into your child theme’s folder and modify it.

Keep in mind that your new template file must have the same name and be in the folder that corresponds to the original.

Twenty Seventeen splits its template files into template-parts that are referenced in the primary template using the WordPress function get_template_part().

For example, if you wish to edit page.php, you can start by locating the template parts to see if those are the bits you need to edit. In our example file, line 28 reads:

get_template_part( 'template-parts/page/content', 'page' );

How do we read this? template-parts/page/ is the folder path. Meanwhile, content refers to the character in the file name before the hyphen, with page after the hyphen.

Together they form the full path of:

wp-content/themes/twentyseventeen/template-parts/page/content-page.php

Following the structure, if you want to change the layout of content-page.php, you need to copy it to your child theme folder and place it in this location:

wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php

Changing Global Styles in WordPress 5.9

Customizing a block-based child theme in WordPress 5.9 is easy. The global styles panel lets you change the theme’s color palette and background color without coding.

If you do want to code default styles, create a theme.json file for the child theme containing only a custom CSS block with style and setting definitions.

Using the Global Styles Panel

Go to the Gutenberg editor by navigating to Appearance -> Site Editor. Then, click on the black-and-white icon at the top-right corner of the screen to open the global styles panel.

The global styles panel will appear on the right side of the screen. Go to Colors to find the customization options for the background, text, and links global color.

To add custom colors, go to the Palette setting and find the Custom section at the bottom of the panel. Click on the Plus (+) icon, and the color picker tool will appear. You can add as many colors as you want without affecting the parent theme’s global styles settings.

Creating a theme.json File

Creating a new theme.json file will override the theme’s default color palette instead of adding a custom color.

We only need a small block of CSS code to do that – it won’t affect the parent theme.

Use your control panel’s file manager to open the child theme folder directory and add theme.json. After that, simply add the custom CSS code to the file.

For example, here is a code snippet to replace the theme’s default color palette:

{
"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "foreground",
					"color": "#ffffff",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#a88f32",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#fffb00",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#6fff00",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#000000",
					"name": "Tertiary"
				}
			]
		}
	}
}

Opening the global styles panel, you’ll see that the theme’s default color palette has changed according to the CSS code.

Use this method to change other default styles, such as the duotone filter and block styles.

Adding and Removing Functions

Another significant advantage of creating a child theme is the ability to have a separate functions.php file, which, just like when creating plugins, is used to add (or remove) certain features using PHP code.

The process will be straightforward if you want to create a new function that doesn’t interact or relate in any way with the ones already existing in the parent theme. All you need to do is add the code to your function.php file.

However, the process can be slightly more complicated if you want to override or change a function that the parent theme already has. You’ll need to override the parent theme’s functions manually. There are three main ways to do this:

• Override a pluggable function by adding a new function with the same name to your child theme’s function.php file.
• Augment an existing function by writing another function with a different name in the child theme’s function.php file and make sure it runs after the one in the parent theme.
• Unhook a function from the parent theme to prevent WordPress from running it.

For example, the following code will disable the right-click feature in your theme:

function your_function() {
   ?>
<script>
jQuery(document).ready(function(){
    jQuery(document).bind("contextmenu",function(e){
        return false;
    });
});
</script>
<?php
}
add_action('wp_footer', 'your_function');

Potential Issues of Using a Child Theme

Even though using a child theme can be beneficial, it may also come with some negative effects. Let’s take a look at three potential issues you might encounter when using a child theme on your WordPress website.

Slower Page Load Time

When a site uses a child theme, there is a possibility that it will load slower. This is because, during the loading process, WordPress will access the child theme’s stylesheet first and go to the parent theme’s stylesheet when it needs code that is not available.

This process of accessing two different stylesheets can have a negative impact on the site’s performance. However, the changes in page load time should be relatively small and go unnoticed by most users and search engine crawlers.

It is also possible to further minimize this load time by keeping the child theme code clean. All and all, remember to keep track of your site’s loading time if you decide to use a child theme and take the necessary measures when you notice a significant drop in speed.

Steep Learning Curve

The process of learning how the parent theme works is possibly one of the hardest parts of creating a child theme. That said, it’s a worthwhile investment.

Properly understanding the template hierarchy can be time-consuming, especially when the parent theme has a complex structure with unique hooks and filters.

Some parent themes also come with numerous features and options. While this can be a huge advantage for your child theme, dealing with too many features can be confusing and prolong your learning process.

In most cases, it’ll become easier once you fully understand the parent theme’s files and how they function.

Dependence on the Parent Theme

There is a possibility that the developer of a parent theme may stop working on an important feature or the theme entirely. They may also decide to make a significant change to the theme which can impact your child theme in some way.

If a developer drops a parent theme, your child theme will stop receiving updates and patches, exposing it to various security threats. This can be highly impactful to any site that uses your child theme – they may need to stop using it altogether depending on the severity of the situation.

Genuine and popular themes are less likely to be abandoned, however, so you might not have to worry about this issue.

How to Troubleshoot WordPress Child Theme Errors?

It’s possible you’ll run into issues when creating and implementing a child theme on a WordPress site. Let’s take a look at five common solutions to check if your child theme doesn’t work properly.

• Check the function.php file. If you don’t enqueue the child theme’s stylesheet in the function.php file, the site will load the parent theme instead. Therefore, make sure to double-check the function.php file after you make changes to a theme.
• Reference the parent theme. If you encounter the broken theme error, it might be because WordPress is treating your child theme as a standalone theme. Fix this error by referencing the parent theme’s function in your child theme’s CSS file.
• Utilize the !Important CSS rule. You might encounter a case where some elements of your child theme don’t function properly because the parent theme’s CSS code overwrites them. The most common workaround for this issue is to add CSS rules like !important to the child theme’s CSS sheet.
• Name theme files properly. Some errors can be caused by wrong file names. WordPress requires a specific name for some files like stylesheets. If you name it differently than style.css, the system won’t be able to locate and render it for the end user.
• Clear your cache. Caching might cause your web browser to display the parent theme or an older version of your child theme. The easiest workaround for this problem is to clear your WordPress cache and disable caching plugins if you use any.

Additional Tips and Tricks for Creating a Child Theme

The process of creating a new child theme can be complicated, especially for beginners. Here are seven additional tips that might help you create a child theme more easily:

• When you activate a child theme for the first time, consider doing it in a staging environment instead of a live website.
• Child themes need to have the same folder tree structure as their parent theme. WordPress will prioritize the file that comes first in the template hierarchy, either from the child or the parent theme.
• Make sure your new function has the same name as the parent theme’s function you want to override.
• The best approach when creating a child theme directory is to give it the same name as the parent theme with the addition of -child at the end.
• Choosing a parent theme framework from a reputable developer who regularly updates it is important to avoid inconvenience and significant problems with your child theme.
• Consider looking through the many child themes already created for the parent theme if possible. This can give you a general idea of the best approach for various tasks.
• Always remember to activate your new child theme once you upload it to WordPress.
• Keep in mind that a child theme is highly dependent on the parent theme, so make sure to keep every parent theme file in your WordPress theme installation.
• Don’t be afraid to start over if you encounter an error.

Conclusion

A WordPress child theme lets WordPress users create an entirely new project based on the existing parent theme without breaking its core functionality.

With a bit of simple coding and directory management, it is possible to modify the child theme as much as you want.

In this article, we have learned about the benefits of using a child theme on your WordPress site and how it works. We have also looked at the step-by-step guide to create a child theme and how to customize it.

Before proceeding with a child theme, however, users need to be aware of these potential issues when using one on their WordPress site:

• Slower page load time.
• Steep learning curve.
• Dependence on the parent theme.

For more WordPress development tutorials, check out our WordPress tutorials section. Don’t hesitate to leave a comment below if you have any questions.