Stephanie Leary shares custom redesign of the WordPress widgets screen

20 Comments

Stephanie Leary, the author of Beginning WordPress 3, posted a custom redesign of the WordPress Widgets screen today on Twitter and on the WordPress Trac. In Leary’s ticket she explained that she worked on the idea to see if she could make the widgets screen better match her theme:

I’ve been fiddling around with the layout of wp-admin/widgets.php, using a stylesheet full of overrides enqueued to that page in my theme functions file, to see if I can produce a layout that better matches the theme and makes more sense to my users. (None of them understand the stacked-sidebar model.)

Leary’s ticket is focused on adding specific IDs to the widget screen to allow for further CSS control of the meta boxes. It includes patches to add the additional IDs as well as a sample functions.php and CSS file to implement the custom layout.

You can view the full posted image here.

Previous versions of the WordPress Widgets screen

When considering the custom changes Leary proposed, it might be helpful to keep in mind previous versions of the WordPress Widgets system. Just for fun, let’s take a look.

The jump from 2.6 to 2.7, for instance, looked like this:

The tweaks from 2.7 to 2.8 were small, but looked like this:

Would you be interested in creating custom layouts on your widgets screen for your themes? Do you think this is a good direction for WordPress widgets to go?

20 thoughts on “Stephanie Leary shares custom redesign of the WordPress widgets screen

  1. That is so sick it’s sweet. Yes that would make widgets a lot easier for everyone!

    The only ‘issue’ is it’s weird when they’re not all the same height (variable box size). But you can’t do much about that.

    • After working with this for a couple of days, I’m thinking it would be better to have the Available pool on the bottom of the screen, and let the sidebars fill up the top space. Alas, that requires some hinky absolute positioning, because the Available section is first in the source. (That’ll be another ticket, if I manage to get this one committed.) I’m experimenting with that arrangement now — and if I keep it, I might well put a max-height and overflow: scroll on div.widgets-holder-wrap, because otherwise an expanded widget with some stuff in it can overlap the Available section.

  2. Actually I think the changes she has made is not that much, if she really wants to change then it is better to redesign the entire layout than just rearrange the position of the widgets. This is just my two cents of thought.

  3. Great idea, though some themes have different sidebars for different pages, which would make things a little more complicated. But good direction to go I think.

    I also wonder if the widget functionality could be used to create page layouts. A number of themes have recently launched drag and drop layout tools, but I’m sure widgets could handle this rather than having lots of different solutions.

    • Yes, even in this example, those two home page sidebars show up only on the home page.

      This one-line patch was easy, but I can imagine a more complicated sidebar registration process that would let you add each sidebar to a group. Then each group would correspond to a tab on the widget screen.

  4. Same here: please make this the new standard! Since widgets are one of the foundations of WordPress and widget areas are more and more these days they should be better to manage.

    So please, please do this 🙂

  5. This is much better than what’s in WordPress. Would like to see a progressive search feature for the Available Widgets like how search works in CPanel or on the Mac.

  6. A definite improvement ..I think widget use will be a real growth area and making their implementation and control easier and more logical to manage can only be a good and eagarly awaited thing ….. please go for it

  7. Yip looks good – but I think the Widgets screen needs a bigger, more fundamental rethink – and more than aesthetic too.

    Lots of themes have started adding multiple sidebars with the facility to then assign different widgets to different sidebars on different pages. The fact that this has popped up purely reflects the inherint constraints of the existing Widget system in WordPress.

    Yes we have nice little plugins like Widget Logic that allow experienced WordPress users have conditional display of specific widgets – but it’s not usable for less tech savvy.

    I think it’s time for the core Widget display logic to be refined and expanded to allow for multiple instances of a widget to be displayed differently on different pages.

    Ed

  8. I like the new layout of the widgeted areas, but I think a single column for the “available widgets” isn’t enough. With themes and plugins you can get 30-50 available widgets, and dragging the one from the bottom of the screen to the homepage widgeted area in the upper right-hand corner could be problematic.

    • Excellent Idea!!!

      Some additional thoughts:

      On top of this widget area – you should be able to select the template you are applying the widgets to – this would create a very dynamic and effective mechanism for assigning widgets on a template by template basis that the common user could understand.

      Add a blank widget box for called so that it’s even a little more intuitive how the content is layed out.

      Perhaps a TimThumb style script could be used to show a sample page next to the template selection to put everything in context.

      Simply Amazing!!!!!!

  9. Love the idea, perfect for general sidebars.
    I have been thinking about creating a plugin for widgets too. In some themes I made I have code which automatically creates extra sidebars for each available top level page. My proposed plugin would do just that and create a metabox on page edit screens with all available widgets and one sidebar specific for that page. Set widgets for general sidebars in the normal widget screen and page specific widgets on page edit screens. A lot more userfriendly and logical.

Comments are closed.