No more @import for me

Well, at least not for current WordPress child themes.

I like child themes and always recommend that people use them instead of modifying any WordPress theme directly. Using a child theme makes your changes belong to you and they won’t get erased when the original theme gets updated.

I’ve told people to use something like this in their child theme’s style.css file.

/*
Theme Name: Sorbet Child theme for Mostly Harmless
Theme URI: https://blog.dembowski.net/
Description: Child theme for the Sorbet theme
Version: 0.1
Author: Jan Dembowski
Author URI: https://blog.dembowski.net/
Template: sorbet
*/

@import url("../sorbet/style.css");

/* Start your custom CSS after this line */

See that @import line? That had previously been required if you wanted to inherit the parent theme’s CSS. At the moment my child theme does not have that @import anymore and instead I’ve created a functions.php file with these lines in it.

<?php

function mh_sorbet_child_style() {
        wp_enqueue_style( 'sorbet-parent-style', get_template_directory_uri() . '/style.css' );
        // wp_enqueue_style( 'sorbet-child-style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'mh_sorbet_child_style' , 5 );

Which really is a more WordPress way to do it. I added a function mh_sorbet_child_style() where I first queue up the parent theme’s style.css and then queue up the child theme.

Notice how I commented out the second line? The parent theme already queues up the current theme’s style.css file and in my case that is sorbet-child/style.css. In my child theme I do not need to queue it a second time as it’s not necessary.

But I do want to ensure that the parent theme is queued up earlier than the child theme CSS. That’s why I add the wp_enqueue_scripts with a priority of 5 instead of the default 10. That should always load the parent CSS first. If the theme does not queue up it’s style.css that way then I would un-comment out that line.

Just as before, any new CSS will go into my child theme’s style.css file.