Fully Functional Drag-and-Drop WordPress Dashboard Design Idea

OK, here we go — this is my take on how WordPress dashboard would work the best. All the widgets are expandable, collapsible, sortable and draggable. Widget locations and open/closed states are not stored but that could be implemented easily.

WordPress Dashboard User Interface, Idea A

WordPress Dashboard User Interface, Idea A

And that all with only 107 lines of CSS, 103 lines of custom jQuery and 10 images (~1.5KB each). Works 100% with Gecko 1.9 and Webkit r35928.

What do you think?

Use Contact Form 7 to collect business leads and enquiries? I created Storage for Contact Form 7 plugin which stores them safely in WordPress database.

Get it now for only $19 →

15 Comments

  1. R_K says:

    Sweet indeed!

  2. Mr.SergE says:

    supergreat idea!

  3. Lothar Baier says:

    100 times better then the “new” user interface since WP 2.5! I hope the devteam will take some in not all of your ideas.

  4. Ajay says:

    Looks really good :)

    Maybe WP Developers decide to implement the same. Or, possibly you could release this as a plugin for users to use to customize the look of the Dashboard?

  5. Sam says:

    Are you crazy? You really did all this work to show off your idea? For whatever the reason, it looks great! Imagine what a whole WP team can do with an idea like this one.

  6. Kaspars says:

    Hey, Everyone, thanks for your comments.

    Sam, you are right — I am a bit crazy, especially when there is an idea in my mind and I know that there is a solution. It took me a day to create this as I simply didn’t want to be one of the typical naysayers. I truly think this interface would work much better than the current crazyhorse one and I had to create this prototype to try to prove my point.

    At the same time we have to understand that WordPress is an opensource project with no central contribute (although Automattic are working on it full time), and it is open for everyone to contribute. I hope that Matt and other core contributors at least have a look at it, and even if they don’t completely agree with me, it is always good to see things from different perspective in order to make the best decisions.

  7. Damian Taggart says:

    Very nice work.

  8. Ozh says:

    Totally breaks in IE but I guess you’re aware of this since it’s only a draft.

    All the draggable stuff really need a special cursor on them, so you don’t have to click everywhere to see what’s draggable.

  9. Kaspars says:

    Ozh, thanks for stepping by. I am aware of the IE issues and after spending a day getting it ready, didn’t want to spend another pleasing the IE crowd as it is just a mockup (as you said).

    Regarding the draggable stuff the visual language goes like this — everything that is collapsible/expandable is also dragabble and with an arrow n the side.

  10. kamal says:

    i hop the next realise of WP the the dashboard will be like this, it’s so simple, mazing and alike CMS dashboard.
    BARVO

  11. shaggy says:

    Nice,
    So where is the download?
    Do you need any help getting this ready?

  12. shaggy says:

    also,
    Screw IE! it’s an admin interface. Anyone that uses IE shouldn’t blog.

  13. Kaspars says:

    shaggy, this is a mock-up of a suggestion for WordPress 2.7 which hasn’t been released yet. If you want to turn this into a plugin or a patch for 2.7 core, then feel free to do it.

  14. After Spending the past few weeks testing and tweaking the 2.7 dashboard, I have to say, this is so much more practical.

    Although vertical menus can work well on a wordpress dashboard, I am not too crazy about the ones 2.7 has now.

    If no one from wordpress takes note of it, maybe consider making it an admin template plugin? I would be happy to help in the creation of one as soon as I get a better understanding of the new admin interface.

    • Kaspars says:

      Ronnie, I think that turning this into an admin theme would be easy, but keeping it updated as the core HTML structure and CSS is being altered might take a lot of effort. I had this problem with the Baltic Amber Themes & Schemes plugin when ‘Press This’ feature was added and ‘Add Media’ page altered. However, feel free to use this HTML, CSS & JS and turn it into a plugin if you find the time for it.

Leave a Reply