WordPress Child Theme Development

Featured Video Play Icon

What is WordPress Child Theme?

A WordPress child theme is a theme that inherits its functionality from another WordPress theme, called parent theme. Child theme is recommended way of modifying an existing theme without breaking parent theme functionality.

Why use a WordPress Child Theme?

There are a many reasons why you should wordpress child theme and some of them are:

  • Modifying a wordpress main theme files and folders directly can be lost in future update.
  • Easy to recover from accidental coding error
  • Edit or Add your own custom functions
  • Speed up theme development process

Let’s do the WordPress Child Theme Development

WP child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

  1. The child theme directory
  2. style.css
  3. functions.php

For this child theme development tutorial, I have used WordPress 2015 Theme. You can select any wordpress theme and the procedure will be the same.

Step 01: Creating a WordPress Child Theme Folder or Directory

The first step in developing a child theme is creating a folder which will be placed in wp-content/themes. It is recommended (though not required, especially if you’re creating a theme for public use) that the name of your child theme directory is appended with ‘-child’. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors.

Step 02: Creating a WordPress Child Theme style.css file

The next step is to create your child theme’s stylesheet (style.css) file. The stylesheet must begin with the following (the stylesheet header) code:

/*
Theme Name: Child Theme of 2015
Theme URI: https://www.bnwebdesign.com
Author: Emdad Khan
Description: Developing WordPress Child Theme for new WP Learner
Template: twentyfifteen
*/

Need to remember:

  • The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so adjust accordingly.

Step 03: Creating WordPress Child Theme functions.php file

The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load.

The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.

You will therefore need to create a functions.php in child theme folder or directory. The first line of your child theme’s functions.php will be an opening PHP tag <?php, after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

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

If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme. The complete (recommended) example becomes:

add_action( 'wp_enqueue_scripts', 'load_theme_stylesheet' );
function load_theme_stylesheet() {
 
    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

Where parent-style is the same $handle used in the parent theme when it registers its style sheet.

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

Leave a Reply