2

As for now, my CSS hierarchy goes like this:

Theme > plugins (mainly page builders) > Child theme.

How to load all plugins CSS last in hierarchy?

5
  • what code are you using to load your theme CSS and your plugin CSS?
    – David Lee
    Sep 11, 2017 at 5:42
  • It is impossible without modifications of WordPress core: wordpress.stackexchange.com/questions/71406/… Sep 11, 2017 at 8:07
  • @DavidLee I use no outer code for that. I didn't try to change how WP loads these.
    – Ben
    Sep 11, 2017 at 16:18
  • But how WP are loading them currently? we need to know and see the actual code, even if its the default of wordpress.
    – David Lee
    Sep 11, 2017 at 18:08
  • I don't understand what you mean then - Wordpress loads the child theme's CSS as it would load any other child theme's CSS. Regarding to Elementor's CSS (my page builder), I don't know.
    – Ben
    Sep 11, 2017 at 18:30

2 Answers 2

3

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

enter image description here

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.

6
  • I am not a PHP developer. I am a humble JavaScript junior programmer. I don't see how to use either option to make sure my page builder (Elementor) would be loaded after my child theme. Can you please example this in either of the ways? This could be more intuitive for me and I could likely understand that then.
    – Ben
    Sep 11, 2017 at 17:57
  • Are you creating your own plugin following a tutorial? or you already have something setup and want to change only that part?
    – David Lee
    Sep 11, 2017 at 18:09
  • I use Elementor. A page builder, to build my pages. I just want to load its CSS after the child-theme's CSS.
    – Ben
    Sep 11, 2017 at 18:29
  • i think we need to go one step back, why you want to do that? the child-theme's CSS is overriding the elementor CSS? in theory the elementor CSS should be loading in that order already (inline even)
    – David Lee
    Sep 11, 2017 at 18:40
  • Yes, it overrides that. While it is Elementor that should override (otherwise, I couldn't combine CSS writing with Elementor easily and will work less efficient).
    – Ben
    Sep 11, 2017 at 18:46
1

It depends on when you execute the wp_enqueue_scripts action. You need to include priority parameter and set to it some high number:

add_action('wp_enqueue_scripts', 'my_enqueue_scripts', 10000);
function my_enqueue_scripts() {
  // enqueue files //
}

This means that the files enqueued with this function will be added very late, and if no other plugin/theme registers enqueue with a higher number, styles registered here will load at the end of the HEAD after all other CSS files.

2
  • Wouldn't this create "ugly" rendering of webpages?... How to make sure it will be directly after my page builder (Elementor)?
    – Ben
    Sep 11, 2017 at 16:19
  • No way to do that, WP registers scripts based on the action priority. Sep 11, 2017 at 16:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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