Adding Custom Styles to WordPress Widgets

We all love widgets do we? It’s one of my favourite WordPress core features because of it’s flexibility. But as I’ve stated on my previous post, are we really taking them for granted? One and the most important example is the widget styling, we are always relying on the theme which always having default widget styles that are almost the same. It’s okay if we are not using them and wasn’t important on our site but the truth is some widgets like about, newsletter and contact forms are necessary on our sites growth. It would be nice if we can easily change the styling of the important widgets which is the very reason why I’ve wrote this tutorial. In this article, I’ll give you different detailed guide on how to add custom styles to WordPress widgets.

Adding Custom Styles to WordPress Widgets Manually

First guide is not relying on the plugin which some of you must prefer but I still encourage you to continue reading after this part, you might be interested on using plugin this time.

By default, WordPress adds CSS classes to each widgets for example widget_calendar for calendar widgets, widget_meta for the meta widget, widget_text for text widgets, etc.. Then adding text-1, meta-2, calendar-3, search-4, etc.; which serves as unique ID for each one of them. You need to use the Browser’s Inspect Element Tool to check the unique class of the widget you want to customize.

As you can see on the screenshot, the highlighted ID is search-4 which we will be using on this example. Now go to your Custom CSS options or theme’s style.css and add your custom style rules like :

Using Plugin to Add Custom Styling on WordPress Widgets

Next option is to use Widget Options Plugin. Go ahead and download then activate the WordPress plugin then go to Appearance > Widgets and expand any widgets to see the additional widget settings at the bottom.

As you can see, there is Class & ID Option which is better than using the Browser’s inspect Element. One other benefits of using this is the ability to re-use the styling on any other widgets which really come in handy because all we need to to is add the class on the widget again. And the plugin provides option to save classes on Settings > Widget Options so all we have to do is click the checkbox to re-use them.

Then again go to your theme’s stylesheet and add custom widget styling rules like this:

Using a Plugin to Style WordPress Widgets without CSS coding

Yes, I know you are looking for this option or WordPress widget style plugin without any css rules. 🙂 Coding custom css is tiresome sometimes so I’ve included this option which is not available if in any case you’ve already read the tutorial on wpbeginner.com. The plugin is the premium version of Widget Options which is called Extended Widget Options. Upgrading will give you additional Styling Option tab on each widgets and all you have to do is select the color via colorpicker and viola! custom WordPress widget styles are now available.

Aside from Widget Styling there are more useful plugin features that you might need so go ahead and check the plugin & I hope you’ll love it.

That’s all 🙂 If I have any other idea on how to add custom WordPress widget styling I’ll be very happy to share it with you. I’m also recommending using A/B split testing for you to get insight on which widget needs more styling and user attraction.

Originally published at phpbits.net on May 13, 2016.