Can I create drag and drop widgets like iGoogle in WordPress?

1 comment

1. This is an interesting question. Generally, I agree with EAMann – this would be better suited in a more general discussion. Seeing as you ask it here however, I’m going to give a WordPress specific approach you may want to use.

   In the context of WordPress, “widget” obviously has a specific meaning. The WordPress sidebar widget system is highly flexible and benefits from being an established system with a large number of widgets available. This makes it a sensible place to start. You could, for example, make a template which contains multiple sidebars arranged next to each other.

   Styling your widgets should be easy enough. To make them drag-droppable, collapsible, editable, etc. I recommend this tutorial, which demonstrates these techniques with jQuery UI.

   It now gets a bit tricky. I’m assuming you want each user to be able to configure their own widgets and that these changes should be persistent. (If either of these requirements is unnecessary, it gets much easier.) This is hard – we can’t use the WordPress widget system to store these preferences, but we can go to it for inspiration.

   If you have PhpMyAdmin (or similar) installed, go to your wordpress database and execute the following:

   SELECT *
   FROM `wp_options`
   WHERE `option_name`
   REGEXP '^widget_'
   LIMIT 0 , 30
   

   You should get a whole load of results with stored PHP arrays for the details. If each user were to be able to set their own widgets, you could use this format, but append a user id to the end of the option name. You could write a simple piece of AJAXy javascript to send off the details of the widget arrangement each time it changes. The PHP receiver would then update the database accordingly.

   So that’s one way to save the users data, but how do we retrieve and display it again? Personally, I’d let wordpress serve up the defaults normally at first. (Possibly with a CSS overlay and/or a progress spinner.) Then I’d fire off another AJAX request and load the user specified widgets. Specifically, I’d load the arrangement first, then individually load the data (via AJAX again) into each box. This would speed up the perceived loading time.

   So there we go. Sorry it’s such a high level answer, but it’s a pretty far reaching question. I hope I’ve given you some ideas. Good luck!

   PS If you get this working, I’d recommend distributing it as a plugin.

   Log in to Reply