Wordpress Tips, Tricks and Tutorials

How To Create Child Theme(s) In WordPress (Step By Step)

how-to-create-child-themes-in-wordpress-step-by-step

Child theme(s) are the heart of theme development and experiments. You can modify your themes, make changes, tweak your website layout and design, stay up to date….and what not. All because of child themes. So these are not only important but also necessary. Every blogger who loves to make custom modification to his/her theme should use and create child theme instead of editing the original theme.

If you are happy with your default theme layout & design and has not made any custom changes to your theme style, it’s okay.

But not every blogger satisfies with the default design offered by the WordPress themes. And if you are one of those who believes in designing your website or blog according to your taste and preferences, you should be using a child theme.

If you are not using a child theme, there may be two reasons behind this.

1 Either you don’t know about child themes, at all

2 Or…You don’t know how to create child theme(s) .

Well, if it is the first case and you don’t know about child themes, read the below article :

And if you fit in the second typo,read the section below. In the end of this article, you will be able to create child theme of your own.

How To Create Child Theme(s) [Step by Step]

Let me tell you a thing about child themes, they are actually not difficult to create.

When we see the words “create” and “theme” in one sentence, one thing comes to the mind is – Nope ! That’s not easy, boy.

But child themes are not as complex as they sound. Because you don’t need to need to code all the essential HTML and CSS files which are required by a standard WordPress theme. You just need to edit those files which you want to modify. And that files too are copied from the original theme.

See no coding at all !

When someone visits your website,WordPress load your modified files (from the child theme) first and all other files are loaded from your parent theme.

To understand the working of child theme read the article suggested above.


In brief words, all you need : 3 Files   –  3 Steps

Files Required :

You Need to create three files.

File1)  The child theme directory/folder.

File2)  style.css file.

File3)   functions.php (only required if you are using enqueue method to import parent css styles)

Steps To Be Taken :

Step1)  Create child theme directory/folder in WordPress

Step2)  Create a style-sheet with a name style.css

Step3) Import the styles of your parent theme to your child theme.

NOTE : You need access to your website database. By FTP or by your control panel provided by your web-host.

Let’s Get Started

First of all, you need access to your website. There are two methods to gain access to your website.

[A] Either login to your hosting provider’s account (cPanel).

[B] Or…Connect with an FTP account with the help of software such as Filezilla.


Step 1 : Create Child Theme Directory

  • After connecting to your website database, go to the file manager tab.Now select your website directory. Navigate to the wp-content folder.
  • Go to the themes folder. You will see this directory contains all the themes folders installed on your site.
  • Now create a new folder inside this directory. You can name that folder whatever you prefer. But I suggest you use a name relative to your parent theme such as “parent theme name-child”. This will help you to recognize it easily, later.

For example : For the Twenty Eleven theme you can name the child theme as “Twenty Eleven- child”.

Warning : Create child theme folder along with the other themes folders in the theme-directory. Do not create it inside the parent theme’s folder.

Step 2 : Creating The style.css File

The next step is to create child theme’s stylesheet. You must name your stylesheet as style.css.

  • Navigate to your child theme’s folder you just created in the first step.
  • Create a new file, must be named as style.css.

Now your child theme’s stylesheet must begin with some important information regarding your parent theme.

Below is the standard sample :

/*

Theme Name: Twenty Eleven Child

Theme URI: http: //example.com/

Description: Child theme for the Twenty Eleven design

Author: Mr. Bond

Author URI: http: //www.twentyeleven.com/

Template: twentyeleven

Version: 0.1

Just edit the above information according to your theme such as your parent theme name, description, author, template etc. All the Theme Name, URI, Description and Author fields are optional and can be set as you desired but except the Template field and @import section.

Step 3 : Import The  Styles From Parent Theme

Now if you activate your child theme at this stage your theme will show no CSS styling.

This is because when you visit your site from the browser, WordPress will load your child theme’s style.css instead of your parent theme. As your child theme stylesheet is blank at this stage it would render no styling at all.

Why To Import : WordPress will load all the missing code files(e.g.- footer.php, sidbar.php, page.php etc.) from your parent theme if they not available in the child theme except the style.css file. Thus, either if you have to write the whole CSS style code or you have to import these from your parent theme.

Of course, the second approach is more convenient and appropriate.

Further, there are two methods to import the css styles from the parent theme.

By Using @impot Method :

To import the CSS style from your parent theme, use the following piece of code in your child theme’s stylesheet :

*/

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

/* =Theme customization starts here

------------------------------------------------------- */

Alternate Method To Import CSS Styles From Parent Theme

The above @import method is best for beginners. But that method has some drawbacks. One of it is – increase in page load time.

So that’s why developers look to the alternate method. This method is faster than the above method. To use this method you have to create a function.php file in your child theme’s folder.

In this method, we enqueue the parent file’s stylesheet in the function.php file.

How To Create A function,php File In Child Theme

Follow the procedure applied during the creation of style.css file. Go to your child theme’s folder and add new file. Name it as function.php.  Make sure it has a .php extension in the end.

Now paste the following content block into it :

<?php
/**
* Twenty Eleven functions and definitions
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Sixteen 1.0
*/

If you are using a different theme for your blog, make the changes according to your theme name.

Save the changes.

Enqueue Parent Theme’s Stylesheet :

Now add the following piece of code below the header section in your function,php file.

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Save your changes again.

However, if you are a beginner and don’t want to step inside the php world,  you can use the first method as you have to deal with css only – safe and simple.

There are the three most important pieces of code from the above steps which require more attention and should be executed carefully.

1.) Template :

The template is the directory name of your parent theme. This should be correct and same as your original parent them.This tells WordPress the parent theme you are using.

This tells WordPress the parent theme you are using.

2.)  @ import function :

This function imports the parent theme’s CSS to your child theme. In this way, you do not have to write the whole code for your child theme stylesheet.

Just add the changes and modification you want to make in your theme. The rest of the CSS style will be loaded from the parent theme.

3. Enqueue Script :

This serves the same purpose as the @import function i.e. pulls the styles from parent theme’s stylesheet.

Activating Your Child Theme :

Now you are almost done.

Go to your WordPress dashboard and activate your child theme.

You will see no difference in your theme layout and design at this moment as the styles used by the child theme are same as the parent theme.

From here starts your modification mission. Any changes and modification you made in your child theme from now, will be shown on your live site.

Further Development :

Let me tell you that the only file you need to make your child theme works is style.css file.

However, you can add much more files to the child theme to edit and modify them such as header.php, homepage.php, footer.php etc.

Just copy these files from your parent theme into your child theme and make the necessary modifications. As that simple.

Hope that this tutorial helped you to create child theme(s) on your WordPress Blog.

As always, like and share this tutorial with your friends.

If you face any problem in any step, feel free to ask in the comment section.

Comments
Share