How to Add Custom Styles to Widgets using Widget CSS Classes plugin

Widgets are important for your site’s growth but most sidebar widgets in WordPress usually look the same. Wouldn’t it be awesome if you could easily style important widgets differently? In this article, we will show you how to add custom styles (CSS) to WordPress widgets.

Using a Plugin to Add Custom Styles to WordPress Widgets

Firstly, you need to install and activate the Widget CSS Classes plugin.

widget-css-classes-plugin

=>          activate-plugin

After activate Widget CSS Classes plugin, you can 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 CSS class widget_category

add-css-class-widget

Now go to your site on the front-end and check Impact Element(Google Chrome) or FireBug (Firefox) this widget you can see the class would be added like this:
css-class-widget-2

Assume that you want to change the widget title, then I will use CSS code as follows and insert into style.css file:

And this is our result:

css-class-widget-3

Similarly, you can add any custom CSS class you want such as add background, change borders, use different colors, etc. That’s all, hopefully this article helped you know how to add custom styles to WordPress widgets, play around with the CSS and experiment with different colors. If you have any further questions for us, don’t hesitate to put it up in the comments.
See you again in orther tutorials!

Leave a Reply

Your email address will not be published. Required fields are marked *