Yogesh Chauhan's Blog

How to create a Child Theme in WordPress?

in WordPress on March 16, 2021

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.

  [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.

  [child theme folder]/[functions.php]

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

function my_theme_enqueue_styles() { 
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css' );
        get_stylesheet_directory_uri() . '/style.css',
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:

  [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”.

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.

function my_theme_enqueue_styles() { 
    wp_enqueue_style('twenty-twenty-one-style', get_template_directory_uri() . '/style.css' );
        get_stylesheet_directory_uri() . '/style.css',
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

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
What’s a Strict mode in JavaScript?JavaScriptSubquery in PostgresPostgresSQL Inner JoinSQL/MySQLHow to remove special characters (dash, asterisk etc) from any string in PHP?PHP3 Types of Arrays in PHPPHPDebugging in WordPress Part 2: WP_DEBUG_LOG and WP_DEBUG_DISPLAYWordPress