A WordPress child theme provides a secure method to customize your theme’s code. When making direct edits to your theme’s CSS, HTML, or PHP, it is essential to use a child theme. Without it, you risk losing your changes whenever the theme is updated.

In this detailed WordPress child theme tutorial, you’ll learn everything that you need to know about WordPress child themes, including how to create one. This post will cover:

What is a parent theme in WordPress?

A parent theme is a fully functional WordPress theme that includes all the necessary template files and assets for the theme to operate correctly.

The only required template files for a WordPress theme are index.php and style.css (the main template and style files, respectively). However, most themes will also include various PHP files, localization files, graphics, JavaScript, and/or text files.

All themes are considered parent themes — except for child themes. Let’s take a closer look at what a child theme is and the benefits it offers WordPress site owners.

What is a WordPress child theme?

A child theme is a subtheme that inherits the appearance, design, and functionality of its parent theme. While you install it like any other theme, it depends on the parent theme to provide its core functionality.

When you make modifications to a child theme, these changes are kept separate from the parent theme’s files. Any customizations you make in the child theme will override the corresponding aspects of the parent theme.

It’s important to remember that a child theme cannot function independently; it must be installed alongside its parent theme. In the WordPress dashboard, you’ll be able to see the connection between the child theme and its parent theme.

Benefits of Creating a Child Theme

Creating a child theme allows you to modify the parent theme without losing your customizations.

If you were to make changes directly to the parent theme’s files, these changes would be overwritten each time the parent theme is updated. This situation leaves you with a difficult choice: either forgo updates, risking compatibility and security issues, or update and lose all your customizations and the effort you put into them.

The additional benefits of using a child theme include:

1. Easy Replication and Migration: Keeping your modifications in a separate child theme folder makes it straightforward to replicate or transfer your customizations to other sites.
2. Safe Learning Environment: Customizing a child theme provides a low-risk environment for learning and experimenting with theme development. If something goes wrong or you’re not satisfied with your changes, you can simply disable the child theme and revert to the parent theme, restoring your site to its original state.

Now that you understand the advantages of using a child theme, let’s explore the process of creating and customizing one.

How to Create a Child Theme in WordPress

Creating a child theme in WordPress involves just a few steps. We’ll walk you through each step in detail, using the default WordPress theme Twenty Twenty-One as an example. However, the basic procedure applies to any WordPress theme.

To create a basic child theme, you generally need just two files:

1. style.css
2. functions.php

In this section, we’ll cover how to manually create a child theme. While this method provides a deep understanding of how child themes work, you can also use tools and strategies to automate the process, which we’ll discuss in the next section.

Even if you opt for an automated method, understanding the manual process can give you valuable insights into how child themes function.

Step 1: Create a child theme folder.

First, you’ll need to create a folder to hold all the template files and assets for your child theme.

Initially, you can create this folder on your local computer. Later in this tutorial, you’ll learn how to install the child theme on your site by compressing the folder into a Zip file and uploading it via your WordPress dashboard.

Name this folder using the parent theme’s folder name with “-child” appended to the end. For example, if you’re creating a child theme for the Twenty Twenty-One theme, name the folder twentytwentyone-child.

Step 2: Create a stylesheet for your child theme.

Next, you’ll need to create the style.css file within your child theme folder. This file will contain all the CSS rules and declarations for your child theme and is essential for linking your child theme to its parent theme.

To create the file, you can use any basic text editor (such as Notepad) or a code editor (like Sublime Text).

At the very top of the file, you must include a required header comment to ensure the stylesheet functions correctly. This comment provides basic information about the child theme, including its connection to the parent theme.

Here’s what you need to include in the header comment:

1. Theme Name: This is the name of your child theme. It could be something like “[Parent Theme Name] Child” or a name relevant to your site. For our example, we’ll use “HubSpot Twenty Twenty-One.”
2. Template: This is the name of the directory containing your parent theme. It links your child theme to the parent theme. For the Twenty Twenty-One theme, the directory name is twentytwentyone. For other themes, it will typically be the theme name, but you might want to verify by checking the wp-content/themes folder or examining the parent theme’s Zip file.

Here’s an example of a complete header comment for a Twenty Twenty-One child theme:

/*
Theme Name: HubSpot Twenty Twenty-One
Template: twentytwentyone
*/

While the above two elements are mandatory for the child theme to function, you can include additional information such as a description, author name, version number, and tags. These details will affect how your child theme appears in the Appearance > Themes dashboard and can be useful if you plan to publish or distribute your child theme.

