8

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

Improve this question
1
  • Your function priority is being honored but after being added to the list they are (usually) rearranged to honor dependencies.
    – Andy Jacobs
    Mar 22, 2013 at 23:17

3 Answers 3

Reset to default
16

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.

Improve this answer
5
  • 1
    With this as a starting point it works. Thx! But to be honest, it doesn't really answer my question: :P Why has the priority no effect?? Are there some pitfalls to keep in mind? I just want to know this. I love Wordpress and want to know the In and Outs :D
    – Markus Schober
    Mar 22, 2013 at 18:25
  • Internally WordPress waits to collect all of the scripts before including them. Say WordPress adds 7 of its own script then you add your three. Some point much later WordPress looks at the list and includes them however it sees fit (by figuring out which scripts depend on each other). It doesn't matter what order you add yours because the order is ignored while WordPress looks at the dependencies. e.g. You add 3 scripts that need jQuery but jQuery is added fourth. jQuery is moved to the first position. You can only guarantee order by "3 needs 2", "2 needs 1".
    – Andy Jacobs
    Mar 22, 2013 at 23:15
  • Ok, I understand. With dependencies the priority parameter in 'add_action' will be ignored. But when I remove all dependencies the priority is still ignored. If I use f.e. add_action('wp_head', 'my_function', 5); it works. Is this behavior different on some hooks?
    – Markus Schober
    Mar 23, 2013 at 7:29
  • 1
    I'm going to try to make this clear one more time. Your priority is not ignored. That is the order in which they are added to the list. But the list gets rearranged. You can add them in wp_head, and it may work for now, out of sheer luck. But if you upgrade or add a plugin, it might fail. Just because they are added in order doesn't guarantee they will stay in order. The only way to guarantee that is using dependencies.
    – Andy Jacobs
    Mar 24, 2013 at 17:00
  • Ok, I think I understand. :D Thx for explaining this!!!!
    – Markus Schober
    Mar 25, 2013 at 19:39
5

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

test_enqueue_styles_1
test_enqueue_styles_3
test_enqueue_styles_2
Improve this answer
1
  • Voted for function add_action "Priority" eg , 10
    – khurram
    Jul 21, 2017 at 12:36
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.

Improve this answer
4
  • 2
    in addition to this, if you specify a dependency for each style, it doesn't matter what order you put them in.
    – Milo
    Mar 22, 2013 at 17:18
  • I know, I can do this in one function like your example. I'm doing it in this way, because I am using theme options and all the theme options stuff is in separate files.
    – Markus Schober
    Mar 22, 2013 at 18:00
  • Hm, you could probably still use wp_enqueue_style in your functions - and include the correct dependency, as Milo and infamouse suggest.
    – vancoder
    Mar 22, 2013 at 18:06
  • 1
    Sorry, a part of my last comment got lost. Here is the full :-) I know, I can do this in one function like your example. I'm doing it in this way, because I am using theme options and all the theme options stuff is in separate files. The main stylesheet is enqueued in the functions.php and the other stylesheets are enqueued in other files. So I tried it this way.
    – Markus Schober
    Mar 22, 2013 at 18:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.