Sortable Widgets is a plugin for Woardpress.  When activated, this simple plugin allows visitors to change the order of those widgets displayed in your blog’s sidebar.  As this plugin has a number of configurable options, you should be able to use Sortable Widgets with almost any Wordpress theme.  Furthermore, each visitor’s preferences are remembered through the use of a single cookie.

This plugin uses the following javascript libraries/plugins: jQuery, jQuery UI & jQuery Cookie Plugin.
Don’t know what these mean?  No problem!  The plugin is set to include these plugins as standard.  If you are already including these libraries in your theme, you can easily stop the plugin from automatically including them.

The “Sortable Widgets” plugin is installed on this blog.  Simply drag the widgets to the right of this page to order them.  Alternatively, you can see this plugin installed on a vanilla wordpress installation:

Installing The Plugin

Thanks to Wordpress, installing plugins is ridiculously easy:

1. Extract the downloaded .zip file to a directory on your computer.
2. Upload the folder named “wp-sortable-widgets” to your “plugins” directory (/wp-content/plugins/) using your favourite FTP program.
3. Activate the plugin.

Configuring The Plugin

Each theme is different.  Therefore, it is highly unlikely that the plugin will work without some configuration.  Fortunately, I’ve made life easy for you.  There should be no need to play around with any of the code.  Simply specify the required options for the plugin via the configuration page.  Let’s take a look at these options (as of V1.0a):

1. Include jQuery - only uncheck this box if you are already including jQuery in your theme.
2. Include jQuery UI - only uncheck this box if you are already including the jQuery UI plugin in your theme.
3. Include Cookie Plugin - only uncheck this box if you are already including Klaus Hartl Cookie plugin in your theme.
4. Widget Container - specify the element in which your widgets are contained.
5. Widget Handle - specify the element that handles the widget.
6. Widget Opacity -specify the opacity applied to the widgets as they are being moved.

Further Information

I’m going to clarify points 4 & 5 using an example:

Widgets are displayed as items in an unordered list.  The unordered list is usually contained within a div.  You will need to know the ID assigned to this div (which contains the unordered list).

Using Wordpress’s default theme as an example, we can see that the unordered list is contained within a div that has the id - “sidebar”.  Step 4 required that you specify the element which contains the widgets.  The <ul> tag contains the widgets.  However, we cannot just enter “ul” since you will probably use unordered lists throughout the blog.  Since IDs are unique, we can refine the selection by instead entering:

div#sidebar ul

This essentially refines the selection to all unordered lists within the div that has the id - “sidebar”.  Those of you who are more experienced with javascript will be thinking that this selection is still not refined - since each list item may contain another unordered list.  This is not a problem since the plugin uses filtering to select only the first unordered list encountered within the div.

We use the same principal for step 5.  The “Widget Handle” is what must be clicked and dragged in order to move the widget.  To keep things simple, we could specify the widget’s title by entering:

h2

This is because each widget’s title (e.g. Categories, Meta, Blogroll etc.) is wrapped inside <h2> tags in the default Wordpress theme.

Troubleshooting

Firstly, ensure that you are using a widgetized sidebar.  Secondly, make sure that you are including all the required javascript libraries.  Finally, look over the “Further Information” section above to ensure that you are specifying th “Widget Container” and “Widget Handle” options correctly.  A little trial and error can work wonders.

Future Releases

I am looking for suggestions regarding features for future releases.  Please use the comment form to post any feedback.