How to create a WordPress child theme

Creating a child theme in WordPress is required if you need to customise your current theme without losing customisations when updating the theme.

There are two possible scenarios:

1. The child theme only needs to load its stylesheet
2. The child theme needs to load its stylesheet, as well as the parent theme’s stylesheet.

To identify which of the two scenarios applies to you, you need to open the “functions.php” file in the parent theme folder “yoursite.com/wp-content/themes/yourtheme/functions.php” and then search for “wp_enqueue_style”. If you see anything similar to “get_template_directory()” or “get_template_directory_uri()” then you’ll follow Scenario 2’s instructions. Otherwise follow Scenario 1’s instructions.

The important thing in both scenarios is to identify what the parent theme’s handle is. This is done by opening the
“functions.php” of the parent them and searching for “wp_enqueue_style”. The first parameter of this method is the parent handle.

Navigate to “yoursite.com/wp-content/themes” and create a new folder “yourtheme-child”.

Scenario 1

Create two files in “yourtheme-child” folder: “style.css” and “functions.php”.

style.css

/*
 Theme Name:   ThemeName Child
 Theme URI:    http://example.com/theme-name-child
 Description:  ThemeName Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     themename
 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:  themenamechild

functions.php

<?php

add_action( 'wp_enqueue_scripts', 'themename_enqueue_styles' );
function themename_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( 'INSERT_PARENT_HANDLE_HERE' ), 
        wp_get_theme()->get('Version') // this only works if you have Version in the style header
    );
}

Scenario 2

Create two files in “yourtheme-child” folder: “style.css” and “functions.php”.

style.css

/*
 Theme Name:   ThemeName Child
 Theme URI:    http://example.com/theme-name-child
 Description:  ThemeName Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     themename
 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:  themenamechild

functions.php

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style';
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

The final step is to navigate to Appearance in your WordPress Admin area and then activate the newly created child theme.