A tabbed interface in the TwentyEleven Footer Area One, with the "Base" jQueryUI theme applied

Collapsible Widget Area 0.1a

Over time, I’ve run into an issue over and over again in which someone wants to use a tabbed or accordion interface to display specific widgets in their WordPress widgetized areas. Unfortunately, many of the plugins that accomplish this task are either poorly written, or haven’t been updated in a long time. When this issue finally came to a head at work, I decided I needed to write my own solution.

This is the first release of this plugin, and is extremely basic so far. More options and features may be added as I come across things that it needs to do, or as they are requested by users.


To use this plugin, simply drag widgets into the “Collapsible Widget Area” widget area in Appearance -> Widgets within your admin area. Once you’ve done that, reload the Appearance -> Widgets page and drag the Collapsible Widget into the sidebar in which you want it to appear.


There are currently two basic options available in this plugin:

  1. Within the Collapsible Widget itself, you can specify whether you want to use a Tab interface or an Accordion interface.
  2. Under Settings -> Collapsible Widget Options, you can choose the jQueryUI theme you want to apply to the collapsible widget container. All of the included jQueryUI themes are hosted on Google’s CDN.If you already have a jQueryUI theme included in your WordPress theme, you can choose “None” from the option selector, and no extra stylesheet will be included for this widget.If you want to include your own jQueryUI theme, there are two ways you can do so:
    1. Use the collapsible-widget-ui-theme filter to specify the exact URI of the stylesheet you want to include.
    2. Use the collapsible-widget-theme-list filter to add or remove items from the list of available themes. The parameter sent through this filter is an associative array of the available themes. If the theme is hosted on Google’s CDN, just the keyword is needed as the array key (for instance, the keyword for the “UI Lightness” theme is “ui-lightness” and the keyword for the “Base” theme is “base”). If the theme is hosted elsewhere, the entire URI to the stylesheet should be used as the array key. The array value should be the human-readable name of the theme.

To Do

  1. Currently, this plugin only allows a single collapsible widget area within each site. I’d like to work out a way to allow using multiple collapsible widget areas, but am still contemplating the best way to do so.
  2. I’d like to implement a vertical accordion option, in addition to the current tabbed and normal accordion styles, but I need to locate a good jQueryUI implementation of it so that the stylesheets/themes will apply consistently (there are plenty of regular jQuery plugins, but I’m not sure any of them use jQueryUI themes).


If you want to see an example of this plugin in action, look no further than the right-hand column of our home page. The Recent Posts, Recent Comments, Archives and Categories widgets are all placed within the “Collapsible Widget Area” and are set to use an Accordion-style interface.



Download v0.1a of this plugin, now.

One thought on “Collapsible Widget Area 0.1a

  1. sherry

    Your instructions are not making sense. I have installed and activated the Collapsible widget. Dragging other widgets onto it doesn’t do anything.
    I tried dragging it to the sidebar first and then dragging something onto it. It looked fine in the widget page, but did not show up at all on the page. I could not then drag it off the sidebar. I had to deactivate and reactivate it to get it to disappear from the sidebar.
    There is no place to use options that I can see.


Leave a Reply

Your email address will not be published. Required fields are marked *