• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
WPFeed

WPFeed

  • News
  • Tutorials
    • WordPress Multisite
    • BuddyPress
    • Design
  • Reviews
    • Plugins
  • Roundups
  • Snippets
  • Giveaways
Home » How To » Add Custom Classes For Specific Widgets in WordPress

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:

Widget-class

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 */

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

Recent Posts

  • WordPress is a brilliant platform that is loaded with tons of stuff for websites.
  • How to Sync Stock & Price for WooCommerce Products
  • How to migrate a WooCommerce Store to a new site
  • How to Import WooCommerce Products
  • How to export WooCommerce Orders

Copyright © 2023 · WPFeed.com - A Project of TechAbout LLC.

  • About us
  • Advertise
  • Write for us
  • Terms and Conditions
  • Privacy Policy
  • Contact us