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.
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“.
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”
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.
From now on, you can use this custom CSS class to add custom styles to the target WordPress widget.
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“.
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.
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.
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.
After setting up the predefined classes, you can select those classes while configuring the widgets.
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.
- 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.
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.
Hope that helps and do comment below sharing your thoughts and experiences about using the above method to add CSS classes to WordPress widgets.