Add IDs to div.widgets-holder-wrap in widget admin screen to allow custom layout

[sillybean]

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.)

I've discovered that I can get pretty far, until it comes to creating two columns of sidebars. I can move the divs with the IDs matching those I registered, but the div.sidebar-name doesn't come with it. Since their wrapper, div.widgets-holder-wrap, doesn't have an ID, I can't easily rearrange the screen while the two parts as a group.

TL;DR: If you could add IDs to the wrappers within div#widgets-right, it'd be possible for adventurous theme developers to rearrange the sidebars.

See attached patch, and sample functions.php and admin-widget-overrides.css.

​Screenshot without the IDs
​Screenshot with the IDs

Tiny patch to add IDs to widget wrappers

CSS file that overrides the layout of the widget admin screen

Sample theme functions.php including widget definitions and stylesheets

This looks really neat Stephanie.

i agree with you, the old stacked-sidebar model should be upgraded.

i hope to see this in 3.3.

This is really nice Stephanie, props.

As an aside, I'd would love to see a progressive search feature for the Available Widgets list like how search works in CPanel or on the Mac.

+1 on this and search for available/inactive widgets.

Might this be folded in to the work being done on #17979?

Replying to sillybean:

Yes, seems this was handled in #17979.