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.
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:
- Extract the downloaded .zip file to a directory on your computer.
- Upload the folder named “wp-sortable-widgets” to your “plugins” directory (/wp-content/plugins/) using your favourite FTP program.
- 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):
- Include jQuery - only uncheck this box if you are already including jQuery in your theme.
- Include jQuery UI - only uncheck this box if you are already including the jQuery UI plugin in your theme.
- Include Cookie Plugin - only uncheck this box if you are already including Klaus Hartl Cookie plugin in your theme.
- Widget Container - specify the element in which your widgets are contained.
- Widget Handle - specify the element that handles the widget.
- Widget Opacity -specify the opacity applied to the widgets as they are being moved.
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:
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:
This is because each widget’s title (e.g. Categories, Meta, Blogroll etc.) is wrapped inside <h2> tags in the default Wordpress theme.
I am looking for suggestions regarding features for future releases. Please use the comment form to post any feedback.