WordPress Child Theme Tutorial

By Deep Wadhwa Our Bestseller: WordPress Themes

Recently, I have come to know about the use of the child theme in WordPress and you will be amazed to know how child theme can be so useful for your website.

In the following tutorial, I have explained about creating a style-sheet (style.css) for a child theme in WordPress. However, you can also modify the functions, header etc.of the parent theme. At the end of reading, you will be capable of knowing:

What is a child theme? How it is useful? Things you have to deal to make a child theme? Directory Structure of child theme. How to build a style sheet for a child theme?

Note:
Here, I have used the Colorway Theme as the parent theme and shows an example of creating its child theme.

So, let’s get started one by one.

1. What is a Child theme

A child theme is a WordPress theme that follows the functionality of the parent theme and allows you to make your own changes in the theme.

2. How it is useful

Suppose you have a theme installed on your website and want to modify it. You make changes in the theme’s designing (styling), functionality etc. But sooner the update of the theme comes and you update it. Now it’s a blunder. All your modifications are lost.

In order to save your changes so that the modifications of the theme will remain intact/unchanged, making a child theme of the parent theme is a worthy solution.

Yes, you can make changes to the child theme and use it on your website whenever you want. For e.g. You want to activate the child theme on your website, just install & activate it. It will come alive.

For this purpose, child themes are the recommended options for making any modifications to the themes. You do not require making changes in the main theme. All you need to do is to create a child theme.

3. Things you have to deal to make a child theme

Making a child theme is very simple. If you understand HTML and CSS (a bit) then you can make a child theme for the parent theme. Again you don’t have to make any changes in the parent theme and whenever the update comes, update your theme freely.

Followings things will matter while creating a child theme:

Create a directory by using FTP. Put a properly formatted style.css file in the theme’s directory.

After fulfilling all the above prerequisites, sure you will be able to modify the styling (design) of a parent theme to any extent without editing the files of the parent theme itself. That way, when the parent theme is updated, your modifications are preserved.

4. Directory Structure of child theme.

A child theme resides in its own directory in wp-content/themes as shown below:

The following below shows the location of a child theme along with its parent theme (Colorway) in a typical WordPress directory structure:

site_root (www) wp-content themes (the directory where all themes are present) colorway (directory of our example parent theme, Colorway) colorway-child (directory of our child theme; can be named anything) style.css (required file in a colorway-child theme; must be named as style.css) style.css
is
required . functions.php is optional. Template files are optional. Other files are optional.5. How to build a style sheet for a child theme?

In the following steps, I have explained how to make a child theme of the Colorway theme (parent theme).

Step #1: Create a folder
– To create a child theme, first create a folder in the wp-contents/themes for the child theme.

Step #2: Creating required style.css
– Now create a style.css file for the child theme as shown below:

/* Theme Name: Colorway Theme Child Theme URI: http://www.inkthemes.com/ Description: Child theme for the Colorway theme Author: Inkthemes Author URI: http://www.inkthemes.com/ Template: colorwaytheme Version: 1.1 */ @import url("../colorwaytheme/style.css");

Initially after installing the child theme on your website, it will appear on your dashboard like this:

Theme Name is required. Theme URI is optional. Description is optional. Author is optional. Author URI is optional. Template is required. And it should be same as the directory name of parent theme, case-sensitive.

NOTE
: You have to switch to a different theme and back to the child theme when you modify this line.

Version of child theme is optional. For e.g. – 1.0, 2.0 etc. The part after the closing */ of the header works as a regular style sheet file. It is where you put the styling rules you want WordPress to apply.

NOTE
: A child theme’s style sheet replaces the style sheet of the parent theme completely. (The parent’s style sheet is not loaded at all by WordPress) So, if you simply want to modify a few small things in the styling (design) and layout of the parent —rather than make something new from scratch— you have to import explicitly the stylesheet of the parent, and then add your modifications.

@import url (“.. /colorwaytheme/style.css”): It will leverage and reuse the style of the parent theme and include it in our child theme. Then just change the parts which you want to change. For e.g., to make the background gray, add the following lines to the style.css: as shown below:

After this modification, activate the the colorway-child theme & it would look like as shown below:

Note:
There must be no other CSS rules above the @import rule. If you put other rules above it, it will be invalidated and the style sheet of the parent will not be imported.

Hope this article will provide you a great help to create a child theme for the parent theme.

You will be lot happier to preserve the modifications you made in the theme. This was an example of creating a child theme for Colorway .

You can create a child theme of any parent theme by modifying the above codes. If you want to have a try to Colorway theme, feel free and buy it from the InkThemes market with a decent price.

About Deep Wadhwa
author

"I believe in basics which builds up perfection and enhance creativity. Thanks to Blogging through which I can share my experience with you!!!!".

Comments and Responses

Share on Google Plus

About Unknown