WordPress Widget CSS Classes Plugin

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

Features:

  • 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 before_widget and 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 before_widget and after_widget are blank.

Example:

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:

  1. Edit your theme’s style.css file (usually located in /wp-content/themes/yourtheme/).
  2. 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.

Credits

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

If you have translated this plugin and would like me to include it,
please email me the files at cindy@cleverness.org.

View the GitHub Repository






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' ) )