How to create a child theme in WordPress : Definitive Guide 2016

Create a Child Theme in WordPress & Control Your Site Like a Pro

I am sure your WordPress site is already amazing. WordPress out of the box is already filled with lot of user friendly customisation. But if you want to take complete control of it, you must create a child theme in WordPress. Let’s see why and how.
create a child thme in wordpress

What is a Child Theme?

Simply put, child theme is a skin worn by the parent theme. It is dependant and relying on the parent theme for it’s functionality but has the capability to over-ride functions and styling of the parent theme.

It is so fitting to call them Child themes. They are like our kids. They are dependant on us but sometimes can change the way we behave and the way we look. My daughters always tell me what to where and how to behave when we go out !

Why bother? Why Create a Child Theme in WordPress?

Before going to the technicality of it here are the main practical reasons why,

Hassel Free updates of the Parent Theme
If you change the parent theme code to make your site look better, with each update your site would be back to squire one. When you make changes in the child theme they run smoothly on top of the parent theme, no matter what you do to the parent theme.
Organized and Easily Accessible Coding
Imagine you had your CSS changes done in the parent theme. Ok, one year down the line you want to change it around and start looking for the code. It’ll be a needle in a hey stack!. Child theme has a different set of files. If you create a child theme in WordPress everything is organised and easy to find.

Basic Anatomy of a Child Theme

At this point I would like to direct you to the section on the Worpress Codex library about child themes. The main components of a child theme are

  • A new child theme directory
  • Style.css file
  • functions.php file
Also, it goes without saying you need to pick a solid reliable theme as a parent theme. I rely on these guys for good themes and highly recommend them.
728x90

Let’s Create a Child Theme in WordPress

Right, let’s get down to the business. Lets create a child theme in WordPress for you. I will break the steps in to sub sections.

Make a directory for the child theme to live in
  • Open the root folder via cPanel or FTP
  • Browse to public_html>wp-content>themes folder
  • Create a new folder in the theme folder for the the child theme

Now name this new folder with any name you want. It is best practise to use a name relating to your parent theme. Remember, No spaces in the name

    Eg. Parent theme name – “lovelytheme” Child theme – “lovelytheme_child”
Create a style.css file
  • Open the newly created child theme folder
  • Create a new file
  • name it styles.css
  • Open this file to edit and write the header details as below
/*
Theme Name: lovelytheme_child (Whatever the name of your child theme)
Theme URI: http://example.com/lovelytheme_child /
Description: Lovely Theme Child Theme
Author: John Doe (your details)
Author URI: http://example.com
Template: lovelytheme (Exact name of your parent theme folder as shown in the wp-content/theme folder)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/
Great. Now you can consider you have created a child theme in WordPress. Next step is to enqueue the parent and child theme styles.css files. This was previously done by using @import. Below is an example.

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

This method is now no longer used since it takes longer time to load CSS. So it is now called ” THE OLD METHOD”.
New method is to enqueue adding a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php This is “THE NEW METHOD”. You really don’t have to understand this at this point. Just follow these steps

Create a functions.php file
  • While you are in child theme folder, create another file
  • name it functions.php
Now add below code to the functions.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’ );

}
?<

That’s it. You are done. Now the fun begins.

Activate the child theme and start playing
  • Go to the Dashboard of your site
  • Go to Appearance > themes
  • Now you will see your child theme there as shown below. Activate it
create a child theme in wordpress

Now you’ve got the wheels in your hand. Go to Appearance > Editor and select the child theme Styles.css. Go crazy as you wish. It’s all yours.

Want to go step further. Add a thumbnail to your child theme for a better preview, Read about it here in this post

Leave a Reply

Sorry, is this not what you wanted?

Just tell me what you are looking for !

I will mail them to you, quick as a flash.

Thank you!

Welcome to Easypress it family

Hey ! Glad you are here.

I love sharing these with you all.
Get more free stuff like this even before they are published.
Come join the rest of my buddies.