3

I have a small bit of hourly-changing css and I want to

  1. keep it in a second file (apart from style.css) and

  2. load it after my theme's style.css file.

I believe I can make it load before style.css by setting its priority to the style.css minus one (e.g. if the main style.css has a priority of 10, my bit of code would have a priority of 9).

But here's my problem: apart from trial and error I don't know how to identify, programmatically the priority of a style sheet. I know could simple use the method of halving to hone in on the value, but I'd rather not do that. It would be nice to learn a principled way of solving this problem. Perhaps there is a default priority of main-theme CSS file? If this is the case I can easily try the ($defaultPriorityValue - 1). Is this possible, and if not what is a good way to do this?

p.s. I do not want to enqueue inline styles in my functions.php because I need to keep this code in a separate file

Although I found the functional solution I listed in the answers below, I would still like it if someone could explain if there is a way to id, programmatically, the priority of a sheet. Thanks!

  • 1
    Priorities don't work that way, a priority of 11 would load after not before a priority of 10. You want a priority of 9, think of it as an ordering rather than a magnitude, the 9th happens before the 10th, etc – Tom J Nowell Dec 31 '16 at 14:24
  • Yes, you are right, I tend to bungle things like that, hence my username. :) I'll change it in the question – CoderScissorhands Dec 31 '16 at 14:31
2

When you properly enqueue a file, an instance of the wp_styles (more on this) class is created. The priority of actions is ignored. So it doesn't matter if you write anything like

add_action ('wp_enqueue_scripts','function_adding_main_style',10);
add_action ('wp_enqueue_scripts','function_adding_small_style',11);

The reason is exactly the existence of the dependency system. WP first collects all enqueued style files and then checks them for dependencies. If A.css is enqueued before B.css but the former depends on the latter, they will be loaded accordingly. You can see this reordening happen in the all_deps method of the parent class.

To cut a long story short: you're not supposed to mess with the priority of style files outside the dependency system that WP gives you. Your own solution is the best.

That said, you can always circumvent the enqueueing system and echo your file directly towards the end of the wp_head hook. Unelegant, but effective.

0

The Dependency Solution

One functional solution I found and successfully tested came from @helgatheviking's answer to this question. This solution involves setting a dependency on small CSS file (which is a third argument) when enqueuing it. You set the small CSS file's dependency to the handle/id of the main CSS file.

 wp_enqueue_style(
        'my-little-css-style',
        get_stylesheet_directory_uri() . '/my_little_style.css',
        'themename-style' // this is the dependency, which I set to  the handle of the main css stylesheet. It makes the small sheet load before the main one. 
    );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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