How to Create a Child Theme in WordPress

A child theme in WordPress is a powerful way to customize your website while preserving the core functionality of its parent theme.

Instead of modifying the original theme directly—risking updates overwriting your changes—a child theme allows you to make customizations safely and efficiently.

Whether you’re tweaking styles, adding custom functionality, or making structural changes, using a child theme ensures that your modifications remain intact when the parent theme is updated.

In this post, we’ll walk you through the steps to create a child theme in WordPress, from setting up the necessary files to activating your customized design.

So, without further ado, let’s get started.

1 What is a Child Theme in WordPress?

A child theme in WordPress is a sub-theme that inherits a parent theme’s design, functionality, and features while allowing you to make custom modifications.

Instead of altering the parent theme directly—which can lead to lost changes when updates are applied—a child theme provides a safe and efficient way to customize a website.

You can modify styles, templates, and functions with a child theme without affecting the original theme’s core files. This approach ensures that updates to the parent theme won’t overwrite your customizations, making it an essential practice for those who want flexibility without compromising stability.

With the help of a child theme, you can create a unique website design, experiment with changes, and improve functionality while maintaining the security and performance of your WordPress site.

2 What is a Parent Theme in WordPress?

A parent theme in WordPress is a complete and fully functional theme that serves as the foundation for a child theme. It includes all the necessary template files, stylesheets, and functions required for a WordPress site to operate.

When you install and activate a WordPress theme, it is typically a parent theme unless it’s explicitly designed as a framework for child themes. Developers create child themes based on a parent theme to customize designs and functionalities without modifying the original files. This ensures that when the parent theme receives updates, the customizations made in the child theme remain intact.

A well-coded parent theme provides flexibility, security, and performance while allowing users to extend its functionality through a child theme, making it a popular approach for customizing WordPress websites.

Here’s a key point to remember: A parent theme can exist and function independently, while a child theme always relies on a parent theme to provide the core functionality and features.

3 Why Use a Child Theme?

There are a few key reasons to use a child theme rather than modifying a theme directly:

• Creating a child theme protects your modifications from being overwritten when the parent theme is updated.
• It keeps parent and child theme files separate. This helps avoid confusion since files are organized.
• Multiple child themes can be used for different purposes, like changing styles or functionality. But note that a website can have only one active theme at a time.
• It’s also a great way to start developing a new full WordPress theme.

Note: Extensive customizations in a child theme can lead to management issues. For larger projects, creating a full/parent theme based on the original theme is often better than continuing to modify the child theme.

4 Pre-Requisites for Creating a Child Theme

Before creating a child theme, it is important to have some requirements in place. 

Firstly, you need a working WordPress installation and a parent theme for which you want to create a child theme. 

It is also helpful to understand HTML, CSS, and PHP, as you will change the code to customize the child theme. 

Also, you should be able to copy and paste code snippets from other sources. 

It’s recommended to practice in a local development environment by using dummy content or moving a live WordPress site to a local server for testing purposes. This allows you to test your child’s theme before implementing it on a live site.

Finally, it is important to have a website backup in case anything goes wrong during the process.

So, once you have all these requirements set, you can create a child theme. All you need to do is to follow the child theme setup process outlined in this guide.

But for this guide, we will use the Twenty Twenty-four default WordPress theme.

5 Creating a Child Theme in WordPress

Now that you understand the concept of child themes, let’s delve into creating a child theme in WordPress. 

5.1 Creating a Child Theme Using a Code

First, access your WordPress installation via FTP or a File Manager provided by your hosting control panel. Navigate to the wp-content/themes directory and create a new folder with a unique name for your child theme. 

For this tutorial, we will use the name “mtschild” for the child theme folder.

This directory acts as the primary storage space for your child theme components.

Inside the child theme folder, create a new file titled style.css. This file will contain the essential details for recognizing and activating your child theme. Open the style.css file and insert the subsequent code:

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

This code tells WordPress that your child theme is based on a specific parent theme. Replace “MTS Child Theme” with the name you want for your child theme, and update the template field with the folder name of the parent theme.

Next, you need to ensure your child theme uses the styles from the parent theme. To do this, you have to enqueue (load) the parent theme’s stylesheet.

To load the stylesheet, open the functions.php file in your child theme’s folder (create one if it doesn’t exist) and add one of the following code snippets.

If the parent theme doesn’t load any stylesheets, use the following code to load style.css through functions.php:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

This code can also function if the parent theme solely loads its stylesheet. 

However, if the parent theme solely loads the active theme’s stylesheet, you must additionally enqueue the parent theme’s stylesheet via functions.php using the code below:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

For the Twenty Twenty-Four theme used in this guide, we’ll apply the first code since the theme doesn’t load any stylesheet at all. 

Remember to start with the <?php tag when adding the code. Modify these codes as per your requirements, especially where the theme name mts_child_theme is utilized.

Once you’ve completed the steps above, log back into your WordPress dashboard and proceed to Appearance → Themes. Hover over the child theme and click the Activate button.

Since you haven’t made any changes to your child theme yet, your website will maintain the functionality and appearance of its parent theme. 

However, we will guide you on customizing the child theme to prepare you for further modifications.

This is the manual process of creating a child theme using code in WordPress. If this method seems complex, you can explore the plugin approach we’ll cover in the next section.

5.2 Creating a Child Theme Using a Plugin

Creating a child theme using a plugin is simple and easy. First, you need to install and activate the Child Theme Configurator plugin.  For more details, see our step-by-step guide on how to install a WordPress plugin.

Once the plugin is activated, go to the WordPress dashboard and navigate to Tools → Child Themes.

On the Select a Parent Theme tab, choose the parent theme from the dropdown menu to create the child theme. Typically, the active theme on your site is preselected.

