Tutorial On Creating WordPress Child Theme

So, it looks like you are searching for the tutorial about how to create WordPress child theme and accidentally landed in this page. Well, what a luck for you. Here, we will describe about how to create the WordPress child theme and modify it as per your need.

What is WordPress Child Theme?

First of all, let us introduce about what is WordPress child theme. It is simply a new theme added in your site, which behaves totally differently as the main theme, ie, parent theme of it. It does so because, it inherits the functionality of the parent theme and then can be modified according to which you want for your site need.

WordPress treats this theme, ie, child theme as the new theme and hence, the best practice to start the use of the theme would be by creating the child theme. Because if you have developed the site via parent theme, ie, main theme, then, later on wanted to create child theme, then, all customization done via Customize Options is likely to get removed and needed to be done again.

Why WordPress Child Theme?

So, after knowing about what is WordPress child theme, now you may need to know about why to use it. Well, for this, lets say you only have the CSS customization work and do not want anything more than that. Then, the creation of the child theme is not required at all, since WordPress 4.7 and later provides you with the option of adding the CSS code in Appearance->Customize->Additional CSS section.

But, what if you want to add some functionality in your site, say it to add the number of views count of the post and display it to the visitors. Well, the child theme allows you to do such customization in your site, if the main theme, ie, parent theme is already not having this feature.

One of the main reason about creating the WordPress child theme is that, if you have done the file edits in the theme file, then, when you update the theme, then, it is likely that you will lose that edited code. But, if you have done it via the child theme, then, you can update the parent theme without any hesitation, since child theme only links to parent theme folder.

Create The WordPress Child Theme

Now, after you have read about the child theme and what to create it for your site, now, we are going to describe about how to create WordPress Child Theme.

First of all, you need to choose the required best parent theme for your site. It is so because, if the main theme file contains lots of bugs, then, the it is likely to have many bugs too, in the created WordPress child theme. Also, can the parent the easily overwrite by child theme too? These two are the main basics to be chosen while you choose the main or parent theme.

Now, lets jump ahead and create the child theme for WordPress. First of all, what you need to do is, you need to create the folder in themes directory for the child theme as required. Since, this relies on the main theme, and WordPress requires you to add the style.css file to know about it is theme, lets jump ahead and create this file. The code which need to be in this file is:

Theme Name: The NewsMag Child
Theme URI: https://napitwptech.com/themes/the-newsmag/
Description: The NewsMag Child Theme
Author: Bishal Napit
Author URI: https://napitwptech.com/themes/
Template: the-newsmag
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-newsmag-child

Here, in the above code, the main part which has to be cleared and taken care of is Template: the-newsmag since here, it has to be written the parent theme folder name. Also, if the parent theme is not present in your site, then, it is likely to occur error in the child theme to be chosen for your site. Below is the screenshot on this after the above file is created as required.

Since, above will let know WordPress that, there is new theme added in your site. If everything is ok and if you activate the child theme, then, you will probably notice that your site is without styling. Well, for this, you have to create the file functions.php and then add this code in this file:

// Load the parent theme style.css file.
add_action('wp_enqueue_scripts', 'the_newsmag_child_theme_enqueue_styles');

function the_newsmag_child_theme_enqueue_styles() {
$parent_style = 'the-newsmag-style';

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));

Here, change this unique handle name the-newsmag-style as described in the main theme file. Now, after this, your child theme is ready to get loaded on your site and customize your site according to the requirement for your site.

Also, to customize the styling of the site, add the CSS code as required on that created style.css file just below the provided one. And to overwrite the function, copy the require function from the parent theme file to the functions.php file of the child theme and modify accordingly. Also, to overwrite the display of the post and page contents, copy over the same file, ie, single.php and page.php respectively in child theme from parent theme folder and modify it accordingly.

Note to our theme users

You can find the zip file of the child theme for our WordPress theme below. You can use it to make your site look beautiful and customize according to your requirement.

  1. creative-blog-child
  2. masonry-brick-child
  3. the-newsmag-child


Now, after reading this post and if you have tried it and become successful on this, then, we now can assume that you can build WordPress child theme on your own for your site project better than before. But, if you are still unable to do it and want more help, then, you can post your comment below and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.