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
- Fully translatable
- Multi-site compatible
- Compatible with Widget Logic, Widget Context, and WP Page Widget plugins
- Has filters and hooks for customizing output including class names
Frequently Asked Questions
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
register_sidebar functions, 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.
register_sidebar( array( 'name' => 'Sidebar', 'before_widget' => '<div class="widget %2$s" id="%1$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.
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
If you have translated this plugin and would like me to include it,
please email me the files at firstname.lastname@example.org.
Hooks and Filters
do_action( 'widget_css_classes_settings' ) do_action( 'widget_css_classes_form', $fields, $instance ) do_action( 'widget_css_classes_update', $instance, $new_instance ) do_action( 'widget_css_classes_add_classes', $params, $widget_id, $widget_number, $widget_opt, $widget_obj ) apply_filters( 'widget_css_classes_id', esc_html__( 'CSS ID', 'widget-css-classes' ) ) apply_filters( 'widget_css_classes_class', esc_html__( 'CSS Class', 'widget-css-classes' ) ) apply_filters( 'widget_css_classes_first', esc_attr__( 'widget-first', 'widget-css-classes' ) ) apply_filters( 'widget_css_classes_last', esc_attr__( 'widget-last', 'widget-css-classes' ) ) apply_filters( 'widget_css_classes_even', esc_attr__( 'widget-even', 'widget-css-classes' ) ) apply_filters( 'widget_css_classes_odd', esc_attr__( 'widget-odd', 'widget-css-classes' ) ) apply_filters( 'widget_css_classes_number', esc_attr__( 'widget-', 'widget-css-classes' ) )