1

I have created a little plugin that creates a widget that I've made, basically just a pretty <ul> element. Unfortunately, all default widget styles are overriding my custom CSS, and adding !important to certain styles are breaking a few things due to various sizes and color variations.

Is there a way around this? I just want the stylesheet to work for the one widget I have made and it not load from the defaults.

Any tips/suggestions would be greatly appreciated.

  • 1
    It's generally a bad idea to override a theme's CSS with your plugin, but adding a custom unique class/id to your widget should do the trick. – Wyck Jul 6 '14 at 23:06
  • Unfortunately I have tried adding classes and ID's, the default styles in .widget for pretty much every theme are overriding my stylesheet. – Eddie Jul 6 '14 at 23:10
  • A link to the problem would be helpful in this case. The more detail you can provide, the more likely we are to effect a resolution. – Imperative Ideas Jul 7 '14 at 2:06
1

I first want to start of by saying that I agree with what @Wyck said

It's generally a bad idea to override a theme's CSS with your plugin, but adding a custom unique class/id to your widget should do the trick.

You said @Wyck's recommendation did not work. I probably would think this is the way to go, and the only way as to make sure you don't interfere with a theme's styling. You should use a unique id or class and then target that selector. I just think your execution here is wrong, that is why it doesn't work.

Firstly, you should avoid using !important in your css. Usually this means your priority of a stylesheet is not correctly set

Secondly, priority is you problem here. All your styling is been overridden by the main stylesheet, because of the fact that your styles get loaded first, and not last. I believe you have enqueued your stylesheet with wp_enqueue_style() and then hooked it to wp_enqueue_scripts

function my_plugin_style() {
       wp_enqueue_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
   }

add_action( 'wp_enqueue_scripts', 'my_plugin_style' );

If you take a look at add_action( $hook, $function_to_add, $priority, $accepted_args );, you'll see that the third parameter ($priority) is where you set the priority at which your hook must me executed. The higher the number, the lower the priority. In your case, you'll need to set a very low priority to make sure hat your styles get loaded last. So you'll need to do something like this

add_action( 'wp_enqueue_scripts', 'my_plugin_style', 9999 );
  • Did my answer solve your problem. If yes, please accept my answer by clicking on the checkmark below the up/down arrows next to my answer. If not, where is my answer lacking and how can I improve my answer to solve your problem – Pieter Goosen Jul 8 '14 at 7:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.