WebDevStudios’ Take On a WordPress Core Widget UI Refresh

66

Let’s face it – unless you like devoting your time to clicking, dragging, accidentally letting go of your mouse button, then clicking and dragging again, we all hate the widget management page. With things becoming more and more streamlined with each WordPress release, how is it that the widget page remains such a cumbersome, laborious trial of will and patience (not to mention finger dexterity)? I’m sure we’ve all complained about it at one point or another, especially when a client wants a bevy of widget areas/sidebars forcing you to try and make your browser scroll while dragging a widget to the bottom of your list.

Widgets Rageface

We’ve all complained, sure. And thanks to inspiration garnered from the WordCamp San Francisco contributor day, we’re now going to do something about it!

The idea started simply enough – an easier way to add and configure widgets. Rather than using the drag-and-drop method currently in place, we wanted a straightforward and streamlined approach. The widget area would hold an “add a new widget” button that upon clicking, would present a modal window in the same style as the media manager.

widget-modal-all-widgets

All available WordPress widgets are listed here. Think of the media modal’s grid presentation of media. When you click on a widget, its fields are presented on the right side of the modal window (in place of the attachment details). Want to add multiple widgets to a widget area at once? Just control/command click or drag to select multiple widgets, then click the “Add to Widget Area” button in the bottom right hand corner.

Could it be any easier? A way to not only do away with the endless struggle of dragging widgets all over the page, but also to edit and add multiple widgets at the same time. Streamlined.

But why stop there? After all, if we’re not going to have the widgets on the left side of the widget management page, then we’re going to need to do a bit of a redesign. We’re not looking to reinvent the wheel here, but rather piggyback off of another existing area in WordPress the same way we are with the new widget management modal. In this instance, we’re adopting the same layout as the menu management page.

widget-admin-page

Instead of displaying every widget area on a page, we’re going to give importance to the widget area you’re editing right now. Select a widget area from the dropdown menu and voilà – you’re looking at your existing widgets and are able to rearrange, remove, and add new widgets quickly and easily. Click the cog to quickly pull up the widget settings:

widget-modal-active-widgets

But what is a widget area? As it is now, widget areas are synonymous with registered sidebars, and a registered sidebar is synonymous with a location in the theme. The plan is to abstract widget areas, newly defined as a container for a configuration of widgets, away from the theme locations. This way you can register a sidebar (a holder of widget-areas) in your theme, specify it’s location(s) in the theme (where that holder of widget-areas should be displayed) and the magical part, from within the WordPress admin choose which widget area that sidebar should display. This opens up a whole slew of opportunities for conditional widget area placement.

(One small caveat that we would like to take note of here is that widget areas will automatically be created and applied to each sidebar registered in the theme. This should help save a step that’s currently required with menus if all you want to do is have one widget area per registered sidebar.)

We’re all familiar with the menu management page, so we know that we would need to retool the left hand column to make sense in our widget management page. Posts, Pages, Categories and Taxonomies become a more powerful conditional display options section for your widget area. Right from the WordPress widget management page, you can decide to place your widget area in a specific page template; to display it for specific users; to display it on specific posts, categories and taxonomies; and to override the default widget area used in an existing template. Our hope is that everything that you can accomplish by editing a template file will be able to be accomplished right here in the dashboard.

This is all fine and dandy so far, but we’re still not done. Have you ever had the experience of adding a widget to a widget area, only to realize that you need to add the same widget to many other widget areas? What if you want to duplicate an entire widget area without going through and adding and re-configuring every widget again?

We’ve got a solution for that with “Duplicate” buttons. The widget duplicate button will copy a single widget to another widget area with a couple clicks, saving you the trouble of dragging, dropping, and possibly editing another instance of the same widget all over again. The widget area duplicate button creates an exact duplicate of the current widget area, so you can simply modify the widget settings that you need.

This is a pretty ambitious project but we’re confident that WebDevStudios can spearhead the production of this project and we would love to get your help! In keeping with the new philosophy of WordPress development contributions that Matt Mullenweg highlighted in his State of the Word talk at WordCamp 2013 (go see it if you haven’t!), we plan on working on this as a separate plugin. We have it available as a public repo on our GitHub page and we’re hosting the discussion over on the WDS Core Development site. Let us know your thoughts in the comments. We’d love to have you partner with us in our goal of getting this included in core by WordPress 3.8, tentatively due in December of this year.

48 thoughts on WebDevStudios’ Take On a WordPress Core Widget UI Refresh

Have a comment?leave a reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>