MVCT (Minimum Viable Child Theme)

There is actually very little to creating a technically operational child theme. It involves the creation of one directory and two files.

Each theme (or plugin for that matter) exists in its own directory. The directory can be called anything, but I favour a variation or amendment of the parent theme name so that someone looking at a directory listing on the server can see that they are related.

The other important thing is to make sure that the child theme directory has the same subdirectory structure as the parent (if you need to put things in those subdirectories).

The two files are:

styles.css

This file has a comment header that “links” the child theme to the parent theme. It looks like this:

/*
 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
*/

The most important entry above is the “Template:” entry. This is set to the directory name of the parent theme to related the child theme to the parent. So when the child theme in this example is loaded it will look in the Themes folder for a directory called “twentyfifteen” and use that as the parent theme.

Of course, there is also a high probability of custom CSS being added to the styles.css file, but as indicated above there are other ways to handle custom CSS as well. In general, however, if I’m using a child theme, then I usually put my CSS in the child theme or, at the very least, in a custom.css file in the child theme so that my edits are captured by my version control system. (more on this later).

functions.php

Technically speaking, all a child theme needs to be officially functional is the styles.css file.

However, in practice the functions.php file is needed to enqueue (make available) the parent css stylesheet, the child css stylesheet and define their relationship. Also, typically the styles.css file will contain actual css that depends on the parent css being available.

Here’s how a generic function.php file would look with this enqueue function in place.

function my_theme_enqueue_styles() {

    $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')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

And here is an example of the enqueue function from a live child theme. In this case the parent theme registers its styles as baskerville_style.

// Enqueue Child Theme Styles
function theme_enqueue_styles() {

  $parent_style = 'baskerville_style';

  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 )
  );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Of course the functions.php file is also useful for adding other bits of php code for various purposes.

See the WordPress codex entry on Child Themes for further information.

Additional files

In addition to the above two files, a style sheet may include additional files containing PHP, CSS, JS, fonts, images and documentation.

While not mandatory for child themes, I also like to include a screenshot.png file. This provides a visual thumbnail for the child theme in the WordPress theme selection interface, which makes it look a little more like I know what I’m doing. Typically, in multisite situations, I will copy the screenshot.png from the parent file and then edit it in a graphics program to overlay some text identifying the site that the child theme is for.

And Activate

The child theme is now ready to activate in WordPress. Of course, it doesn’t actually do anything yet, but we’ll get there.