How to Add Custom CSS Classes to WordPress Widgets

Add CSS classes to WordPress widgets – The best thing about WordPress is that it makes it very easy to customize your site to meet your needs. One of the popular ways to customize a WordPress site is to use a good WordPress theme. If you are using WordPress for any part of time, you will know that most themes and plugins make a good use of the WordPress widgets to display content on the front end.

As such, there will be times when you need to add custom styles to WordPress widgets. Thankfully, you can easily add your own custom styles by adding custom CSS classes to WordPress widgets. In case you are wondering, here’s how to add custom CSS classes to WordPress widgets.

Add Custom CSS Classes to WordPress Widgets

To add custom CSS classes to WordPress widgets we are going to use a free plugin called Widget CSS Classes. As the name implies, this simple plugin makes it is really easy to add custom CSS classes and IDs to WordPress widgets. This, in turn, enables you to add custom styles to WordPress widgets.

Why not use a minimal theme for your website? Here are some of best AdSense optimized WordPress themes.

Features of Widget CSS Classes

Though the plugin is pretty simple and minimal, Widget CSS Classes has all the features you’ll ever need to quickly and easily add custom CSS classes to WordPress widgets. Below are some notable features of the plugin.

  • Plugin adds custom fields to widgets to add CSS classes
  • Along with CSS classes, you can also add CSS IDs
  • Adds automatic even and odd classes to widgets
  • Ability to add multiple classes
  • Ability to add predefined classes using checkboxes
  • Add automatic numbered classes to widgets
  • Support for hooks and filters to customize the output

Add Custom CSS Classes Using Widget CSS Classes

To add custom CSS classes to widgets in WordPress, download and install Widget CSS Classes plugin like any other WordPress plugin. Once installed, activate the plugin to start adding CSS classes to WordPress widgets.

The good thing about the plugin is that it is optimally configured out-of-the-box. All you have to do is set the CSS classes in the widgets section. To do that, navigate to “Settings” and then “Widgets“.

Add CSS Classes to Widgets - Select Widgets

Add CSS classes to widgets – select widgets

Once you are here, expand the widget and you will see a new field called “CSS Classes“. Here, enter your custom CSS class and click on the “Save” button to save the changes.

Note: if you want to, you can enter multiple CSS classes by separating them with a single space. Ex: “widget-class-1 widget-class-2”

Add CSS styles to Widgets - Enter Custom CSS Class

Add CSS styles to widgets – Enter custom CSS class

That’s it. With the above action, you’ve successfully added a new custom CSS class to a WordPress widget. In fact, if you open Inspect Element tool in Chrome web browser(Menu > Tools > Developer Tools) and see your widget, you will see the newly added CSS class.

Add custom CSS classes to WordPress widgets - CSS classes added to widgets

Add custom CSS classes to WordPress widgets – CSS classes added to widgets

From now on, you can use this custom CSS class to add custom styles to the target WordPress widget.

What you increase your AdSense ad revenue? Here’s how to insert AdSense ads within the post content.

Add Custom Styles to Widgets – Plugin Settings

As I said in the features list, the plugin also adds a few other automatic classes like even and odd classes and numbered classes. If you look carefully at the Inspect Element image above, you will those extra classes added by the plugin.

However, if you want to, you can easily disable these extra classes from the plugin settings page. To open the plugin settings page, navigate to “Settings > Widget CSS Classes“.

Add custom styles to widgets - Open plugin settings

Add custom styles to widgets – Open plugin settings

You can configure a few settings from this page. Here are what those settings mean.

  • Add widget number classes: As you can tell from the name itself, this setting adds numbered classes for all the widgets. Ex: widget-1, widget-2, etc. This option is enabled by default.
  • Add First or Last Classes: This options automatically adds class to the first and last widget.
  • Add Even or Odd Classes: This setting automatically adds two classes. i.e, “widget-even” and “widget-odd” to even and odd numbered widgets respectively. For instance, for the first widget in the sidebar, “widget-odd” class will be added, for the second widget, “widget-even” class will be added, for the third widget, “widget-odd” class will be added, and so on.
  • Show Additional Field for ID: Using this option you can enable addition field in the widgets to add custom CSS IDs. This option is disabled by default.
Add custom CSS classes to WordPress widgets - Plugin settings

Add custom CSS classes to WordPress widgets – Plugin settings

If you enable the additional field for CSS IDs, this is how it appears on the widgets page. In the new additional field, enter your target CSS ID and click on the button “Save” to save the changes.

Add custom styles to WordPress widgets - Add CSS ID

Add custom styles to WordPress widgets – Add CSS ID

You can also add your own custom predefined classes so that you don’t have to enter a single or multiple CSS classes multiple times for all your widgets. To add predefined classes, simply enter the CSS class name in the field next to “Predefined Class” and click on the “Save Changes” button.

Add custom CSS classes to WordPress widgets - Add predefined classes

Add custom CSS classes to WordPress widgets – Add predefined classes

After setting up the predefined classes, you can select those classes while configuring the widgets.

Add custom CSS classes to widgets - Select predefined classes

Add custom CSS classes to widgets – Select predefined classes

Finally, you might be thinking what does the “Class Field Type” setting do. Below is what each option does.

  • Text: This option is selected by default and it displays a simple text field to add CSS classes. In fact, this option is what enables you to add custom CSS classes while configuring your WordPress widgets.
  • Predefined: When selected, you will see checkboxes in the widgets so that you can select which predefined CSS classes to apply.
  • Both: This option shows both the text and predefined fields in the widgets.
Add CSS classes to WordPress widgets - When select the "Both" option

Add CSS classes to WordPress widgets – When select the “Both” option

  • Hide: This option hides both the text and predefined fields in the widgets.

Last but not least. You can export and import Widget CSS Classes settings from the Import and Export tab. This is pretty helpful when you want to backup the settings or to use the same settings and options on multiple WordPress sites.

Custom CSS classes to widgets - Import and Export options

Custom CSS classes to widgets – Import and Export options

Promoting affiliate products? Here are some of the best plugins to cloak affiliate links.

Wrapping Up

As you can see, the plugin makes it easy to add custom CSS classes to WordPress widgets. Moreover, the plugin is very easy to use, minimal, and optimally configured by default. So, do give the plugin a try and add your own custom styles to WordPress widgets.

If you like this article, do check out how to disable theme switching in WordPress and how to disable plugin and theme editor for better WordPress security.

Hope that helps and do comment below sharing your thoughts and experiences about using the above method to add CSS classes to WordPress widgets.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.