How to Add Custom Styles to WordPress Widgets

Most sidebar widgets in WordPress usually look the same. It would be fine if all your widgets had the same importance, but the truth is that some widgets are more important for your site’s growth than others. For example, an email list subscription widget is certainly more important than an archives widget. Wouldn’t it be nice if you could easily style important widgets differently? In this article, we will show you how to add custom styles to WordPress widgets.

Using a Plugin to Add Custom Styles to WordPress Widgets

First thing you need to do is install and activate the Widget CSS Classes plugin. Upon activation simply go to Appearance » Widgets and click on any widget in a sidebar to expand.

You will notice a new CSS Class field below your widgets, so you can easily define a CSS class for each widget. For example, we added the subscribe class to our subscription form widget.

Now you can go to your theme’s stylesheet and add your style rules there. Like this:

  .subscribe {   background-color: #858585;  color:#FFF;  }  

You can add any custom CSS you want such as add background, change borders, use different colors, etc.

Manually Adding Custom Styles to WordPress Widgets

If you don’t want to use a plugin, then you can manually add custom styles to your WordPress widgets. By default, WordPress adds CSS classes to different elements including widgets.

Each widget in your sidebar has a numbered widget class. Like widget-1, widget-2, widget-3, etc. Using Google Chrome’s Inspect Element tool, you can find the CSS class for the widget you want to customize.

As you can see in the screenshot above, the widget we want to customize has widget-2 class added to it by WordPress. Now go to your theme’s stylesheet and add your custom style rules.

  .widget-2 {   background-color: #858585;  color:#FFF;  }  .widget-2 .widget-title {   font-weight:bold;  }  

That’s all, we hope this article helped you add custom styles to WordPress widgets. Play around with the CSS and experiment with different colors. Use A/B split testing to figure out which custom styles work best for your site.

Also if you want an easier way to highlight your sidebar subscribe form widget, then try out OptinMonster because it offers multiple designs, A/B testing, and much more.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.