ZigPress

consultancy · solutions · research

ZigWidgetClass adds a free text field to each widget control form on your widget admin page. The field is labelled ‘CSS Class’.

Enter a class name in the box and it will be added to the classes that WordPress applies to that widget instance. If you want to add two or more classes to a particular widget instance, simply separate them with a space.

You can deactivate and reactivate the plugin without losing your classes, and it is compatible with the Widget Logic plugin. It is also compatible with the Widget Context plugin, and has now been adapted to work with the WP Page Widgets plugin.

Read some great reviews on wordpress.org!

ZigWidgetClass has also been graced with a lovely review on this page: The Top *Non-Obvious* WordPress Plugins That’ll Make You a Better Blogger. Thanks to Brian Jackson for this:

“ZigWidgetClass. Another great little free plugin by zigpress.com. This plugin allows me to easily add custom CSS classes to my widgets. What do I use this for? I use it to deploy media queries so that I can hide certain widgets based on their resolution size. For example, on my site I have an optin box in my sidebar and my footer. On a mobile device there is no reason for it to show twice, so I add my class which pulls my media query and hide one of them.”

ZigWidgetClass is a free ZigPress plugin released under the GNU General Public License version 2. It is provided as-is, without any support or warranty, though if you have a problem, please leave a comment below and we’ll look into it when we can. If you make a donation, we’ll prioritise your request.

Download this plugin now! Make a Donation

