Stylesheet Enqueue Order and Best Practices

Question

i would like to do the following:

customize a theme to my likings for use on several sites and installations. so i can make "global" changes (via own plugin?)

then i would like to have a site specific stylesheet (child theme style.css?)

my problem is, that the stylesheet of my plugin gets loaded after main theme css and child theme css. how could i achive this order?

main.css plugin.css child.css

or is there a better way for this?

thank you

Answer 1

You can simply make your plugin css dependent upon the theme css and the child theme css dependent upon the plugin css.

function wpdocs_custom_scripts() {

    // example theme style
    wp_enqueue_style( 'theme-style', '#' );

    // Plugin css
    wp_enqueue_style( 'plugin-style', '#', array( 'theme-style' ) ); // see "theme-style" passed in $deps param,

    // Child theme css
    wp_enqueue_style( 'child-style', '#', array( 'plugin-style' ) ); // see "plugin-style" passed in $deps param,
}
add_action( 'wp_enqueue_scripts', 'wpdocs_custom_scripts' );

This way, they will be loaded in this order

<link rel='stylesheet' id='theme-style-css'  href='#' type='text/css' />
<link rel='stylesheet' id='plugin-style-css'  href='#' type='text/css' />
<link rel='stylesheet' id='child-style-css'  href='#' type='text/css' />

Another Approach: You can also make use of the priority param in wp_enqueue_scripts. Make the priority lesser to load earlier. Like this

function wpdocs_custom_theme_scripts() {
    // theme style
    wp_enqueue_style( 'theme-style', '#' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_custom_theme_scripts', 9 );

function wpdocs_custom_plugin_scripts() {
    // Plugin css
    wp_enqueue_style( 'plugin-style', '#' );
}

add_action( 'wp_enqueue_scripts', 'wpdocs_custom_plugin_scripts', 10 );

function wpdocs_custom_child_scripts() {
    // Child theme css
    wp_enqueue_style( 'child-style', '#' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_custom_child_scripts', 11 );