Load Custom Template CSS first

  • Resolved southafricanrob

    (@southafricanrob)


    3 years ago

    Hi there,

    I have created a custom template, loaded it in settings and all is working fine, however the CSS for the custom template loads after the default template css. In other words for a second the template loads with the default style then renders with my style.

    In my customer template I call the stylesheet like this:

    /** load the template specific css */
wp_enqueue_style( 'diesel-petrol-style',  plugin_dir_url( __FILE__ ) . '/diesel-petrol-style.css' );

    How can I load my custom template CSS with a higher priority?

    Thank

Viewing 3 replies - 1 through 3 (of 3 total)
  • farroyo

    (@farroyob)

    Hi!

    Maybe the easiest way to accomplish loading CSS stylesheets in a certain order is using the priority parameter. To use it, you will have to wrap your wp_enqueue_style call inside a function and use add_action with the priority parameter at the end:

    function custom_stylesheets() {
    wp_enqueue_style( 'diesel-petrol-style',  plugin_dir_url( __FILE__ ) . '/diesel-petrol-style.css' ); 
}
add_action( 'wp_enqueue_scripts', 'custom_stylesheets', 99 );

    I hope that helps.
    Regards,

    I hope that helps.

    • This reply was modified 3 years ago by farroyo.
    Thread Starter southafricanrob

    (@southafricanrob)

    Thanks – yes this solved the issue.

    farroyo

    (@farroyob)

    That’s great! I’m glad I could help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Load Custom Template CSS first’ is closed to new replies.