WordPress: Admin Widget Page UI

One thing that has always bugged me from a UI perspective with WordPress is the float:left of the draggable widgets on the Appearance > Widgets page: If widget descriptions differ in length in a row of widgets, the floats will get ugly like this:

What we need is to do is force a clear:left on the first widget in every row. With a little media query action I was able to tweak the flow so the rows flow nicely together:

@media (min-width:1332px){
     #widget-list .widget:nth-child(3n+1){clear:left;}
@media (min-width:1077px and max-width:1331px){
     #widget-list .widget:nth-child(2n+1){clear:left;}

By no means is this anywhere near robust. I didn’t take the time to calculate it when the sidebar is collapsed and there is also an exception when WP manually hides a widget with display:none (e.g., search, when it’s already used), which throws off the nth-child increment. In an ideal world, there would be classes for all visible widgets so they could be targeted with nth-of-type.

Leave a Reply

Your email address will not be published. Required fields are marked *