Child theme in WordPress (A complete roadmap) 2020

What is a child theme in WordPress and why do we need to use that?

Although we have a lot of prebuilt WordPress themes which we can use to design beautiful websites. But most of the time we need some modification in design or changes in the functionality of our website. We can do that by modifying our theme’s files like function.php, single.php, archive.php, style.css and other files vary as per theme. 

Sounds ok, but what if we need to update our theme which is usually we have to do after some time. Theme updation will override our custom changes. To prevent this we need to create a child theme which just inherits the features of the parent theme.

Parent theme is the theme which you are using primarily and which you just install and update. You don’t need to change anything into the parent theme. If you need modification or any functionality changes you can achieve that by using a child theme.

Important: It is important to know that the parent theme consists of all files that are required by the theme but the child theme will only need to include the files where we want to customize anything.

Features of child theme in WordPress

1. Portable changes
2. Separate from main theme files
3. Allow main theme to update without affecting your custom changes
4. It helps to Improve theme development knowledge and how themes internally work
5. You can reset your customization by deactivating the child theme without losing actual theme design.

So, without extra blah, blah let’s get started

How to create a child theme in WordPress?

It is very easy to start with a child theme in WordPress. Because you can create a child theme only with three things: a child theme directory or a folder where all files will be saved, style.css and function.php.

Create the child theme directory

So, as I stated that first thing is directory, to do that follow the below steps

1. Open the wp-content/themes directory
2. Create a new folder with the name of anything that you want but don’t add spaces to it’s name instead you can use hyphens. One more tip, it will be best practice if you use the same name for the child theme as it’s parent theme just append -child to it. For example if you are using twentytwenty WordPress theme then the child theme will be twentytwenty-child.

    How’s it sound?

Create the css file

Now the next step is to create the style.css file in the child theme directory. To do that follow the below steps,

1. Go to the child theme directory and create a new file with name style.css
2. Now copy & paste the following code into the file then you can add custom CSS here as per your need.

/* 
Theme Name: Twenty Twenty Child 
Theme URL: http://example.com
Description: Twenty Twenty Child 
Theme Author: author name
Author URL: http://authordomain.com
Template: twentytwenty
Version: 1.0.0 
Text Domain: twentytwenty-child 
*/

Create the function file

After the stylesheet, function.php is the last required file that you have to create. After this file you can create a file where you want to modify something otherwise your child theme is ready.

1. Go to the child theme directory and create a new file with name function.php
2. Copy paste below code to enqueue the parent theme’s stylesheet.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri() );
} 
?>

Stylesheet loading is now recommended using hooks in function.php, if you are using @import in the style.css then it can slow loading of css and also possibly load the same file multiple times.

That’s it, these two files are the only required files to create the basic child theme. WordPress uses the files from the parent theme which is not present in the child theme. To understand this system, how WordPress uses the files if one is not present, you must understand the template hierarchy.

Though, you can play with code without reading about template hierarchy but if you understand this it will help you a lot to work with WordPress template structure.

Add the screenshot of parent theme

The last thing but optional, add a screenshot of the parent theme to the child theme’s directory. So, follow the below steps,

1. Activate the parent theme
2. Take the screenshot of parent theme
3. Copy that png file to the child theme’s directory at root level
4. The screenshot should named like screenshot.png

Activate the child theme

Now when you are done with the above things, follow the below steps to activate the child theme.

1. Login to the wp-admin
2. Go to the dashboard and select the appearance from the side menu
3. Select the themes and then you can see the child theme listed with other installed themes
4. Select the child theme and click on active button, it will activate the child theme

That’s it, now you are ready with your child theme.

Customize the child theme in WordPress

It’s time to know the basics of child theme customization. WordPress tries to find the required file in the child theme first and if not found then it will find it in the main or parent theme.

That means, if you want to customize any file from the parent theme you have to create that file into the child theme directory but with the same directory structure. 

For an example,

If you want to edit the content files in the website then you have to follow the below steps,

1. Locate the files in the parent theme
2. Like content.php found in /template-parts
3. Now you have to create the same directory into the child theme folder
4. Then you can create the files like content.php inside that directory
5. One thing to keep in mind is that WordPress will look at the child theme first for any file then fallback to parent theme if file not found in the child theme.
6. If same name files are found in both the child theme and also in parent theme then WordPress will use the child theme’s file.

Though we can add code to the head tag or before closing the body tag via function.php without using header.php and footer.php file. For that we need to use “wp_head” and “wp_footer” hooks.

Sum-up

Now, we know that,
What is a child theme in WordPress? 
Why need to use a child theme in WordPress?
How to create a child theme in WordPress?
Activate the child theme in WordPress.
How to customize WordPress website with child theme?

If you have any query, please leave a comment.