Including a version number is also recommended, as it will help you manage and enqueue your theme’s stylesheets effectively.

Notice the slashes and asterisks in the header comment. These symbols indicate that this code is “commented out” in CSS, so WordPress will not attempt to execute it.

You can add your custom CSS later when you’re ready to start customizing your child theme.

For now, click “Save” to ensure this stylesheet is saved in your child theme’s directory.

Step 3: Enqueue the parent and child themes’ stylesheets.

Now it’s time to enqueue your parent and child themes’ stylesheets. This step is crucial for ensuring two things:

1. Inheritance of Parent Theme Styling: By enqueuing the stylesheets, you ensure that the child theme inherits the parent theme’s styling. This way, when you activate your child theme, you won’t just see unstyled text.
2. Proper Loading Order: The child theme’s stylesheet will be loaded before the parent theme’s, without overriding it. This allows you to add custom CSS to your child theme that augments or replaces certain styles and functions of the parent theme.

This step can be a bit tricky because the code you need might vary depending on how the parent theme is coded. However, for most themes, you can use the following code in your functions.php file to enqueue the stylesheets:

*/
<?php
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; // This should be the handle used by the parent theme for its stylesheet

    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css'); // Enqueue parent theme stylesheet
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style)); // Enqueue child theme stylesheet
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>
*/

Step 4: Install and activate your child theme.

Once you’ve created the two essential files — style.css and functions.php — you have everything required for a basic child theme.

To package the child theme for installation via the WordPress dashboard, you need to compress the child theme folder into a Zip file.

On both Windows and macOS, you can typically do this by right-clicking on the folder and selecting the option to compress or zip it.

Here’s how you can do it on macOS:

1. Locate the Child Theme Folder: Find the folder you created for your child theme.
2. Right-Click on the Folder: Control-click or right-click on the folder.
3. Select “Compress”: Choose the “Compress” option from the context menu. This will create a Zip file of the folder in the same directory.

For Windows users, the process is similar:

1. Locate the Child Theme Folder: Find the folder you created for your child theme.
2. Right-Click on the Folder: Right-click on the folder.
3. Select “Send to” > “Compressed (zipped) folder”: Choose this option to create a Zip file of the folder.

Once you have the Zip file, you can upload and install your child theme via the WordPress dashboard by navigating to Appearance > Themes > Add New > Upload Theme. Select your Zip file and click “Install Now” to complete the process.

Note: To set a custom image thumbnail for your theme, you can upload an image named screenshot.jpg or screenshot.png to your child theme’s folder. This is optional but helps to make your WordPress dashboard look more organized and visually appealing.

Currently, your child theme will appear identical to the parent theme. The next step is to start customizing it to suit your needs.

Step 5: Customize your child theme.

You can customize your parent theme through your child theme in three main ways:

1. Custom CSS

One of the simplest ways to make changes is by adding CSS to the style.css file in your child theme’s directory. This allows you to adjust the color scheme, padding, typography, and other fundamental design elements of the parent theme. Simply add your CSS rules below the header comment in the style.css file. Your custom CSS will override the styles defined in the parent theme’s stylesheet.

2. Code Snippets in functions.php

To modify the functionality of the parent theme, you’ll use the functions.php file in your child theme’s directory. This is where you can add custom functions to extend or alter the behavior of your site.

For example, if you want to enable post formats (such as notes, links, galleries, quotes, images, or videos), you can add the following code to your functions.php file:

<?php
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote', 'image', 'video' ) );
?>

You can include as many functions as needed between the opening and closing PHP tags in this file.

3. Custom Template Files

If you need to modify specific templates, such as the template for individual blog posts or the site’s header, you can do so by creating custom template files in your child theme. This approach requires a good understanding of PHP and HTML, as well as the WordPress template hierarchy.

To edit a template file:

1. Copy the Template File: Copy the template file from the parent theme’s folder to your child theme’s folder. For example, to edit the single post template, copy single.php from the parent theme to your child theme.
2. Make Your Edits: Modify the copied file in your child theme’s directory. WordPress will use the child theme’s version of the template file instead of the parent theme’s.

Since you’ve placed the template file in your child theme, it won’t be overwritten when you update the parent theme.

Final Steps

Once you’ve made your customizations, test your site in a WordPress staging environment to ensure everything works as expected. After confirming that your changes are functioning properly, you can push them live.

And that’s it! Your child theme is now set up and customized according to your needs.

You can check out video here

You can check out more: