Create WordPress Child Theme Step by Step

by | Oct 30, 2017 | WordPress | 0 comments

WordPress Child Theme

Create WordPress Child Theme Step by Step: Are you a WordPress user? If yes, then we are sure that you must have heard about child theme.  If you are new to WordPress than the probable question raise in your mind should be what is child theme and why to use the child theme? Obviously for your website/blog, to provide a certain shape you must use the theme. And about 90% of the users of WordPress use the theme available in WordPress theme repository or use some other premium platform. Then what to do with Child theme here? You might be thinking about this right now.  Don’t worry we are here to make clear about the child theme and we will give you a guide to creating a child theme. But before creating WordPress child theme let us know some fact about child theme.

What is Child Theme

A WordPress child theme is a WordPress theme that inherits its functionality and styling of another WordPress theme, called the parent theme. We can say that Child theme totally depends upon parent theme. A child theme inherits all the functionality parent theme without making any changes to the parent theme. Creating child theme allowed users to change the styling of the parent theme and add/modify according to the users need.

Why do you need to create a Child Theme?

You may not always need to create the child theme but we highly recommend to use the child theme if you are using the theme from other authors. But if you are developing your own theme only for your purpose than child theme is not necessary. If you are using other authors theme the author may add new features or change theme style or something else. At that time you need to update the theme. Obviously, the update is necessary. Yes here is the catch, when you update the theme you probably lose your previous changes you made in theme. The customization in the code will disappear as a result your website/blog will no longer look like the design you have made previously. Then again you need to spend your precious time and that the matter of a headache.

Why to lose your precious designs and functionality? A single child theme can be a good option for customizing your blog in your own way or according to your need. Updating your parent theme will not affect any customized code and style. There are a few reasons why you would want to use a child theme:

  • edit the theme’s CSS stylesheet.
  • edit any PHP templates inside parent theme.
  • if you need to edit the theme’s functions.php file.
  • modify any code of the theme’s assets including javascript files and images.
  • Even just to add a single line of code.

The advantage of Creating WordPress Child theme.

  • Make theme customization much easier
  • Safe updates: update the parent theme without losing your customizations.
  • Modify the theme that already exists.
  • Modify according to your needs.
  • Creating child theme speeds up the ease of development.

Creating WordPress Child Theme Step by Step

All right, now that we know how child themes workes and what is the benefit of using a child theme. Let’s go over how to create one step by step. Here for our example, we will use twenty seventeen as the Parent theme. It is also the latest default theme for WordPress. Follow the steps:

Step 1: First you need to open the folder wp-content/themes in WordPress Installation. Create a new folder inside your theme directory and name this folder anything you want. For this tutorial, we are creating a folder as twenty seventeen-child.

child theme folder Create WordPress Child Theme Step by Step

Step 2: Create a style.css inside your newly created folder.

child-style

Step 3: Now open a style.css in a text editor, copy the code given below and paste to your style.css

[php]
/*
Theme Name: Twenty Seventeen Child Theme
Theme URI: http://wordpress.org
Description: Child theme for TwentySeventeen
Author: web-utter
Author URI: http://webutter.com
Template: twentyseventeen
*/

@import url(“../twentyseventeen/style.css”);
[/php]

Now save your style.css

*Note: Template name in your style.css should be as same as the name of your parent theme folder. Here our parent theme folder name is twentyseventeen so we are using template name in our style.css as twentyseventeen. You can use any theme name it’s on your hand. We named is as Twenty Seventeen Child Theme.

Step 4: Now You can now go to Appearance » Themes where you will see Twenty Seventeen Child Theme. Activate your child theme.

dashboard

Yet you haven’t changed anything in your child theme, so your site will use all functionality and appearance of its parent theme.

Customizing Your Child Theme

Now its time to customized your child theme. Now every modification that we make is with a child theme. No need to touch a single line of the parent theme. If you want to change the design, color of your website blog or theme then you need to work with style.css. Now let us do some customization of our original design. See the image given below. We are going to change the background of menu area.

child-theme-customization

Now Right click on the browser and click on inspect. Then after that your screen split into two parts in the browser one is of your site and other is the HTML and CSS part. As shown in the image below by inspecting select the navigation section. If you are confused check in the image given below.

child-customiz

You can now choose the color that you want. You can test live in a modern browser like Chrome, Firefox etc. Check the image below how we edit the navigation.

top navi 1 Create WordPress Child Theme Step by Step

Navigation background is changed but in this is just test. When you refresh the browser your change will be lost. For real change, you need to copy the {.navigation-top} CSS code to your style.css in your child theme folder. For example, check the code given below.

[css]

/*
Theme Name: Twenty Seventeen Child Theme
Theme URI: http://wordpress.org
Description: Child theme for TwentySeventeen
Author: web-utter
Author URI: http://webutter.com
Template: twentyseventeen
*/

@import url(“../twentyseventeen/style.css”);

.navigation-top {
background: #0980fb;

}
[/css]

This is it. Now you can edit your CSS yourself according to your need. 

Like style.css you can change the other theme templates as well. If you need to change footer than just create footer.php templates in your child folder and started editing.

 Wrapping it up

It’s easy, right? Hope now you can create the WordPress Child theme your self. Still, confuse? Feel free to comment our developer team will be happy to help you.  Stay Tuned for our more tutorials !!