Hook ‘wp_enqueue_scripts’ priority has no effect

by

In a theme I am working there are up to 3 Stylesheets. I am using the hook ‘wp_enqueue_scripts’. The order of the stylesheets is important for overwriting styles.
I have a code like this:

add_action('wp_enqueue_scripts', 'add_stylesheet_one', 10);
add_action('wp_enqueue_scripts', 'add_stylesheet_two', 14);
add_action('wp_enqueue_scripts', 'add_stylesheet_three', 12);

With this priorities the stylesheet order should be ‘stylesheet_one’, ‘stylesheet_three’ and ‘stylesheet_two’. But the priority doesn’t have any effect. I’ve tried different numbers but the order does not change.
Am I missing something?

Thx for Help!!!

3 s
3

The problem is that your actions are being run in the order you perceive but the styles are just being collected by WordPress and included in a random order.

The order of your add_actions will not be important. I would do this:

function add_all_stylesheets() {
  // you omitted this from your question, see below
}
add_action('wp_enqueue_scripts', 'add_all_stylesheets');

Now – if you’d like your scripts to be included in order you’ll need to have them “depend” on each other so they cascade.

function add_all_stylesheets() {
  wp_enqueue_style( 'stylesheet-one', get_template_directory_uri() . '/css/stylesheet-one.css' );
  wp_enqueue_style( 'stylesheet-two', get_template_directory_uri() . '/css/stylesheet-two.css', array( 'stylesheet-one' ) );
  wp_enqueue_style( 'stylesheet-three', get_template_directory_uri() . '/css/stylesheet-three.css', array( 'stylesheet-two' ) );
}
add_action('wp_enqueue_scripts', 'add_all_stylesheets');

Now your “stylesheet-two” depends on “stylesheet-one” and “three” depends on “two. This should be the effect you want.

Leave a Comment