How to create a Child Theme in WordPress?

Developers create themes all the time while developing WordPress or other CMS websites but, when it comes to changing the original theme, few of us create the child theme rather than modifying the parent theme.

Why should I create a child theme?

There are few benefits creating a child theme rather than just modifying the parent theme. Mostly because it’s easier to update the parent theme without worrying about your custom code change.

You can just keep the parent theme’s code files as they are without making changes and do all the customization in the child theme code.

The most important benefit of creating a child theme is that you don’t need to worry about your custom code removal or change while updating your parent theme.

How do I create a child theme?

Let’s go through the step by step process of creating a child theme.

Step 1: Create the child theme folder.

Let’s start with the first step. Creating the folder.

Go to your WordPress themes directory and add a new folder.

root/wp-content/themes/[add new folder here]

Step 2: Create the child theme style file.

WordPress requires you to have a style.css file and for all of your themes. If you’re missing the file then you’ll see an error in your WordPress themes manager page.

We don’t have one yet so let’s create the style.css file. Create the style.css in the child theme folder.

root/wp-content/themes/
  [child theme folder]/[style.css]

Here’s an article you can use to learn more about it: How to make WordPress main stylesheet (style.css)?

Let’s add the style.css file and add this code code below. Change the 👇 code as per your requirements.

/*
Theme Name: Your Child Theme
Theme URI: https://yogeshchauhan.com/themes/child theme name/
Author: Yogesh Chauhan
Author URI: https://yogeshchauhan.com/
Description: A Child theme created for so and so...
Version: 1.0
Template: Parent Theme Name
*/

The details above should be more than enough but you can always add more. Use this article to add more info: How to make WordPress main stylesheet (style.css)?

👉 Make sure to include “Template: Parent Theme Name” with an exact Parent Theme Name.

Step 3: Enqueue the Stylesheets of the Parent theme and the Child Theme

We have two themes now – the parent theme and the child theme. The idea is simple – inheritance of the style and addition of more style as well. So, we want WordPress to use the parent theme’s style along with the custom child theme’s style. For that, we need to enqueue stylesheets of the parent theme and the child theme.

Once we do that, WordPress will apply the child theme’s style on top of the parent theme’s style.

We can do that using the functions.php file inside the child theme. We don’t have one yet so let’s create the functions.php file.

Create the functions.php in the child theme folder where we added the style.css file earlier.

root/wp-content/themes/
  [child theme folder]/[functions.php]

Add the following 👇 code into the functions.php file.

<?php
function my_theme_enqueue_styles() { 
    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' );
?>

👉 Make sure to change “parent-style” with the same tag used by the parent theme for its wp_enqueue_style() function call.

Open your parent theme’s functions.php file following this path:

root/wp-content/themes/
  [parent theme folder]/[functions.php]

In the functions.php file, search (Ctrl + F or Cmd + F) for “wp_enqueue_style“.

Just like this 👇 screen capture from WordPress’s default theme “twentytwentyone”.

Now we have found the tag so let’s replace it. See below 👇 the updated code in functions.php code in child theme.

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

Step 4: Add the Child Theme Screenshot.

To make your child theme more personalized, we can give it a picture to identify with. For that all we need to do is add the picture in “.png” file in the same folder as the style.css and functions.php files.

Go ahead and add a picture or screen capture or whatever you want your Child Theme to be recognized with. Remember, it has to be a “.png” file.

Step 5: Activate the Child Theme.

Our Child Theme is ready to be activated now. From your WordPress dashboard, go to “Appearances > Themes” page and you’ll see the Child Theme listed along with other themes including the Parent Theme. hover on the Child Theme and click on “Activate”.

Yay! 🤩 We did it ✅

Step 6: Modify the style or templates.

Everything is basically same as the parent theme now. You can modify the Child Theme style using the style.css file or adding a seperate .css file and linking it via functions.php.

Same way, we can modify or add templates in Child Theme and it will be applied to the pages you want. For e.g. templates for specific pages or template for a post type. It all works!

Want to add functions? Use functions.php file.

Overall, everything works the same way we modify the parent theme but with a sense of security that updating the parent theme won’t delete your customized code.

Source: WordPress

Share this post