Loading a child-theme’s style.css after the parent’s

by

As @Andy Macaulay-Brook pointed out WordPress doesn’t load child-theme's style.css . I guess parent theme might be en-queuing it.

  • De-queue the child-theme style.css first and then enqueue it
  • En-queue parent’s style.css before child theme’s style.css

De-queue the child-theme style.css

You can de-queue the child-theme’s style.css by using the handle.You can find out the handle either by looking at the parent theme (assuming it’s being loaded from it) or by looking at the link of the page source.

For example:

Link from the site using Twenty Fifteen theme looks like this

<link rel="stylesheet" id='twentyfifteen-style-css'  href="http://wp.dev/wp-content/themes/twentyfifteen/style.css?ver=4.5.3-alpha-37528" type="text/css" media="all" />

For which the handle is twentyfifteen-style which is the id of the link tag but without -css.

So we can de-queue this using wp_dequeue_style hooking to wp_enqueue_scripts

wp_dequeue_style('twentyfifteen-style');

En-queue parent’s style.css before child theme’s style.css (depends on list of dependencies)

By changing the priority of the wp_enqueue_scripts hook less than default (10) and loading the parent theme style.css. (I’m unsure of this have to check)

function wpse_227769_enqueue_scripts() {
   //Load parent theme style.css here
}
add_action( 'wp_enqueue_scripts', 'wpse_227769_enqueue_scripts', 9 );

Leave a Comment