Learn How to Create a Child Theme in WordPress

We’re talking with WordPress platform. In WordPress, we use a main theme (Parent Theme). A Child Theme is a separate theme that we use to customize WordPress theme without impacting the Parent theme. In this way, Child Theme override the coding of Parent Theme but does not affect it. On the other hand, though Parent Theme gets updated, it does not affect Child Theme or Child Theme’s coding is not lost.

However, we’ve clarified everything about Child Theme in our previous post. This article ‘How to create and customize Child Theme‘ is the second step of that. If you haven’t yet read the previous one, just click the link below, read seriously and come back here-

Now we’re walking you through the practical approach of how to create a Child Theme in WordPress theme folder and customize it as per our necessity.

Mechanism to put a Child Theme to work

Where does WordPress theme folder reside?

You find it here:

WordPress core files→ wp-content→ themes

• Click the themes and you’ll find all of your themes enlisted along with the active one.
• Here you create a Child Theme folder. And name it after the name of Parent Theme. Suppose your active Parent Theme is clean-magazine. So it is best practice to name the Child Theme folder ‘clean-magazine-child’.
• Now click and open this folder and create a CSS file named style.css here.
• In the Header Comment section (discussed in next section) you’ll define Template name (Parent Theme) and Child Theme name in the relevant field. This will signal WordPress that this is a Child Theme under a Parent Theme.
• Now Enter your WordPress Admin area. Go to Appearance→ Theme. You see your Child Theme listed Inactive.
• Now Activate this Theme. And your theme is ready to be used.
• Now collect any CSS rule from Parent (shown in next section), modify and put it in Child’s style.css file. This will override the Parent’s CSS rule.
• Suppose, in Parent Theme, you sidebar color is gray. You like to change it to mintcream. Just change the color name in relevant field. You’re done.

This is the total mechanism of Child Theme’s functionality at a glance. Now have a careful look at each and every step practically in section below.

Practical way to create a Child Theme in WordPress

By using Child Theme technology, you can modify a Parent Theme to a customized WordPress theme of your own as if you developed the theme by yourself. For this you have to use a Theme Framework. So do the developers.

Beyond this, you should use a good WordPress theme as the Parent Theme though it is difficult to choose such one among thousands of free and paid WordPress themes options for you around internet. It is probable that the theme you are using in your WordPress site is already a Child Theme. However, for a rough modification as per your necessity you can use any of your activated theme as Parent Theme.

For this tutorial purpose, we’re going to use Twenty Twenty theme which is one of the default WordPress theme as the Parent Theme.

Enter your Cpanel. From there, File Manager → public_html → (WordPress core) wp-content → themes → (theme list).

In the theme list, we see the Twenty Twenty theme listed. Theme folder name is written as ‘twentytwenty’. In this page, we click +Folder button from upper menu and create Child Theme folder. We name it ‘ twentytwenty-child’. See screenshot below:

For now the twentytwenty_child directory is empty. We’re going to upload a CSS file in it.

For this, we open a text editor- Notepad++, open a new file tab. Then we save the file in Hard Drive by the name style.css. This CSS file will contain all the CSS rules and declarations that are necessary to modify the look of your theme.

But top of this file, we need to add the following lines usually known as Header Comment. This lines within comment tag tell WordPress basic info about the theme. This will also clarify that present theme is a Child Theme and it has a particular parent.

/*
 Theme Name:   Twenty Twenty Child Theme
 Theme URI:    https://www.netplanter.com/
 Description:  A Twenty Twenty child theme 
 Author:       Netplanter
 Author URI:   https://www.netplanter.com
 Template:     twentytwenty
 Version:      1.0.0
*/
 
@import url("../twentytwenty/style.css");

Now we paste these lines at the top of the style.css file and save it. Next, we upload this file in twentytwenty_child directory.

• Theme name: Write Child Theme name, needn’t be case sensitive as written in Child Theme folder name.
• Theme URI: Your website URL/Your Child Theme folder name/. It is case sensitive.
• Description: Self-explanatory
• Author: Self-explanatory
• Author URI: Your website URL
• Template: Parent Theme name. Case-sensitive.
• Version: Put 1.0.0 as first version code.
• The last line in this code imports the parent theme’s stylesheet to the child theme.

Now our Child Theme is ready to be used. But before that we need to activate the Child Theme. For this enter WordPress Dashboard. Go to Appearance → Themes. From here, by clicking Activate button, we make the Child Theme active.

Now if we write CSS code in the style.css file, it will override the Parent Theme’s similar CSS code and thus change our theme’s look and appearance.

But-

All these are reasonable questions for now. But we’ve already answered your questions in the next lesson of this tutorial. Just follow the link below:

Hope you enjoyed this tutorial and developed in yourself a decent sense of “How to create a Child Theme in WordPress.” If further question arises, feel free to comment.

 All WordPress Theme

 All WordPress