34 Comments

  1. I just downloaded the ZigPress plugin and have also added an entry in my website: http://2wp.org/zigwidgetclass-wordpress-plugin/

  2. Thank you :)

  3. Not working with the plugin Widget Logic. When I deactivate Widget Logic all is well then activate Widget Logic you plugin quits woorking.
    LAMP enviroment
    Latest WordPress
    Custom Theme

  4. @HallMarc: I hardly ever use Widget Logic so this intrigued me.

    After some testing I’ve found that they don’t play nice together, because Widget Logic changes the names of some internal data structures (rather selfishly in my view). Looks like my original testing was a little lazy.

    I have fixed the problem on my development server, and will push an update soon.

  5. I have now published the 0.3 release, which should be available at wordpress.org shortly via automatic download.

    Those curious to see what I had to do in order to fix the Widget Logic problem should look at lines 83 and 84 of zigwidgetclass.php.

  6. @Andy: You beat me to it and your solution is cleaner than mine! I have a habit of writing code in long form! Thank you for taking the time to look into this and fix it. As far as WL being selfish; I’m not sure I can think of a better solution to do what it does, short of rewriting the widget core itself. I’m always hoping WP folks will add this into the vanilla versions because so many use it.
    Again, thank you.

  7. @HallMarc: you’re welcome. Re Widget Logic, it would have been nice if it had documented the changes made to object property names in the readme file, or better still, campaigned to the WP core developers for a less disruptive way to hook in to the widget API. That’s where I was coming from with my comment.

  8. Have you tried this with Widget Context? I like that plugin much more than widget logic, and it is not working properly with it. Can you check it out?

  9. @Drew: I don’t use Widget Context, so it will have to wait until I can allocate a bit of time to it. So yes, I’ll check it out, but it may not be very soon.

  10. Well, that sucks! Either, I am not using widget logic properly or something else is happening.

    For some reason, it doesn’t like is_page(‘blog’). The widget just disappears. I have only gotten it to work on is_front_page().

  11. Ah, but are you referring to your blog page (i.e. the archive of blog articles) or a static WordPress “page” called “blog”? The latter should work, the former won’t (use is_home instead).

  12. Yeah. I am using wordpress as more of a CMS. The home page is a custom page, and I have a page called blog that shows the blog posts.

    It is not just there though. I can’t get it to work with any of the pages. I will do some more testing to see if it another plugin is messing with it.

  13. Has anyone got this to work on a non-wordpress provided widget? It does not seem to add the box to add the class to any widget that is not part of the WordPress core. Is there a way around this?

  14. It works fine on every widget I’ve tested it on – that includes both core widgets and those provided by third party plugins.

  15. Andy,

    The solution to was re-coding the plugin that I had made. The error was there. Not in you plugin. Now, I need to find a plugin that can add another class to the widget-title? Would you happen to know of any?

  16. If you have a custom class on the widget, you don’t need one on the widget title. Just use “li.mywidgetclass h2 { blah blah }”

  17. Hi Andy..

    Is it possible to implement your plug-in only on a certain widget areas? 😉 In particular, I need only one of three available to me.

    Thanks in advance.

  18. @Alexander: if you don’t want to use it on certain widgets, just leave its input box blank on those widget control panels.

  19. It still doesn’t appear to be working with Widget Context it seems and there are some projects where this is preferable to Widget Logic unfortunately. Any ideas?

  20. Doesn’t seem to work with third-party widgets (for example, FlickrRSS and cforms widget don’t have an extra zig class field, while my text widget and menu widget do). Using Wordpress 3.4.1 with the latest version of the plugin.

  21. can you use this to resize a widget display in mobile only

  22. This plugin is cool, simple and very useful for me. Just one thing I think you can improve: instead of using “widget_form_callback” hook, WordPress has a better hook for putting content in widget form “in_widget_form”.

    Also, if you can change label text to normal “CSS Class”, that would be great for users, because some clients don’t know what’s is ZigClasses :)

    Anyway, great plugin. Just voted 5 stars.

  23. Plugin does not appear to work with Display Widgets wp plugin. It adds text field to each widget “CSS Class: .
    I put hide_on_mobile in text field. I am using a responsive child theme for my website
    Thank You
    Jerry

  24. I haven’t tested it with the Display Widgets plugin. I’ll do so when I get a chance.

  25. Hi – and thanks for making a very useful plugin.
    To use it fully: Where can I find a list of the different classes one can use?
    Thanks,
    Kjetil

  26. I can confirm that ZigWidgetClass works perfectly with the Display Widgets plugin.

  27. I have installed the plugin but see no custom class appearing regardless of which widget I try (3rd party, WP defaults). I’m adding it to widgets in the same sidebar so I’m wondering if this looks wrong since it is the h2 title I want to change formatting of. Looks like my file doesn’t have any variable to pull any custom info, but I don’t know what it SHOULD look like. Any advice is greatly appreciated!

    register_sidebar(array(
    ‘id’ => ‘home-twitter-sidebar’,
    ‘name’ => __(‘Home Twitter Sidebar’, ‘base’),
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    ));

  28. Hello

    I have a huge problem with the plugin and don’t get any help from the support thread on the plugin’s wordpress page.
    I have “Notice: Trying to get property of non-object in /xxx/yyyyy/www/zzz/wp-content/plugins/zigwidgetclass/zigwidgetclass.php on line 107″ suddenly appearing under every occurence of a widget I applied a widget class to ages ago. Can you tell me what’s going on and how I can determine where the issue is coming from so that it can be fixed? The site is a mess…. (Using last version of zigwidgetclass)

    Thank you for your help,

    Best,

    Marie

    https://wordpress.org/plugins/zigwidgetclass/

  29. @Colin: Please email me directly at andy (AT) zigpress (DOT) com with your URL and I’ll take a look.

  30. @Marie: I can’t reproduce what you’re seeing, so it may be a conflict with another plugin. Please try deactivating all plugins except ZigWidgetClass and see if you still see the message. If not, start reactivating plugins one by one, check for the message each time, and tell me which plugin is causing it to reappear.

  31. Hi I just added the plugin and doesn’t works :(

    I used the steps, but I added the text “hide_on_mobile ” on a widget and I can see it again on the mobile :(

    Plz help!! Thx in advance

  32. That will do nothing unless that class is defined in your theme and actually does hide things on mobile devices. My plugin adds class NAMES to widgets but you still have to define the class somewhere in CSS.

  33. Thanks for reply 😀

    I’ve tempera template. I added in CUSTOM CSS:

    hide_on_mobile {
    display: none !important;
    visibility: hidden !important;
    }

    Still not working :(

  34. It’s WORKING !!! 😀 😀

    I forgot the dot on the class

    Nice plugin!!! Thanks for all 😉

Add a Comment

Do not include any links or HTML tags since this will send your comment directly to spam.