Your Guide to Create a WordPress Child Theme Manually

In Web Designing Skills, Webmaster Skills
Child Theme

WordPress is a feature-rich CMS platform. No wonder why so many webmasters choose WordPress as the base CMS to create websites and blogs. WordPress also gets reliable supports from the developers worldwide to further develop the WordPress to become a powerful CMS. They produced thousands of plugins and themes that every webmaster can get either free or paid. There is no doubt about the completeness of your website or blog features if the CMS you choose is WordPress. An important feature of WordPress is Child Theme. This article will discover more the functions of a Child Theme, why you should create it, and how to create a child theme.

However, there would be times when you don’t satisfy with the appearance of your WordPress theme. Moreover, if the theme is free, it would not as complete as premium or paid themes. Commonly a free theme is usually less attractive than premium themes. So, if you decide to use a free WordPress theme, you need to do some customizations to make if looks like what you want. But sometimes a premium theme also needs customizations.

Before you change the appearance of your WordPress theme, firstly, you should consider what if there would be a theme update notice. Because most of WordPress theme developers would notify you to upgrade the theme if there is any change or update to its features. Theme upgrade notifications are not only for the premium theme. Because there are also many free WordPress themes need upgrades periodically.

You might have known such case if you previously have ever made some changes to your blog them, for example, changing the header color, home appearance, and so forth. Then, when you are upgrading the theme, the appearance of the theme returns its normal view (default appearance). Surely, it’s such a futile effort. Is it?

Is It Good to Ignore the Upgrade of a WordPress Theme?

At a glance, you might think to ignore the theme upgrade when there is an update notification from the developer of the theme. Such decision is not good. You’ll get many disadvantages if you don’t upgrade your WordPress theme because you will not know the latest features of your theme. Moreover, most of the WordPress theme’s upgrades are to improve its security.

Upgrading all elements of WordPress such as the CMS, theme, and plugins are mandatory without any excuse if you want to secure your website or blog.

So, what about the solution to avoid our customizations get changed to its default appearance? The solution is to create a Child Theme.

What is a WordPress Child Theme?

WordPress Child Theme is the feature that allows us to change the appearance of a theme without having to modify the original code of the recent theme. When you run your website or blog, it will not execute the code from the parent theme, but from the Child Theme.

Therefore, knowing how to create a Child Theme and how to use it are really important for every webmaster.

The Child Theme you created will be placed similarly to its parent theme. So, it doesn’t mean you place it in the parent theme. Take a look at the following scheme.

Child Theme Scheme

How to Create a WordPress Child Theme and How to Use It?

Here’s your guide to creating a child theme manually. Basically, in creating a Child Theme, there’s an important element you have to create, which is a style.css. In the style.css of a WordPress theme, you can work on its coding such as adding or changing some codes to change the font color, background, image view, and so on. You can ignore the other elements for a while. It would be a good idea to use a Child Theme to start a web design project using WordPress, because you can work on the files and folders without changing its original source. Means, in case the theme developer release and update, you will not loose your own web design customizations.

The Tutorial to Create a Child Theme

First step: Make a New Name for the Child Theme

To create a child theme, firstly, you have to know the name of the parent theme of your website or blog. For example, let’s the name of your current theme is Point, from MyThemeShop. Then you need to think about the new name of your Child Theme that you would like to, e.g. Bonbon.

So, make a new folder on your computer and place it wherever you want. Make a new file using Notepad and name it as style.css (leave it empty first). Insert the file into the folder you just made.

Step two: Make some settings to the style.css file

Open the stule.css and input the following code into the file:

 Theme Name: Bonbon
 Theme URI:
 Description: This is my first WordPress Child Theme.
 Author: David Steward
 Author URI:
 Template: Point
 Version: 0.0.1

The explanations of the code above are as follows:

  • Theme Name: = (Required) The name of your Child Theme;
  • Theme URI: = (Optional) The URL of your website or blog that will be used to install the Child Theme;
  • Description: = (Optional) The description of your Child Theme;
  • Author URI: = (Optional) The URL of your website;
  • Author: = (Optional) Your name;
  • Template: = (Required) The folder name of the parent theme (case-sensitive);
  • Version = (Optional) The version of the Child Theme you just made.

