Include CSS the right way in a WordPress’ child theme

We really should be using wp_enqueue_style functions to include your theme’s stylesheets rather than using @import statements. The enqueue functions allows us to specify dependencies in much better way.

//enqueue style for child theme
function  custom_child_enqueue_styles(){
	// enqueue parent styles
	wp_enqueue_style('parent-theme', get_template_directory_uri() . '/style.css' );
	// enqueue child styles - style.css
	wp_enqueue_style('parent-theme-child', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
	// enqueue child styles - scss/child.css
	wp_enqueue_style('parent-theme-child-scss', get_stylesheet_directory_uri() .'/scss/child.css', array('parent-theme', 'parent-theme-child'));
}
add_action('wp_enqueue_scripts', 'custom_child_enqueue_styles');

Leave a Reply