How To Create Child Theme In WordPress Manually

Create Child Theme in WordPress Manually

Creating a child theme in WordPress manually. It means we are not going to use any plugin in this tutorial.

You can also create a Child Theme in WordPress by using the plugin .

Let’s imagine you are creating your WordPress website with a theme you have downloaded or purchased, and you get to know it doesn’t perform in same the way you want it to.

What would you do then?

You can find a plugin that will help you with the customization you need. Or you can manually edit according to your needs. But there is a problem, whenever you will update the theme or switch the theme you will be lost every change you had made.

In this situation, you need to create a child theme in WordPress. Because of it, you can easily modify and customize your favorite theme according to your needs. Child Theme gives you flexibility and ability to change the specific appearance of your parent theme, also allow you to implanted addition features and function in your website and much more without affecting your parent theme. With the help of a child theme, you can easily update the parent theme without losing your changes.

You can also more get know about Child Theme Parent Theme and its importance in our article.

Requirements for Creating a Child Theme in WordPress

Basic knowledge of HTML/CSS is required because that helps you to make your changes. And a middle-level knowledge of PHP is required so that you can add your functions.

We prefer you to first practice in your local environment. So you can first check the changes are working properly or not if YES than implement on your live WordPress site.

Creating Child Theme In WordPress Manually

You can use any theme you want as a parent theme. But keep it remember there are many different kinds of themes that may not easiest to work with. In this tutorial, we will be using the “Magazine Power” free version that is available in the WordPress theme directory.

First you need to go /wp-content/themes/ in your WordPress installation folder. And need to create a new folder with any name you want. For this tutorial, we will be using it “techinsidepc”.

Creating folder for Child Theme

Create a file with the name style.css in the child theme folder. Open this file in any text editor like Notepad++ now past this code and save the file.

/*
 Theme Name:  Tech Inside PC
 Theme URI:   https://www.techinsidepc.com/
 Description: Magazine Power child theme
 Author:     TechInsidePC
 Author URI:  https://www.techinsidepc.com/
 Template:    magazine-power
 Version:     1.0.0
*/

@import url("../magazine-power/style.css");   

Let us describe each of those lines to identify what they do.

  • Theme Name: You can set any unique name for your child theme.
  • Theme URL: Where the user can find the code or documentation. You can provide your website link.
  • Author: You can set any name.
  • Author URL: It also belongs to the author’s website. So here you can also provide your website URL.
  • Template: you should use the parent theme folder name where the parent theme is stored. Keep it remember you it’s case sensitive so you should use the same as the parent theme folder name.
  • Without this line or mistake in this line, your theme won’t work as a child theme.
  • Version: the version theme version number.
  • @import: this line help to import our parent theme’s style sheet to the child theme.
Note:

you need to pay attention to the template line because of its case sensitive.for example we provide a template like “Magazine Power”, then it will not work. should keep it the same as the parent theme folder name. And without this line, your child theme won’t able to work.

Here you successfully created a child theme in WordPress. You can now go to Appearance >> themes in WordPress where you will find TechInside PC listed in themes area. You can activate the child theme on your site by clicking on the activate button.

Child Theme in the Themes Area

Customizing Your Child Theme

Since you haven’t changed whatever in your child theme yet. Your Website will get all the functionality, features and styles from the parent theme.

For customization, you will have to know about CSS.

Some browsers have built-in inspector tools like Chrome and Firefox. Inspector tools help you to see at the HTML CSS behind elements of a web page.

If you want to see the HTML CSS used in Webpage, then simply right-click anywhere in webpage with your mouse and click on ‘inspect element’.

opening inspector tools in web page.

This will divide your browser screen into two parts. In the upper part of the screen, you will see the output of HTML CSS. And in the lower part of the screen, you will see the HTML CSS of the web page.

Inspector tools on webpage for checking code behind the elements

When you over with mouse on different HTML lines in Inspector tool. It will highlight them in the top window. It will also show the CSS to the highlighted element in the inspector tools window on the right side.

With the help of this, you can try live editing the CSS to check how it would look. This change is temporary when you reload the web page all changes will disappear. For the permanent changes, you need to edit in style.css file. It just provides you the preview of your webpage.

live change in webpage with inspector element

you can see that the color of the navigation bar menu has changed. Same this, If you satisfy with your changes, then you need to copy this CSS and paste in your child theme style.css file.

Here is the style sheet that we have applied some changes in our child theme.

/*
 Theme Name:   Tech Inside PC
 Theme URI:    https://www.techinsidepc.com/
 Description:  Magazine Power child theme 
 Author:      TechInsidePC
 Author URI:   https://www.techinsidepc.com/
 Template:     magazine-power
 Version:      1.0.0
*/
@import url("../magazine-power/style.css");   


.main-navigation ul li a {
    color: red;
}
.home .entry-content-wrapper .entry-content {
	border:3px solid blue;
}
.site-branding{
	background-color: yellow;
}

Edited View

After changes in style sheet of child theme

At the start, you should practice in your localhost server and try every possible theme, apply anything you want. At the start, you will have faced some problems but after some time you will be perfect.

Adding Functions File in Your Child Theme

If you are good in PHP and want to add your function in your child theme. You need to create a file with the name ‘function.php’ in the child theme directory.

Enqueue Style Sheets Using fucntions.php

You can also add your parent theme stylesheet in child theme by using ‘enqueue’ in function.php file.

you just need to copy below code and paste it in your child theme function.php file

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

For this method, you don’t need to use below the line in your child theme ‘stylesheet’.

@import url("../magazine-power/style.css");   

If you don’t have strong knowledge about PHP. We prefer you don’t use this method to adding style sheet in your child theme.

We hope this tutorial helped you to learn how to create child theme in WordPress website manually. If you have any queries feel free to comment you can also communicate with us on social media.
If you like this tutorial, then please like us on Facebook and Follow US on Twitter.

Written by 

Leave a Reply

avatar
  Subscribe  
Notify of