WordPress plugins have the ability to include their own CSS files and most of the time this is great. Good plugins will write selectors that only affect the plugins content but some of the plugins don't write specific enough CSS or their CSS uses techniques that make it more challenging to override with your own CSS. Regardless of the reason I knew there had to be a better way to allow your own styles to be applied to the content.
I knew that WordPress has the ability to register & deregister script/style files but I was primarily finding solutions which use CSS specificity to override the styles. This works just fine but that's an awful lot of work I would prefer not to do. Besides, there is no need to override the styles and clutter your own stylesheet when you can simply prevent the file from being sent in the first place.
All you have to do is add an action right before the styles are sent to the browser.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //dequeue css from plugins | |
| add_action('wp_print_styles', 'mytheme_dequeue_css_from_plugins', 100); | |
| function mytheme_dequeue_css_from_plugins() { | |
| wp_dequeue_style( "plugin-css-file-handle" ); | |
| } |
In this action you simply list the handle(s) of the file(s) you want to ignore. You can easily find the handle in the plugin's file in the wp_enqueue_style() method. You can dequeue as many files as you need inside of the mytheme_dequeue_css_from_plugins() function. You can even dequeue script files if you need to.
Widget styles are enqueue-d at a later stage. You can handle these by also deregistering the style. So after the dequeue method also call:
wp_deregister_style( “plugin-css-file-handle” );
is “plugin-css-file-handle” the name of the css file?
Its a bit confusing.
Actually no. It’s what the other plugin uses to refer to that CSS file. When another plugin enqueue’s a CSS file they have to give it a handle. You have to use that same handle to disable it. The best way to find the handle is to look through the code.
I hope that helps! 🙂
Hi,
How can i dequeue multiple stylesheets and scripts?
Thanks.
In the function where you dequeue the style sheets you run this line multiple times
wp_dequeue_style( “plugin-css-file-handle” );Each time you reference a different “plugin-css-file-handle”
This is not working with me, I try to dispel css from assets folder in parinte theme, but does not work
In function of parent theme they use define
define(“CC_CSS”, get_template_directory_uri() . ‘/assets/css/’);
Then load css like here:
add_action(‘wp_enqueue_scripts’, ‘heal_cc_script’);
if(!function_exists(‘heal_cc_script’)) {
function heal_cc_script(){
global $heal_option;
//css include
wp_enqueue_style(‘wp-mediaelement’);
wp_enqueue_style(‘all-style’, CC_CSS .’all-style.css’ );
wp_enqueue_style( ‘cc-style’, get_stylesheet_uri() );
I set in child theme function.php this lines:
add_action(‘wp_print_styles’, ‘mytheme_dequeue_css_from_theme’, 100);
function mytheme_dequeue_css_from_theme() {
wp_dequeue_style (‘all-style’, get_template_directory_uri() . ‘/assets/css/all-style.css’ );
}
I try some other way but still don’t work, what the ( $handle ) is will be here? isn’t it this ‘all-style’ ?