Draggable Blog Sidebar Widgets!

After playing around with some jQuery sorting demo’s I wanted to be able to implement these easily into WordPress.

The steps needed to complete this are:

  • Register jQuery, and jQuery UI libraries with WordPress.
  • Enqueue the scripts to load them on blog pages ONLY.
  • Set-up a shortcode to render jQuery code.
  • Add jQuery code to shortcode callback function.
  • Add the shortcode to any post/page to see it working!

One interesting fact that I was not specifically aware of before experimenting with jQuery in WordPress, is that the jQuery library is loaded by default on the back end admin pages. This is so you can benefit from the slick interface and drag parts of the admin UI around. You need jQuery enabled to be able to do this. However, it is NOT loaded by default on the front end. So if you want to use jQuery on your blog pages you will need to enqueue it manually.

To do this I created a Plugin to enqueue the scripts correctly. You have a few options as to the source of your jQuery libraries. You can download them from various sources available (Google, Microsoft etc.) or you can include the files directly inside your Plugin. For simplicity I chose to use the jQuery libraries hosted on Google CDN and link directly to them.

Firstly, the scripts are registered with WordPress so the handles can be referenced later:

if(!is_admin()){ // Only load these scripts on the blog pages, not admin
	// Register scripts
	wp_register_script('', '');
	wp_register_script('', '', array(''));
	// Register style sheets
	wp_register_style('dbw_jquery_blog_custom_stylesheet', '');

Next, the scripts are enqueued (using the registered handles declared above), and WordPress adds them automatically to the blog header in the appropriate place:

function enqueue_my_scripts() {
	wp_enqueue_script( '');
	wp_enqueue_script( '');
add_action("wp_print_scripts", 'enqueue_my_scripts');

You can verify the scripts are loading on the blog pages by viewing the page source.

To do anything useful with jQuery, you have to write some code! You can include your own jQuery script in various ways but for this example I defined a shortcode in my sample Plugin to make it very simple to insert jQuery snippets on any post/page.

The other obvious alternative would have been to enqueue an additional custom script that contained your jQuery code. This would include it on ALL blog pages though, which may not be what you want. In the end it depends on what you are trying to achieve. For the simple example here, adding it to a specific post/page via a shortcode works fine.

As an initial test, I wanted to get the jQuery ‘Sortable’ demo working in WordPress. It was actually much simpler than I thought! Simply copying the code from the demo page and dropping it into the shortcode callback function worked a treat. This means the embedded script inside the shortcode callback function is referencing the jQuery, and jQuery UI libraries correctly.

Inspired by this, I wanted to go one step further and make part of the WordPress framework itself ‘draggable’ – i.e. the sidebar widgets!

You can see a video demonstrating this below. It shows how all of the widgets inside the primary widget area can be dragged around and rearranged as you wish.

At the moment the changes to the sidebar widgets are non-persistent which means the order is reset whenever the page is reloaded.

To make this into a more general Plugin, and after it had been tested on several themes, additional functionality could enable only logged in admin users to rearrange widgets, and to make the widget order persistent.

2 Responses to Draggable Blog Sidebar Widgets!

  1. Sayontan says:

    Nice tutorial. I have drag-and-drop built into my theme using Docking Boxes, but I have been considering moving to JQuery for a while now. Docking Boxes take care of the widget sort order using cookies, so you could consider using a JQuery cookie plugin in conjunction with the sorter.

    • dgwyer says:

      Yes, I want to look into using cookies with jQuery next as it allows you to do some cool things such as save the state of an accordion widget. So that upon a page refresh, or subsequent revisit to the page (within the cookie expiry) the accordion shows the last section that was opened. Same for tab widgets etc. Pretty cool stuff!