How To Create Child Theme(s) 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.

Article written by:

Pankaj is a passionate blogger and an engineer. He writes about WordPress, SEO and blogging-stuff.He is a coffee lover and bogging addict who spend most of his time in reading, writing and surfing around the World Wide Web.

Join the discussion

  1. Joseph Chikeleze

    I will share my own child theme any moment from now; I know , with this guide. I can create child theme well.

    Thanks

    • Pankaj Kumar

      Hey Joseph,
      Glad that you found this guide helpful. Feel free to drop your words if you need more help with child themes.
      Keep visiting Wpblogcafe.
      Cheers!

  2. Naman Kumar

    Hi Pankaj, this is a great guides, explains everything in detail. Nice help.

    Thanks for this guide.

  3. Akash Kumar

    Hello Pankaj,
    Thank you for this post. It’s amazing.
    But i have an issue related to my WordPress Blog as that’s very slow. taking so much time just to be opened. Can you please help me?

    • Pankaj Kumar

      Hey Akash,
      Glad you liked the post.
      As it comes to your blog speed, make sure you use a cache plugin on your blog (wpsuper cache / wp totoal cache would be cool). You should also consider a CDN service for your blog. CloudFlare is a perfect option if you want a free cdn service. Also try to optimize your blog-images.
      If you still need more help, please drop a comment. Will be a pleasure to help you.
      Cheers !

  4. Nick

    Very useful post, I haven’t tried creating a child theme yet but would definitely try it by following this awesome guide.

    Thanks

  5. Rajkumar

    Hello Pankaj Kumar,

    I think creating child themes and using them on ours blog will certainly help to gain attention from readers. I will also help in branding too.

    Thanks

  6. Dheeraj Sharma

    Hello Pankaj thanks for your nice post .
    Can you please tell me what deference in rtl.css and style.css

    • Pankaj Kumar

      Hey Dheeraj !
      RTL stands for “right to left”.
      Some languages, like Arabic read from right to left. That changes everything about your design.
      The “rtl.css” file in the theme ensures that your theme is optimized for languages which are written from right to left.
      Keep visting, have a nice day !

Leave a Reply

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

Give Your Inbox Some Awesome !

Give Your Inbox Some Awesome !

Don't Worry, We Hate Spam Too.

You Are Awesome !