Identifying the priority of style.css so I can make a small CSS file load last

Question

Identifying the priority of style.css so I can make a small CSS file load last

CoderScissorhands

2016年12月31日 16:32

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

keep it in a second file (apart from style.css) and
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!

Topic wp-dependencies wp-enqueue-style order hooks theme-development Wordpress

Category Web

cjbj · Accepted Answer · 2016年12月31日 16:30

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.

CoderScissorhands · Accepted Answer · 2016年12月31日 14:46

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. 
    );

Identifying the priority of style.css so I can make a small CSS file load last

The Dependency Solution

About