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 a drop-down menu with predefined classes instead of a text field
  • 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 and Widget Context plugins
  • Has filters and hooks for customizing output including class names

Frequently Asked Questions

Why aren’t the classes showing up in my widget?

ou 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

Plus/Minus Icons from Farm Fresh Icons by Fat Cow Hosting

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

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

Comments

  1. Hello,
    Thanks for the plugin. I heard a lot of good things about it. I am just starting out with WP and am not a technical person. I think it would be great if you could make a video showing how the plugin is used and its possible uses.
    Thanks again for the effort.

  2. I am glad I found this plugin.
    My theme (Avada) just has plain old text widgets. Titles are BLAH.
    I have custom CSS to spruce it up. I’ve made a wraparound banner to the title of the text widget.
    But, sometimes we use the left side, sometimes the right in the same site.
    So, I thought If I had separate text widgets which accomplish that, it would make life more flexible.

    Can your plugin support this? I’m not a CSS expert only a hack.
    Thanks for any help.

    • The plugin adds a field for a CSS class for every individual widget, so if you have two text widgets, you can have a different CSS class for each of them.

  3. I really love this plugin. Use it a lot. Just have one problem. On multilingual plugins that should be maintained by the owner, not so handy with computers, I use the multilingual text widget, which goes with WPML instead of using string translation. So in a sidebar can be 8 widgets, but 4 are for language 1 and the other for language 2. Only one can be first widget, and one can be last, but on frontend, 2 will be first, one on language 1 and one on language 2. I did a work-around now by adding the class widget-first to the second widget in the sidebar, but first on that language.
    Is it possible that classes are added on how the appear in the sidebar on frontend instead of backend?

    • That is an interesting problem. I’ve never used WPML but I see that they offer a free subscription to the product to other plugin authors so you can make sure your plugin is compatible. I don’t know that I’ll be able to provide a solution to the issue but I’ll try to look into it sometime.

  4. Hi! I love this plugin, it worked great with the first class I created called “.menulines” but I couldn’t get it to work on the second class I created “.renew”. Then suddenly renew started working and menulines was broken – and it appeared the order I place them in in the CSS is what mattered. I’ve tried all combinations of things I can think of but can not get both classes to work.
    This is a link to the page where you can find both classes if you want to take a look: http://www.scatvsomerville.org/membership/
    Any help would be so appreciated!

    • Yes this is a cool plugin.

      when I put a text widget in that contained a href (see below) the text widgets below it acted funny.
      the first one would not pay attention to the class but text widgets under that would. I moved them around and put one of the widgets ahead of the one with a href and it was ok but again the one directly under the one with href did not pay any attention to the class but ones under did.. Should I stop drinking while coding?

      this is what was in the text widget that created trouble. ( a payment button for paypal)

      I ended up putting the paypal link somewhere else.

    • Based on what’s currently on that site and in the CSS file, it’s displaying properly (that doesn’t mean it’s the effect you want however). Keep in mind that the plugin simply adds the classes to the HTML, anything CSS based is dependant on what’s in your theme’s CSS. The only thing I noticed in the renew class that could affect other classes is the negative top margin.

  5. Hi there. I really like your plugin, It helps me aout a lot. I just wanted to let you know I might have found a bug. I’ve tried using this plugin along with ‘WordPress Page Widgets’ and they might not be compatible, as the classes I set of customized widgets don’t appear on the site. It might be a problem with the other widget though.

    • Thanks for the notification. I’m not sure if that’s something I can fix on my plugin’s end, but I’ll look into it.

  6. Hi, thank you so much for the plugin. Is there a way to be able to change the font size of the title of the wiget? I cannot do it with the class.

    • That will really depend on how your theme is set up in the register_sidebar functions (usually found in your theme’s functions.php file). It needs to have something set up in the before_title and after_title fields, like in the example on this page.

  7. .font24 h3 { font-size: 40px; font-family: ‘Text Me One’, sans-serif;}

    When I use this Size is not changed on h3
    If I leave out the google font and only use the font-size:40px; h3 does go to 40px.
    Any thoughts?

    • OOOPS I mis spoke I can’t seem to address font size on h3 of footer even with !important

      • If you look at your source code, is your class appearing in the HTML? Some themes can cause the plugin to not work so double-check that it’s working. If it’s there then using something like Firebug or Chrome’s built-in developer tools allows you to inspect the CSS and see what CSS styles are actually being applied to an element.

  8. This is wonderful!!!!
    can you give an example of how to use the “show additional field for ID” and “Add widget Number Classes”?

    • The ID field is for if you want to use a CSS ID instead of a class. You just put the name of the ID in the field.

      Widget number classes are useful if you want to style a certain widget position, no matter what widget occupies that position. For example, if you wanted the third widget to always have a red border, you would add the CSS to .widget-3.

  9. This makes absolutely no sense. While I understand how to add a class by editing in the menu widget, I dont understand how to import the css that I want. Where am I supposed to import the CSS that I am interested in? What file do I edit? The explanations about the arrays are somewhat vague as it presumes people know where to edit what.

    • Let’s say you add a Text Widget with the text “WARNING” and add the class “warning” to the widget. Then go to Appearance->Editor (or Appearance->Edit CSS if you use Jetpack) and add this text to your ‘style.css’ file:

      .warning {color:red;}

      This will make the text red. You can add other things to your “warning” style to like “background-color: #333;” or “border: 1px solid #ddd” to make a warning box.

      • So that means it is all pretty much text based edits? And then I just add the class into my styles.css?

        • Yep, you got it! It works out quite well to change the look of your site.

          • Yes it worked, and quite simple to get it to work I must say.

            However one small problem – for some reason some CSS is overwriting my class, despite the fact my class is only used once. I am trying to dig into if its a general CSS overwrite or what it is, but I can see this plugin working quite efficient to be honest. Nice one!

          • have you used !important Thinline?

    • Easily done…for me, I already had classes in my theme’s stylesheet “style.css” so all I had to do was add the text name of it in the widget field for the class. So basically, you would open the theme’s style.css and create whatever classes you want there. So for tim’s example: .warning {color:red;}

      …then in the widget class field in your admin, you type in “warning” (without the quotes of course) for any widgets you want this class.

      However, that is the simple way with a simple class, but you can get a lot more creative with widget styles by combining css with the widget markup in the functions.php file for widget structure.

  10. This is simply amazing! For YEARS of widget frustration of not having something like this plugin has found the light. So I have to say Cindy, you have a plugin that goes to the top of my list of favourites. Thank you for the effort and putting this much needed function in.

  11. I would like to see checkboxes to include/exclude the extra “widget-even”, “widget-first”, etc classes in the configuration screen since I don’t use those a lot.

    I would also like to see you make the “Class Field Type” ‘Text’ and ‘Dropdown’ as checkboxes so I could include them individually or together in my widgets and then have you combine them in the backend when generating the code.

    Thanks for a great plugin!

  12. If used with widget logic or widget logic visual, it throws error notices e.g.
    Notice: Undefined index: widget_logic-options-filter in /var/www/projects/zdrojak/htdocs/public/soubory/plugins/widget-css-classes/includes/widget-css-classes.class.php on line 101

  13. I’m thinking it’s a Widget Context conflict. None of the plugins or other solutions worked.

    It’s a multisite subsite with Widget Context activated network-wide. And Widget Context is often mentioned as messing up ‘widget class’ plugins.

    Thank you

  14. Hi there,
    my functions file has the correct before and after elements. The plugin installs fine, the classes field shows up in the backend, but the class doesn’t get assigned in the frontend. Tested with both custom and “normal” widgets (like text).

    Are there extra requirements?

    • It might be possible that there is a theme or plugin conflict. If it’s possible, try it using the default theme and with other plugins deactivated. If it works then, then you could try activating each individually to see what’s causing the problem. If you figure out what’s causing it, I can take a look to see if it’s possible to create a work-around.

Speak Your Mind

*

Current day month ye@r *