Step by Step Guide to build WordPress Child Theme

What is a Child Theme?

A WordPress Child Theme is a theme that automatically inherits the features, styles, and templates of a parent theme. Using Child Theme we can modify anything on the current(existing) theme.

Benefits of WordPress Child Theme

• Nowadays all WordPress theme has regular updates from theme developers so if you modify a theme before and it is updated, then your modification may be lost. Using Child Theme you will ensure that your modifications are preserved.
• When a new version of the parent theme arrives, You can safely update it as all your modifications are saved in the child theme.
• Speed up development time.
• Easy to Extend.

How to Create a WordPress Child Theme?

In this example, we will be creating a child theme for the TwentySixteen Theme of WordPress.

Step 1 :

Create a child theme directory inside “wp-content/themes” and the name of the child theme directory will be “twentysixteen-child”.

Step 2 :

Now we have a child theme directory called “twentysixteen-child” Inside that we need to create two more files

1. functions.php
2. style.css

If you have a screenshot of your theme then you can upload it in this directory as well.

Step 3 :

Now we are going to update the style.css file using an editor. Update the below code in the starting lines of a style.css file.

/*
 Theme Name:   Twenty Sixteen Child
 Theme URI:    https://wordpress.org/themes/twentysixteen-child/
 Description:  Twenty Sixteen Child Theme
 Author:       WordPress
 Author URI:   https://wordpress.org
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         twentysixteen
 Text Domain:  twenty-sixteen-child
*/

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

The most important parts of this file are the “Template:” and “@import” sections.

The “Template” means the directory name of the parent theme. In our case it is twentysixteen and “@import” means we are importing the default style of the parent theme in a child theme.

If your child theme style.css contains CSS code, you will need to enqueue it as well. Setting ‘parent-theme-style’ as a dependency will ensure that the child theme stylesheet loads after it. See Example :

<?php
function twentysixteen_theme_enqueue_sty() {

    wp_enqueue_style( 'parent-theme-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-theme-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-theme-style' ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'twentysixteen_theme_enqueue_sty' );
?>

Now your twentysixteen child theme is ready for activation. Log in to your site’s administration panel, and go to Administration Panels > Appearance > Themes. You should see your twentysixteen child theme listed and ready for activation.