How to organize priority of plugins CSS files?

Question

How to organize priority of plugins CSS files?

Stewart Wallace

2022年2月27日 04:05

I'm developing website with theme (Astra Pro with child theme) and plugins. While I'm checking my performance in Chrome Dev Tools trace shows non-critical stylesheets with high priority.

Example — lightbox stylesheet is one of the primary files:

Is there a way to control those priorities, so I could place critical files first, and non-critical later?

Beginner level answers would be greatly appreciated.

EDIT #1:

I have added to my child theme functions.php code:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 99 );
function theme_enqueue_styles() {
    wp_enqueue_style( 'slb_core-css', '/wp-content/plugins/simple-lightbox/client/css/app.css' );
}

a. slb_core-css is a stylesheet id b. once I made error in path, I got 404 error, so somehow it's working, but:

nothing happens. Stylesheet is in the same place as before.

Topic wp-enqueue-style css Wordpress

Category Web

John Swaringen · Accepted Answer · 2019年11月18日 16:20

I came across this at https://wordpress.org/support/topic/zerif-lite-child-theme/?replies=23#post-7476423

It appears that WordPress add_action will allow you to set priority as an integer.

add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )

By adding the "wp_enqueue_styles" or "wp_enqueue_scripts" as an action method you can set the priority of the styles. It's a bit of a hack because you have to load every script using a different function but this should work.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 99 );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

How to organize priority of plugins CSS files?

About