Ordering Wordpress Stylesheets?

Question

I have a wordpress theme with a stylesheet that needs to be loaded last, since plugin css are interfering with my theme. I was wondering if there was some type of function I could use to make the main stylesheet load last in my theme.

Answer 1

You could add '!important' to the end of the css you want to override other classes

example:

h1 {
color:red !important;
}

Answer 2

wp_print_styles works better. just add a priority to the call, for example 99.

function load_css() {
        wp_enqueue_style( 'homepage-css', get_stylesheet_directory_uri() . '/css/homepage-css.css', array(), 0.256, 'all');
}
add_action( 'wp_print_styles', 'load_css', 99 );

Answer 3

You can always use !important to override other rules, but I recommend to also be sure that the plugin stylesheets are being inserted properly using the following method. By adding the priority number you can render them at a later time.

Be sure your stylesheets are loading before all your scripts inside the tag of your header.

You always need to load stylesheets before scripts and wordpress takes care of that if you use wp_enqueue_style and wp_enqueue_script

For example in your functions.php you should use

add_action('wp_enqueue_scripts', function(){
    wp_enqueue_style('main-style','http://yoursite.com/styles/main.css');
}, 99);

Wordpress then will place main.css in your header and giving a 99 priority means it will add it later than the rest (by default the priority of this function it's 10)

Be sure you got wp_head() in your header file.

Regards

Answer 4

when you enqueue your stylesheets, use a higher priority, e.g.:

add_action( 'wp_enqueue_scripts', array(&$this, 'theme_styles'), 99 );

If some plugins have hooks on 'wp_print_styles', then you have to use it instead, as 'wp_print_styles' will be written after 'wp_enqueue_scripts', iirc.

And as you have complete control over your theme, you also could include your styles directly into header.php, if the hassle with the actions isn't worth time...