Child Theme on WordPress 4.7 Onwards

TwentySeventeenIf you are just starting to develop WordPress theme, it couldn’t be a better time to start. The web contains numerous links to very detailed tutorials on how to start WordPress theme development from scratch. However, most of them use outdated practices. The WordPress evolves all the time.

WordPress 4.7 that was released December 6, 2016, makes theme development much more easier and streamlined. Often, the new developers start to build a new theme from scratch. It isn’t necessary and at times overwhelming approach to learning new things, especially for WordPress theme development. Instead, one could make small changes to existing theme by using child themes.

Child themes are meant to extend the functionality and design of its parent theme. It’s the best starting place to learn how WordPress theme development and test out your skills on it. In this blog post, I am going to share a boilerplate child theme that can be used with any (parent) theme. Please know that we can not have a child theme for another child theme.

A WordPress child theme primarily consists of the following two files…

• style.css – to make changes in the design
• functions.php – to make changes in the functionality of the site

Style.css

style.css file is a must-have file for any WordPress theme (child or parent theme). It contains information about the theme itself. For example, let’s look at the simplest possible style.css file that extends TwentySeventeen theme…

/*
 * Theme Name: TwentySeventeen Child
 * Template: twentyseventeen
 */

The first line (Theme Name) is obvious by its name. The second line template represents the name of the directory of the parent theme. Instead of template, if it is mentioned as parent, it would have been more clearer. That said, WordPress is moving on to parent naming scheme on other places since version 4.7.

Function.php

function.php is an optional file for any theme. However, due to how WordPress works, you’d see a style-less site with an empty functions.php file. That’s because, WordPress loads only the child theme’s style.css file overriding the parent theme’s. In order to solve this issue, developers have opted for multiple solutions in the past. However, let’s forget the other practices and start using the best. Without any further ado, let’s dive in to the actual code that can be used to extend TwentySeventeen theme…

add_action( 'wp_enqueue_scripts', 'tinywp_enqueue_parent_child_style' );

function tinywp_enqueue_parent_child_style() {
    $parent_style = 'twentyseventeen-style'; // change this if you modify another parent theme

    // lets remove the traces of existing stylesheet declaration on the parent theme
    wp_dequeue_style( $parent_style );
    wp_deregister_style( $parent_style );

    // let's override the parent style to point to the correct file
    wp_enqueue_style( $parent_style, get_parent_theme_file_uri( 'style.css' ) );

    // now let's include child theme's stylesheet after parent's
    wp_enqueue_style( 'child-style',
        get_theme_file_uri( 'style.css' ),
        array( $parent_style  ),
        filemtime( get_theme_file_path( 'style.css'  )  )
    );
}

The above code would correctly load the parent theme’s style and then loads the child theme’s style. What’s more! It even appends the file modification time of the child theme’s stylesheet as a query string, so that any modifications are instantly applied to the browsers.

Learn more on the new functions, hooks and behaviour for theme developers in WordPress 4.7.

Happy Theming!