CODEWITHSUNDEEP
csswordpress
Nick
Nick

Reputation: 14283

Wordpress - How to prioritize some stylesheets when enqueueing them

I'm working on a WordPress theme.

My theme uses bootstrap and another framework, plus some custom CSS as well.

I'd like to know if there's a way to decide the order of the stylesheets to include so that my custom CSS is loaded ALWAYS after the vendor ones.

I had a look around, also this question is basically asking the same thing as I am (Ordering Wordpress Stylesheets?) but the problem is that it's not a nice and clean solution in my opinion.

I don't want to use important on everything to override, and I don't want to manually add my styles to the header.php (the wp_enqueue_style function is there for a reason, and I'd like to use that function instead).

Reading the documentation, the only thing that may be slightly related is the use of the deps array, but I'm not sure it will do what I need.

here's the link to the documentation or your reference: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

the way I enqueue my stylesheets now is pretty basic:

in my functions.php:

function hw_resources()
{
    wp_enqueue_style('fontawesome-css', '/wp-content/themes/hwTheme/assets/css/font-awesome.min.css');
    wp_enqueue_style('bulma-css', '/wp-content/themes/hwTheme/assets/css/bulma.css');
//    wp_enqueue_style('bootstrap-css', '/wp-content/themes/hwTheme/assets/css/bootstrap.css');
    wp_enqueue_style('animate-css', '/wp-content/themes/hwTheme/assets/css/animate.min.css');
    wp_enqueue_style('hw-css', '/wp-content/themes/hwTheme/assets/css/hw.css');
    wp_enqueue_script('hw-js', '/wp-content/themes/hwTheme/assets/js/hw.js', array(), false, false);
}

add_action('wp_enqueue_scripts', 'hw_resources', 0);

The stylesheets are included, but mine (hw.css) is NOT the last one and so Bulma (which goes at the bottom) overrides some of my custom style.

any suggestions? Is the deps array useful for this reason? how do I use it?

thanks

Upvotes: 2

Views: 816

Answers (1)

Dejo Dekic
Dejo Dekic

Reputation: 2126

Well you can set your bulma.css as a dependency on your hw.css. So first you register your css via wp_register_style and then you use wp_enqueue_style.

Like so:

function hw_resources()
{
 wp_register_style( 'hw-css', get_template_directory_uri() . '/hw.css', array(), '1.0', 'all' );
 wp_register_style( 'bulma-css', get_template_directory_uri() . '/bulma.css', array( 'hw-css' ), '1.0', 'all' );
 wp_enqueue_style('hw-css');
}

add_action('wp_enqueue_scripts', 'hw_resources');

Upvotes: 1

Related Questions