Next, click on the Analyze button. The plugin will scrutinize the selected parent theme to determine whether it can generate a child theme and whether it requires its style.css file for appearance.

Next, assign a name to your child theme. You can tailor the stylesheet, functions, and other configurations to your liking. 

However, refrain from altering the settings until you reach section 7.

In section 7, click the Click to Edit Child Theme Attributes.

From there, you can input the details of your child’s theme.

You may lose the parent theme’s menus and widgets when manually creating a child theme. 

However, the Child Theme Configurator plugin can transfer them from parent to child themes. 

If you wish to proceed with this, mark the checkbox in Section 8. Finally, click the Create New Child Theme button to create the child theme.

Upon completion, the plugin will create a folder for your child theme containing essential style.css and functions.php files for future customization.

Before activating the theme, preview it by clicking the “Preview your child theme” link at the top of the screen to verify its appearance and ensure it doesn’t affect your site adversely.

After verifying everything is functioning correctly, click the Activate & Publish button. This will make your child theme live on your website.

Once you’ve activated your child theme on your website, it’s time to start customizing it. We will cover this in the next section.

6 How to Customize Your Child Theme

Before delving into customization, identify the elements of your website you wish to modify, such as styles, templates, functions, widget areas, or custom page templates. 

Having a clear vision of your objectives will streamline the customization process. There are various methods to customize your child’s theme, including:

6.1 Customizing Styles With CSS

Your child theme’s style.css file serves as a platform for tweaking the look of your website. Here, you can insert custom CSS rules to alter or enhance the parent theme’s styles.

Before proceeding, a basic understanding of HTML and CSS is necessary. 

You can effectively utilize your browser’s Inspect tool or directly copy styles from the parent theme’s style.css file.

To access the CSS codes of a webpage using your browser, simply right-click on the page and select Inspect from the options that appear. This tool displays the CSS style codes, allowing you to pinpoint the elements you wish to modify.

When you right-click and select “Inspect,” your browser screen will bifurcate, displaying the HTML and CSS for the page. 

Depending on your browser settings, the HTML and CSS details may appear either on the right side or at the bottom of the screen.

As you hover over various HTML lines, the Chrome inspector will highlight them in the Elements tab and display the corresponding CSS rules related to the highlighted element.

You can experiment by editing the CSS directly to preview how it will appear. For instance, if you wish to alter the background color of the default homepage of the Twenty Twenty-Four theme from #f9f9f9 to #6841ea.

Once you adjust the background color in the browser inspector, the alteration is temporary. To make it permanent, you must transfer this CSS rule to your child theme’s style.css file:

body {
background-color: #6841ea;
}

After inserting the code, remember to save your modifications. You can replicate this process for any other web page element you wish to customize.

For example, let’s say you want to modify the colors on your website. We can provide you with some CSS codes that will allow you to do so.

To change the text color to dark grey, add the following code to your CSS file:

body { color: #3b3b3b; } 

To change the heading color to blue, use the following code:

h1, h2, h3 { color: #007bff; }

For the background color of the header, use the following code:

#header { background-color: #f5f5f5; } /* Light grey background for header */

And for the content area, use this code to set the background color to white:

.site-container { background-color: #fff; } 

You can copy these CSS styles to the style.css file of your child theme either through your website’s child theme directory or from your WordPress dashboard.

When you add your CSS code, it will resemble this format:

After saving your changes, try refreshing your website page. If the changes do not appear, clear your browser cache to ensure you view the latest version of the CSS.

6.2 Overriding Template Files

While CSS customization controls your website’s appearance, child themes offer a more robust feature: overriding template files.

This advanced capability enables you to reshape the layout and structure of your website’s pages and elements. However, exercise caution as it demands a deeper understanding of WordPress templating, HTML, and PHP.

To override a template, copy the original .php file from the parent theme folder into your child theme, keeping the exact filename. 

For instance, to override header.php, copy the header.php file from the /parent-theme/ directory and paste it as header.php in the /child-theme/ directory.

You can now edit the header.php in your child theme.

Some common templates to override:

• header.php – Contains <header> tag and site branding, navigation, etc.
• footer.php – The closing <footer> tag and markup.
• page.php – Default template for pages.
• single.php – Template used for single posts.
• index.php – Homepage template.

For example, you can modify footer.php by displaying a custom copyright for your site:

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 Extending Functionality

The functions.php file in the child theme lets you introduce new PHP functions, hooks, filters, and code to expand upon the parent theme’s default features.

This flexibility empowers you to register custom post types, incorporate custom widgets, create new shortcodes, enqueue additional scripts, and more.

For instance, if you desire a dedicated section on your WordPress site for custom widgets, utilize the following code snippet to establish a widget area named “Custom Widget Area”:

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

After saving this code in your child theme’s functions.php file, navigate to your WordPress site and access Appearance → Widgets. You will notice that the “Custom Widget Area” widget is available for use.

7 Frequently Asked Questions

8 Conclusion

Creating a child theme in WordPress is a valuable skill that can help you customize your website without risking the loss of your changes during theme updates. While it may seem daunting initially, don’t give up too quickly if you make mistakes. 

The most common errors you might encounter are syntax errors caused by missing something in the code. If something goes wrong, you can always start over. 

For example, if you accidentally delete something your parent theme requires, you can simply delete the file from your child theme and begin again. 

Remember, with a little persistence, creating a child theme can give you the flexibility to create a unique look and feel for your website while maintaining the stability and security of your parent theme.

So, give it a try and see the difference it can bring to your WordPress website.

We hope this guide has helped you to create a child theme for your website. If so, let us know by Tweeting @rankmathseo.