You must fill the right name of the parent theme, and indeed it is a case-insensitive. Means you need to correctly fill exactly the same to the parent theme of your website or blog. Pay attention to the capital letters and small letters. Usually, the theme name is written without space, e.g. point is different to Point or POINT.

Then, include the following code:

@import url("../point/style.css");

Adjust the name of the Parent Theme you use.

After adding the code and making changes as necessary, then you now need to import the entire code of the style.css of your parent theme to the style.css of your Child Theme.

Now you are going to customize parts of the theme. You may customize any part of the theme as you need how it would look like. A concrete example, filling the code to the style.css of your Child Theme looks like the following;

 Theme Name: Bonbon
 Theme URI:
 Description: This is my first WordPress Child Theme.
 Author: David Steward
 Author URI:
 Template: Point
 Version: 0.0.1
 */@import url("../point/style.css"); 
/*-[ Start your creation here ]-----------------------*/

Step Three: Organize other Files and Folders

So, what if we have ever changed or added a certain code into the files and folders of the parent them? Will they be lost if upgrading the parent theme? The answer is yes, of course!

Create a function.php file for the Child Theme

Suppose you have ever added any specific code into the functions.php, such as Custom CSS Widget, Removing Comment Auto Link, Limit the Number of a Comment Characters, and so on. Then you must also create a functions.php file for your Child Theme.

In creating a functions.php file is different to creating a style.css file. Create a functions.php file using Notepad and then fill it with a specific code you’d like to add. It means you are not necessarily to add all of existing code in your parent theme to the Child Theme.

However, before placing a specific code that will be added to the functions.php file, it must begin with “<?php” and end with “?>” (without quote). You may want to add a Custom CSS Widget code and the code to Limit the Characters Number of the Comment. Then, the result would be:

/* Limit the Caracters in Comment
add_filter( 'preprocess_comment', 'wpb_preprocess_comment' );
function wpb_preprocess_comment($comment) {
if ( strlen( $comment['comment_content'] ) > 2000 ) {
wp_die('The comment is too long. Please, make a comment not more than 2000 characters.');
if ( strlen( $comment['comment_content'] ) < 100 ) {
wp_die('The comment is too short. Please make a comment at least 100 characters.');
 return $comment;
/* To Non-Active Emoji
remove_action ('wp_head', 'print_emoji_detection_script', 7);
remove_action ('wp_print_styles', 'print_emoji_styles');

Add other files to the Child Theme folder

“The Child Theme will only execute all of the files from the Child Theme folder.”

Whereas, for the other files such as comments.php, archive.php, header.php, footer.php, single.php, sidebar.php, etc, except functions.php, when you want to make changes to them, then you should include all of their code into the files your Theme Child should. Then you may make some changes like as changing the style.css file.

Now the question is, how about the specific folders such as images and font folders? Feel free to copy and paste the images folder of the Parent Theme into the Child Theme.

Likewise, if you have used Font Face for the theme Typography design appearance, then you can also copy and paste into the folder of Child Theme.

For a better Child Theme, you can also add the screenshot. A screenshot file for the theme is usually in .png format and has a size of 880 x 660 pixels.

Step Four: It’s Time to Upload the Child Theme

Finally, assume that you’ve managed to create the Chile Theme, named Bonbon, which consists of style.css, a screenshot, other files, and other folders. Then, you need to compress the Child Theme folder into a zip file using a compression software program such as WinRAR. Then, upload the new Child Theme through the cPanel of your hosting or dashboard wp-admin. Later, after you successfully upload Child Theme, then enable it from Appearance>Themes.

Subscribe to Our Newsletter!

Love Skillonpage? Get exclusive personalised content right in your Inbox. It's free!

You may also read!

How to make a text reveal effect in Premiere Pro

How to Make a Text Reveal Effect in Premiere Pro CC

This article will guide you how to make a text reveal effect in Premiere Pro. Text Reveal effect is

How to Crop Video in Premiere Pro

5 Methods How to Crop Video in Premiere Pro CC

To begin how to crop video in Premiere Pro CC, add the video clip to the timeline by dragging

How to reduce video file size without losing quality.

How to Reduce a Video File Size Without Losing Quality in Premiere Pro

Hello guys! This tutorial will discover how to reduce video file size without losing quality through Premiere Pro export.


Leave a reply:

Your email address will not be published.

Mobile Sliding Menu