Not using @import for WordPress child themes

It is easy to create a WordPress child theme. Just create a folder in wp-content/themes/ and add a style.css file with reference to the parent theme folder. This way you do not have to touch the original theme and can still update the parent theme without losing your changes.

style.css:


/*
 Theme Name:   Twenty Fourteen Child
 Template:     twentyfourteen
 Text Domain:  twentyfourteen-child
*/

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

The documentation describes using @import to load the parent stylesheet. But @import to load CSS is not recommended, because it slows down page rendering. Also plugins that minify and concatonate stylesheets cannot easily find imported stylesheets.

A better approach is to use an action hook in the functions.php of the child theme.


<?php
function twentyfourteenchild_wp_enqueue_scripts()
{
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'twentyfourteenchild_wp_enqueue_scripts' );