Override CSS settings of plugins

3 comments

1. Will be interesting know which answer developers think is ‘better’, so as an alternative to Johanne’s answer (which can present difficulties if the plug-in loads scripts late, or starts moving them around without warning)

   Prevent the stylesheet from loading

   If you’ve included all necessary styling in your style.css then you can prevent the plug-in’s stylesheet from loading:

   add_filter( 'style_loader_tag', 'wpse106104_disable_stylesheet', 10, 2 );
   function wpse106104_disable_stylesheet( $link_tag, $handle ){
   
       if( 'plugin-script-handle' == $handle ){
            $link_tag = false;
       }
       return $link_tag;
   }
   

   This has the advantage of not requiring additional stylesheets to be loaded – but the plug-in’s CSS is then included in all page loads, so this may not be desirable.

   Replacing the stylesheet

   Otherwise, you can copy the stylesheet into your theme, edit and then ensure WordPress uses it instead:

   add_filter( 'style_loader_src', 'wpse106104_replace_stylesheet', 10, 2 );
   function wpse106104_replace_stylesheet( $stylesheet_src, $handle ){
   
       if( 'plugin-script-handle' == $handle ){
            $stylesheet_src = get_template_directory_uri() . '/css/themes-copy-of-plugin.css';
       }
       return $stylesheet_src;
   }
   

2. Include overrides after wp_head / wp_footer actions

   The plugin’s stylesheet(s) are most likely inserted into the page using WordPress’ enqueue functions.

   If so, scripts and stylesheets will be added either where wp_head() is located (usually a theme’s header.php file, the default location) or where wp_footer() is (usually a theme’s footer.php file, if so specified in the enqueue parameters), respectively.

   Hence, if you want to override plugin css, the stylesheet responsible should be loaded at a later point.

   Going with the default option of the sheet being inserted into the header, a mock-up snippet of header code could look like this:

   <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/css/reset.css?ver=1.0" />
   <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>?ver=1.0" />
   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
   
   <?php wp_head(); ?>
   
   <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/css/plugin-override.css?ver=1.0" />
   

   Proper Enqueueing with dependencies

   Alternatively, you could (should) properly enqueue the stylesheet with the overrides yourself and make it dependent (WP will then load it after the dependency) on the plugin’s stylesheet.

   In order to be able to do so, you’d have to examine the plugin code, and find the handle of the stylesheet to reference it as a dependency when registering your own.
   cd /path/to/plugin && grep -r wp_enqueue_style . from a *nix shell should help you out.

   Then, in your theme’s functions.php file, you’d add the following:

   add_action( 'wp_enqueue_scripts', 'wpse_register_plugin_override' );
   
   function wpse_register_plugin_override() {
       wp_register_style(
           'wpse-plugin-override', /* your handle */
           get_template_directory_uri() . '/css/plugin-override.css', /* the file */
           array( 'the-plugins-stylesheet-handle' ), /* dependency */
           1.0 /* version of your stylesheet */
       );
       wp_enqueue_style( 'wpse-plugin-override' );
   }
   

3. If you just want to override one class, for example .plugin-class {width: 100px;}, you can just add the same class to your style.css file and add !important to it and that will override it.

   .plugin-class { width:200px !important;}
   

Comments are closed.