Blog

Child theme

Everyone wants to have an unique theme on their website. Many people directly edit the style.css or functions.php files of the theme.  But if they try to update the theme to its newer version, they will lose all the changes.

Child theme solve this problem. Creating a WordPress child theme is one of the best development practices. But before creating a Child theme it is important for you to understand what a child theme is.

 

What is Child theme?

Child theme allows you to modify the functionality of your chosen theme on your website without changing the original code of the theme. It inherits the functionality, styling and code of the parent theme.

It is the recommended way of modifying an existing theme without losing the ability to update the theme.

 

Why to use Child Theme?

There are several reason to use child themes instead of directly editing style.css or functions.php files:

  • Many developers use it to speed up the development time.
  • It ensures you that your modifications are saved when you update the theme.
  • You can turn off your child theme anytime and back again to the original theme.
  • You can create separate set of files that you can use to customize the existing theme without changing the original theme.

 

How to create Child theme?

Step 1: Creating a style.css file

To create a child theme you only need one file i.e. style.css. The main  motive of this file is to provide information to identify the child theme and parent theme.

In the below example we’ll create child theme of Twenty Fifteen theme.

First you need to create a folder in wp-content/themes. It is recommended that the name of child theme folder is appended with -child.

Then create a style.css file in your child theme folder which begins with the following stylesheet header:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 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
*/

Note: Replace the theme name and its details with your relevant theme. The template line in the above example is the name of folder of your parent theme.

Once you’re done with this, you should be able to see your child theme in the wp-admin.

Step 2: Load the stylesheet of Parent theme

Next step is to enqueue parent and child theme stylesheets. The best method of enqueuing is to use wp_enqueue_script() in your child theme’s functions.php.

To load the stylesheet of the parent theme you will need to create functions.php file in child theme folder. The first line of your functions.php file will contain an opening PHP tag (<?php). After this tag you will add the following code in this file:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

Note: The above code is applicable only if your Parent theme uses one .css file. If your Parent theme has more than one .css file then you will have to make sure all the Parent theme dependencies.

Step 3. Activate the Child Theme

Now your Child theme is completely ready for activation. You can log into your WordPress Admin area and activate your newly created child theme.

Note: You may need to save your menu and theme options after activating the child theme.

 

Conclusion

Creating a child theme is astonishingly simple task rather than creating a theme from scratch. Using some basic knowledge of CSS and copy pasted PHP code you can create your own theme and save yourself from headache.

In this article we’ve created a child theme of basic theme. Creating a child theme of large and great themes results you in another powerful theme.

If you’ve any tips or queries related to child theme then do share with us.

About author

Kriti Jain

Kriti is a passionate blogger and WordPress wanderer. She explores WordPress everyday and shares her findings with the web world.

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>