Add Custom Classes For Specific Widgets in WordPress

To customize specific widgets on your website, you need the widget class. To, find the class for every widget in your WordPress site, I recommend using Firebug, an add-on for Firefox browser. For Chrome users, you can use the developer tools by simply click the F12 button.

However, there are times when using custom class is much better. For example, if you’re using the same widget for multiple times at the same location (eg: sidebar) and you want each of those widgets to have a different style. By default, WordPress will create a specific id for each of those widgets such as my-widget-1, my-widget-2, my-widget-3. Having your own custom classes make it easier to target them.

This might look normal to you. But for those, especially developers, who develop their themes in localhost, when migrating to the real site, the class assigned to the widgets might change. That might be one of the cases and I believe there are many more circumstances that having a specific class for each widget makes your life easier to further customize your theme.

To add your own custom class to the widget, I recommend installing Widget CSS Classes plugin.

1. Install the plugin.

2. After installing the plugin, you’ll see a new text field at the bottom of each widget as can be seen from the image below:

As you can see, I added my own class, widget-green.

3. Hit the Save button and you’re done. You can add the new class for any or all widgets as you wish.

4. Some features of this plugin:

• Adds a new text field to a widget
• Ability to specify multiple classes
• Optionally adds a drop-down menu with predefined classes instead of a text field
• Optionally adds a text field to add an id to a widget
• Adds first and last classes to the first and last widget instances in a sidebar
• Adds even/odd classes to widgets
• Adds number classes to widgets
• … and much more!

For more details, see the Descriptions and FAQ page of the plugin.

Example of Usage of Widget CSS Class Plugin

I’m using this great plugin on the current theme here at WPFeed. If you see the sidebar, you’ll notice those colorful widgets.

And this is the CSS I use to style them.

/* Widget color */

.widget-green h4 {
background: #349734;
border-right: 10px solid #82cb82;
color: #fff;
padding: 10px 15px;
}

.widget-green a {
color: #333;
}

.widget-green a:hover {
color: #349734;
text-decoration: none;
}

.widget-red h4 {
background: #bd4141;
border-right: 10px solid #de8e8e;
color: #fff;
padding: 10px 15px;
}

.widget-red a {
color: #333;
}

.widget-red a:hover {
color: #bd4141;
text-decoration: none;
}

.widget-teal h4 {
background: #277171;
border-right: 10px solid #76b8b8;
color: #fff;
padding: 10px 15px;
}

.widget-teal a {
color: #333;
}

.widget-teal a:hover {
color: #277171;
text-decoration: none;
}

.widget-brown h4 {
background: #bd7941;
border-right: 10px solid #deb28e;
color: #fff;
padding: 10px 15px;
}

.widget-brown a {
color: #333;
}

.widget-brown a:hover {
color: #bd7941;
text-decoration: none;
}

/* @end */