Widget CSS Classes
Widget CSS Classes gives you the ability to add custom classes and ids to your WordPress widgets
Please note that this plugin doesn’t enable you to enter custom CSS. You’ll need to edit your theme’s style.css or add another
plugin that allows you to input custom CSS.
This plugin also adds additional classes to widgets to help you style them easier:
widget-first: added to the first widget in a sidebar
widget-last: added to the last widget in a sidebar
widget-odd: added to odd numbered widgets in a sidebar
widget-even: added to even numbered widgets in a sidebar
widget-#: added to every widget, such as widget-1, widget-2
Adds a text field to a widget for defining a class
You can specify multiple classes by putting a space between them
Optionally adds checkboxes with predefined classes
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
Compatible with Widget Logic, Widget Context, and WP Page Widget plugins
Has filters and hooks for customizing output including class names
Adding Custom CSS Classes to WordPress Widgets
Add .first & .last CSS Class Automatically To WordPress Widgets
Widget Context compatibility fix provided by Joan Piedra
Slovak translation by Branco WebHostingGeeks.com
Polish translation added, Slovak translation files renamed by Tomasz Wesołowski
Spanish translation by Maria Ramos at WebHostingHub
Serbo-Croatian translation by Borisa Djuraskovic at WebHostingHub
Dutch translation and predefined classes fix by Jory Hogeveen at Keraweb
Russian translation by Наталия Завьялова
Swedish translation by Olle Gustafsson
Fix ids notice by Ricardo Lüders
Upload the folder /widget-css-classes/ to the /wp-content/plugins/ directory
Activate the plugin through the Plugins menu in WordPress
Configure the settings under Settings > Widget CSS Classes
Visit Appearance > Widgets to add or change the custom classes and ids for a widget.
Expand the appropriate widget in the desired sidebar.
You’ll see a field labeled CSS Class. Depending on your settings, this will be a text field and/or checkboxes.
If you are using the text field you can enter multiple class names by separating them with a space.
If you’ve enabled the id field, you will see a text field called CSS ID.
Why aren’t the classes showing up in my widget?
You need to make sure you have an HTML element defined for
after_widget in your active theme’s
usually located in your theme’s functions.php (/wp-content/themes/yourtheme/functions.php).
This HTML element must have class and id attributes. This plugin will not work if
after_widget are blank.
'name' => 'Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>'
How do I add the CSS for my custom class?
There are two ways:
Edit your theme’s style.css file (usually located in /wp-content/themes/yourtheme/).
Use a plugin such as Simple Custom CSS.
How I export the Settings?
You can export the Settings from Settings > Widget CSS Classes > Import/Export.
What should I do if I find a bug?
Please file a bug report on GitHub.