After yesterday’s post, I received some correspondence (AKA tweets) from @tomcoady. He pointed me to the WordPress codex documentation on child themes which adds an important component to the minimal child theme skeleton. He also suggested a look at wp-cli and child themes. Both excellent points.
Let’s begin with the WordPress recommended theme skeleton. In my example yesterday, I enqueued the parent theme’s CSS – which is fine as far as it goes. But if intend to add my own CSS, I should also enqueue the child style.css file at the same time. Here’s that addition:
add_action( 'wp_enqueue_scripts', 'gi_EnqueueParentStyles' );
function gi_EnqueueParentStyles() {
wp_enqueue_style("gi-twentyseventeen-parent", get_template_directory_uri()."/style.css");
wp_enqueue_style( 'gi-twentyseventeen-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'gi-twentyseventeen-parent' )
);
}
I have called wp_enqueue_style() twice – once for my parent theme – using get_template_directory_uri() to get the correct directory and once using get_stylesheet_directory_uri() to reference the child theme directory.
And why do this? In the old days, child themes simply included their parent theme’s CSS with a simple @include directive in the CSS file (see this older article for an example of this). This convention was deprecated in favour of wp_enqueue_style() because this function supports the asynchronous loading of scripts and is therefore more efficient.
It might seem that creating a child theme is beginning to look like a little bit of a pain in the ass. But this is really boilerplate – you don’t have to think much about it. Of course, managing repetitive boilerplate is the sort of thing that should be scriptable. And, of course, that’s absolutely the case. Remember that I introduced cp-cli on day four? Well, as you’d expect of an application for managing WordPress on the command line, wp-cli supports a command for generating a child theme. this is wp scaffold child-theme. Let’s run it:
./vendor/bin/wp scaffold child-theme \
twentyseventeen-gi-child \
--parent_theme=twentyseventeen \
--theme_name='getInstance child' \
--author='Matt Zandstra' \
--author_uri='https://getinstance.com' \
--theme_uri='https://getinstance.com/themeinfo' \
--activate
--path=site/wp
Because the twentyseventeen-gi-child theme already exists, wp-cli will ask me to confirm that I wish to overwrite the theme’s files. I could override that caution sith the --force flag. As you might expect, most of the flags I use will set fields in the style.css file. Once again, I must use --path to tell wp-cli where the installed WordPress instance lives. --activate activates the theme.
Here is the generated style.css:
/*
Theme Name: getInstance child
Theme URI: https://getinstance.com/themeinfo
Description: Twentyseventeen child theme.
Author: Matt Zandstra
Author URI: https://getinstance.com
Template: twentyseventeen
Version: 0.1.0
*/
And here is the generated functions.php file:
<?php
add_action( 'wp_enqueue_scripts', 'twentyseventeen_parent_theme_enqueue_styles' );
function twentyseventeen_parent_theme_enqueue_styles() {
wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'twentyseventeen-gi-child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'twentyseventeen-style' )
);
}
Arbitrary naming choices aside, it's pretty much identical to my earlier example. The difference is that this code is generated automatically - so we can run the command and forget about the details of implementation.
