The Future of WordPress Widgets: A Better UI With Real-Time Previews

Widgets make WordPress stand out as one of the most user-friendly CMS options available. The ability to easily place content blocks and features into a widgetized area has made website customization possible for millions of people who don’t know how to code. As mobile browsing has increased over the past few years, widget design is now moving to accommodate use on mobile devices. Due to the popularity of widgets in general, new designs must also accommodate users who have dozens of available widgets.

Better Widgets

Shaun Andrews’ Widgets Area Chooser plugin is on its way into the core for WordPress 3.8, but he’s not done improving widgets. Andrews is on a quest to make WordPress widgets better. To that end he has a couple of plugins that are currently in development. Better Widgets is one that he created in order to add more incremental updates.

Right now, if you check out the plugin’s page, all you will see is a vague description: “This makes widgets better. Trust me. Or don’t.” Since this is a plugin for continuing improvements to widgets, you’ll just have to install it and check it out.

Better Widgets offers a new layout, which briefly made an appearance in MP6 and includes separate scrollable areas for available widgets. It also provides better feedback when saving widgets.

widget-saved-feedback

Andrews may add a search filter to the plugin somewhere down the road, which would help users to quickly filter when searching a large number of widgets. He is also looking at adding the ability to drag widgets over closed sides, which would then automatically open so you could drop them in, similar to how dragging files around works in OS X. This is one plugin to watch for future updates if you want to be on the cutting edge of WordPress widget development.

Widgets in the WordPress Customizer

The widgets team is also working on an experimental plugin that allows users to edit and preview widgets in the WordPress Theme Customizer. The Widget Customizer plugin is being developed as part of the ongoing Widgets UI Refresh effort and the team hopes to have it ready to present for consideration in WordPress 3.9.

widgets-in-customizer

Widget Customizer gives you real-time previews of the edits you make to a widget before making them live. With this plugin turned on, no changes are live until the Save & Publish button is clicked. All widget-related actions are previewable before publishing, including:

  • Adding a new widget
  • Editing existing widgets
  • Reordering widgets
  • Dragging widgets to other sidebars
  • Removing widgets from the sidebars

If you want to test it out, install Widget Customizer on a test site. The plugin’s description advocates the new feature by stating, “No longer do you have to edit your widgets blind!” Editing a widget and then having to navigate to the front-end to see what you did is in essence blind editing. Once you try the Widget Customizer, you may never go back to the old way of editing widgets.

The Better Widgets and Widget Customizer plugins are paving the way for the future of WordPress widgets. If you’ve ever been frustrated with widget management, you can breathe a sigh of relief, because some very nice updates are underway. Would you like to see real-time previews added to the core? What do you wish you could change about widget management?

