WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want to make something like iGoogle in WordPress, in which I can drag and drop the widgets. How could that be done in HTML 5?

share|improve this question
While you are asking in the context of WordPress, this is more of a generic programming question and would be better suited for a site like StackOverflow. – EAMann Sep 16 '10 at 14:42
Do you really mean Widgets done in HTML 5? zope.cetis.ac.uk/members/scott/blogview?entry=20090623135357 – hakre Sep 17 '10 at 18:02
Have anyone got this to work? Any plugins available? Sorry if it's against the rules to ask it in here, but I would really need the functionality, but don't expect anyone to just code it for free, so if there's a plugin, premium or free, I would love to know about it. Thanks. – Andrew Mar 16 '11 at 12:17
up vote 3 down vote accepted

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:

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.

share|improve this answer
thanks a lot, let me try it out – MsManiya Sep 21 '10 at 6:48

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.