How to load all plugins CSS after child theme CSS?

You have 3 options:

Option 1:
Using dependencies, first of all get the style handler, if you have access to the file you can grab it from the wp_enqueue_style function, if not, inspect the HTML code and find the id the handler its the id without the -css

then either if you are using wp_enqueue_style or wp_register_style, there is a param called $deps which is an array of dependencies for the CSS file, here its an example of a child theme loading the parent CSS file as a dependency, so it loads first:

function my_theme_enqueue_styles() {

    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ), //HERE THE HANDLE OF THE CSS FILE I WANT TO LOAD FIRST
        wp_get_theme()->get('Version')
    );
}

Option 2:
Using the priority of execution in the list of attached actions to a hook, there is a $priority parameter in the add_action function, by default the value its 10. You could either set it to 20 if you see the theme CSS its not setting it, or if you have access to the theme files set it to ssay 20 and set your plugin to 30, if not just set it to a higher number like 9999 there is no limits and no performance penalties:

add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style', 9999 );

Option 3:
Using the order of the hook, you can add your enqueue function to the wp_footer action, making sure the theme CSS file is loading in the wp_head

add_action( 'wp_footer', 'load_my_css_file' );

So the theme CSS file will load in the <head> and the plugin CSS file will load later in the footer.

Related Posts: