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?

  • 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, 2010 at 14:42
  • Do you really mean Widgets done in HTML 5? zope.cetis.ac.uk/members/scott/blogview?entry=20090623135357
    – hakre
    Sep 17, 2010 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, 2011 at 12:17

1 Answer 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:

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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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