18 Comments


  1. It has been extremely rewarding to work on contributing the Widget Customizer to WordPress Core and to collaborate with the widgets team to mature the plugin for merging. I’m still shocked at how quickly the Widget Customizer materialized: the core pieces came together in just a couple days of late night hackathons. It started out as a feature for one of our partner’s sites at X-Team, but turned into something which really belongs in Core.

    For the past few months, I’ve been enamored with the Customizer and have wanted to move as much site management as possible into it. I’ve been convinced that if something cannot be previewed, it is not suitable for high-profile (enterprise) sites. I really have enjoyed building on Paul Clark’s Styles plugin, and adding new Customizer controls to do things like managing galleries by opening the Media Manager lightbox while in the Customizer.

    In addition to the Customizer, I’ve been increasingly focusing on using widgets as building blocks for as much as possible. Widgets are great little units of MVC, encapsulating the model, presentation, and logic for modules of site functionality. But I wanted to be able to edit widgets in the Customizer.

    I realized that since widget instances are just stored in WordPress options, you can register a Customizer setting for each widget instance, and the widget form control can be rendered inside of a Customizer control. After a bit of wiring, submitting the widget control then updates the Customizer setting which then causes the preview window to show the changes, all without saving anything to the database, until you hit Save & Publish.

    For Widget Customizer, the key pieces were already there in Core: they just had to be connected together.

    Development of the plugin is done on GitHub. See the issues reported there for what is being worked on. Pull requests are welcome!

    Report



  2. This is really cool, but I would *much* prefer to see Widget areas treated like custom nav menus, with widgets assigned to widget areas like menu items added to nav menus – and then have widget areas assigned to dynamic sidebars like custom nav menus are assigned to menu theme locations.

    Report


  3. @Chip Bennett – +1 to that. I believe what you are saying would open up the ability to add custom sidebars to whatever page or post you would like. That would be nice :). I do enjoy the new interface and direction 3.8 is going but I think somthing like this would be a big leap forward.

    Report


  4. @jdailey – true, but mainly, it would be more intuitive and would take away much of the pain of re-configuring Widgets every time the Theme is switched. It would also greatly simplify the conditional output of Widgets.

    (I can’t take credit for the idea, though; IIRC, it was originally Mika’s (Ipstenu’s) idea.)

    Report


  5. @Chip Bennett – +1

    I’ve been saying the same thing since the nav menu system was introduced. Now, we’re talking about adding this old system to the theme customizer instead of fixing some of the fundamental issues with widgets that exist now.

    Report


  6. Love the idea of widget previews, but why limit it to the theme customizer area? When a client adds a text widget to a sidebar in the Widgets area, it would be great for her to be able to press a Preview button, and have it pop up in an overlay, for instance. My clients already look at me like I’m insane when I mention that they have to use HTML in text widgets. At the very least, let them preview their experiments with it. (Even better would be a wp editor with tinymce experience for creating text widgets, but I’ll take previews any day).

    Report


  7. Its good to see progress in the widgets management. The new mp6 page is most useful when using it on a large screen. It seems a bit random the way the sidebars/widget areas are arranged in the 2 columns now.
    I miss a level in the way they could be arranged, if there would be a way to create containers and then assign the widget areas to them things could be much clearer.
    Being able to have like: Frontpage, Footer and Sidebars as container elements might simplify the page. (ideally with the ability to create them like menus)

    Alas I am afraid that implementing them in previews is adding clutter/confusion

    Report



  8. @jdailey – If you search for an option to individually customize sidebars on pages and posts in a comfortable way try plugin ‘Widget Wrangler’. On the edit page it displays drop zones for each sidebar and a list of all available widgets. Simply drag a widget on a drop zone and save the post. With the words of @Chip Bennett this is like configuring the widget areas directly on the edit page. Currently the biggest disadvantage is the necessity to clone the widgets from the WP widget system, what may fail in some cases. I would very much appreciate to see WP widgets going in such a direction. Meanwhile I don’t use the WP widget system any more.

    @Donna Fontenot – A replacement for the text widget with the tinymce editor already exists. See plugin ‘Spots’.

    Report


  9. @Donna Fontenot

    Love the idea of widget previews, but why limit it to the theme customizer area?

    This is the same question I have. Wouldn’t we have to explain to users that if they want to see live previews of widgets, use the customizer. For everything else, use the regular Widget administration page. Seems like a layer of confusion. Wouldn’t it be better to have live previews on the widget admin page versus the customizer?

    Report



  10. @Jeffro – We’ve explored this option a bit. The tabbed prototype we built actually has a “Preview” button that would open your site with the idea of showing you a preview of your widget in place, but it never worked. The problem is that there’s currently no way for WordPress to know which page on your site contains the sidebar that you’re editing.

    We’ve been working with the following idea: The customizer is great for previewing and quick updates; The wp-admin widgets screen is great for power users looking to manage lots of widgets and sidebars.

    The customizer makes it super easy to add and update widgets with a live preview, but its limited to editing the widgets and sidebars that exist on a single page of your site. The wp-admin widgets screen makes it easy to manage all of your widgets and sidebars in one place, but this comes at the cost of obviousness — there’s a major disconnect between the wp-admin widgets screen, and the front-end of your site.

    We’re exploring these, and more, options and would love more help. Join us on freenode channel #wordpress-ui each Monday at 20:00 UTC.

    Report





  11. Really looking forward to this. The WordPress Widget admin has irritated me from the start. Coming to WordPress as a Joomla/Drupal user the severe lack of control and the drag-and-drop interface was painfully inadequate.

    Being able to edit a widget before putting it live will be useful but I still feel the Widget Manager needs a redesign. A small site containing several widgets soon becomes cluttered even on larger monitors.

    Report

Comments are closed.