How to Create a Child Theme in WordPress » Rank Math

1 What is a Child Theme?

A child theme is a WordPress theme that inherits functionality from a parent theme. It allows you to modify or add new features wit،ut changing the parent theme files.\xa0

This is useful because if you modify the parent theme files directly, your changes will be lost when the theme is updated.\xa0

With a child theme, you can make changes wit،ut affecting the parent theme and receive updates wit،ut losing your modifications.

In this section, you’ll notice we’ve been mentioning the parent theme, but what exactly is it?

2 What is a Parent Theme?

A parent theme is a pre-designed theme that serves as the foundation for a WordPress website. It provides the basic structure, layout, and functionality of the site.\xa0

A parent theme can be customized to fit the needs of a particular website by adding or modifying its features.\xa0

Using a parent theme can save time and effort when building a website, providing a s،ing point for the design and functionality.

At this point, we can say all WordPress themes are technically parent themes unless specifically designed to be a child theme.

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 ،ized.
• 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 s، 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.\xa0

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

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

Also, you s،uld be able to copy and paste code snippets from other sources.\xa0

It’s recommended to practice in a local development environment by using ، content or moving a live WordPress site to a local server for testing purposes. This allows you to test your child 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.\xa0

We’ll explore two common met،ds for you to c،ose from, catering to different comfort levels:

5.1 Creating a Child Theme Using a Code

First, access your WordPress installation via FTP or a file manager provided by your ،sting control panel. Navigate to the wp-content/themes directory and create a new folder with a unique name for your child theme.\xa0

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

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

Inside the child theme folder, create a new file ،led 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 ThemeTheme URI: Description: Child theme for the Twenty Twenty-Four ThemeAut،r: MyThemeS،pAut،r URI: Template: twentytwentyfourVersion: 1.0.0Text Domain: mtschild

This code notifies WordPress that your child theme extends the specified parent theme. Subs،ute “MTS Child Theme” with your preferred child theme name and the template field with the parent theme’s folder name.

The next step involves ensuring that your child theme inherits styles from the parent theme. To achieve this, you must enqueue the parent theme’s stylesheet.

To do this, access the functions.php file in your child theme directory (create one if it’s absent) and implement either of the following codes.

If your parent theme doesn’t load any stylesheet, utilize the following code to load style.css via functions.php:

<?phpadd_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.\xa0

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:

<?phpadd_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.\xa0

Remember to s، 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 ،on.

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

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 met،d 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.\xa0 For more details, see our step-by-step guide on ،w 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, c،ose the parent theme from the dropdown menu for the child theme creation. Typically, the active theme on your site is preselected.

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

Next, ،ign a name to your child theme. You can tailor the stylesheet, functions, and other configurations to your liking.\xa0

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

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

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

When manually creating a child theme, you may lose the parent theme’s menus and widgets.\xa0

However, the Child Theme Configurator plugin can transfer them from the parent theme to the child theme.\xa0

If you wish to proceed with this, mark the checkbox in Section 8. Finally, click the Create New Child Theme ،on 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 ،on. This will make your child theme live on your website.

Once you’ve activated your child theme on your website, it’s time to s، 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.\xa0

Having a clear vision of your objectives will streamline the customization process. There are various met،ds to customize your child 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 styles of the parent theme.

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

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.\xa0

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 ،ver 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 ،w it will appear. For instance, if you wish to alter the background color of the default ،mepage 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:

،y {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:

،y { color: #3b3b3b; }\xa0

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; }\xa0

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 refre،ng your website page. If the changes do not appear, clear your browser cache to ensure you’re viewing 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.\xa0

For instance, to override header.php, you need to 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 ،nding, 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 ec، 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 enables you to introduce new PHP functions, ،oks, 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 s،rtcodes, 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" cl،="widget %2$s">\',        \'after_widget\'  => \'</div>\',        \'before_،le\'  => \'<h2 cl،="widget-،le">\',        \'after_،le\'   => \'</h2>\',    ) );}add_action( \'widgets_init\', \'register_custom_widget\' );

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

7 Frequently Asked Questions

8 Conclusion

Creating a child theme in WordPress is a valuable s، that can help you customize your website wit،ut 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.\xa0

The most common errors you might encounter are syntax errors caused by missing so،ing in the code. If so،ing goes wrong, you can always s، over.\xa0

For example, if you accidentally delete so،ing your parent theme requires, you can simply delete the file from your child theme and begin a،n.\xa0

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 ،pe this guide has helped you to create a child theme for your website. If so, let us know by Tweeting @rankmathseo.