Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
Your function priority is being honored but after being added to the list they are (usually) rearranged to honor dependencies. –  infamouse Mar 22 '13 at 23:17

2 Answers 2

up vote 3 down vote accepted

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.

share|improve this answer
    
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 '13 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". –  infamouse Mar 22 '13 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 '13 at 7:29
    
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. –  infamouse Mar 24 '13 at 17:00
    
Ok, I think I understand. :D Thx for explaining this!!!! –  Markus Schober Mar 25 '13 at 19:39

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.

share|improve this answer
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 '13 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 '13 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 '13 at 18:06
    
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 '13 at 18:17

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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