Chappy Tabby

How to load style sheets added by WordPress plugins before your theme’s style sheet

Home »  Blog » WordPress » How to load style sheets added by WordPress plugins before your theme’s style sheet

Some plugins load their stylesheets automatically.

That may conflict with your theme’s stylesheet since wp_head() usually execute after wp_enqueue_style() which uses to load theme’s stylesheet.

The solution is basically same as how to disable “style.min.css” in the previous article.

So, add wp_dequeue_style() to disable plugin’s stylesheet(s) you want to disable, then add add_action() to load same time as executing wp_enqueue_scripts() in functions.php.

You may also want to load plugin’s stylesheets but load after your theme’s stylesheets.

It doesn’t work if you just use wp_dequeue_style() and wp_enqueue_style() to remove those stylesheets.
The reason why that doesn’t work at all is because stylesheets you set in those functions eventually load again via wp_head().

I encountered a problem due to the stylesheet “front.min.css” used by the plugin “Cookie Notice.”
This stylesheet overwrites changes I made in my theme because it loads after my CSS file.

The solution is just load style.css after front.min.css.

To load front.min.css (Cookie Notice’s stylesheet) after style.css (theme’s stylesheet), you need to correctly use wp_enqueue_style() and wp_dequeue_style(), set wp_enqueue_style’s $handle argument.

Find the stylesheet’s id to set the right argument by examining HTML output.

Here is the link tag to set the stylesheet for Cookie Notice.

<link rel="stylesheet" id="cookie-notice-front-css" href="https://chappytabby.com/wp-content/plugins/cookie-notice/css/front.min.css?ver=cdb0c695c86580d53eb6531450eb788f" type="text/css" media="all">

You need to delete “-css”, the last part of “cookie-notice-front-css” because WordPress automatically add “-css” after link tag’s id attributes.

Code to load front.min.css (Cookie Notice’s stylesheet) before style.css (theme’s stylesheet) (add these codes in functions.php)

1: Disable plugin’s stylesheet (Cookie Notice’s front.min.css in this case)

// set $tag argement to apply change on wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'remove_block_library_style');
function remove_block_library_style(){
// disable front.min.css
  wp_dequeue_style('cookie-notice-front');
}

2: Load front.min.css after style.css

function load_styles(){
  wp_enqueue_style('typekit', 'https://use.typekit.net/opl6gbx.css', false, null, 'all');
// Use wp_enqueue_style to load front.min.css first
// Set $handle argument to the different value of cookie-notice-front
// The value of the argument $ver is characters after "?ver=" in link tag's href attribute
  wp_enqueue_style('ct-cookie-notice-front', 'https://chappytabby.com/wp-content/plugins/cookie-notice/css/front.min.css', false, 'cdb0c695c86580d53eb6531450eb788f', 'all');
// Then load style.css
  wp_enqueue_style('ct-main-styles', get_template_directory_uri() . '/style.css', false, null, 'all');
}

Changes in your theme’s stylesheet, style.css will be applied.

Reference

https://wordpress.stackexchange.com/questions/311361/removing-specific-style-from-wp-head

The material used in the featured image is Designed by rawpixel.com / Freepik

Inquire about WordPress

Related Posts

«

WordPress

»