Hook ‘wp_enqueue_scripts’ priority has no effect

The question:

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!!!

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

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.

Method 2

I know it’s too late. But, Now, It works as expected.

add_action has 3’rd arguments which are the priority. Below, I have enqueued the scripts with priorities 10, 12 and 14. So, It enqueues the scripts with the given priorities frontend.

Below, Is my snippet and it works well.

add_action( 'wp_enqueue_scripts', 'test_enqueue_styles_1', 10 );
add_action( 'wp_enqueue_scripts', 'test_enqueue_styles_2', 14 );
add_action( 'wp_enqueue_scripts', 'test_enqueue_styles_3', 12 );

function test_enqueue_styles_1() {
    wp_enqueue_style( 'font-awesome-1-css', get_template_directory_uri() . 'assets/css/font-awesome.min.css' );

function test_enqueue_styles_2() {
    wp_enqueue_style( 'font-awesome-2-css', get_template_directory_uri() . 'assets/css/font-awesome.min.css' );

function test_enqueue_styles_3() {
    wp_enqueue_style( 'font-awesome-3-css', get_template_directory_uri() . 'assets/css/font-awesome.min.css' );

Enqueue sequence


Method 3

Hmm, is there a reason that you are doing it this way? The more conventional method is below.

(The following assumes your stylesheets are in your theme’s css directory.)

function my_enqueue_scripts() {
    wp_enqueue_style( 'stylesheet_one', get_template_directory_uri() . '/css/stylesheet_one.css' );
    wp_enqueue_style( 'stylesheet_three', get_template_directory_uri() . '/css/stylesheet_three.css' );
    wp_enqueue_style( 'stylesheet_two', get_template_directory_uri() . '/css/stylesheet_two.css' );

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

That said – I’m not sure why the priorities in your method don’t work. We’d probably need to see the code in the attached functions.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment