Fluency Admin 2.0

There is no doubt that the brand spanking new admin interface in WordPress 2.7 is a huge leap forward, and so long as you don’t switch to the ‘blue’ version (seriously, worst, blue, ever) its actually pretty nice to look at and use. The navigation is now down the left-hand side, just as I preferred (which is why thats where it was in Fluency 1.x), and because of this, styling and customising the menu in-particular has been a lot simpler that it was in previous versions of WP.

So whats new.

Well, technically, everything is. Fluency 2 was a ground up rewrite due to the fact that just about every part of both the design and underlying structure of the default admin has changed. This was definitely a good thing, as it allowed me to make sure I’m only including what really needs to be included. However I did make this a little hard for myself when I started work using the early trunk builds, which meant that every time I updated my build I had to update Fluency…again. I actually ended up building the Fluency 2 CSS from scratch twice, and what it looks like now isn’t at all what it looked like when I first began playing around.

Ok, so whats “really” new.

Thanks to the addition of some extra hooks customising the style of the login screen is now possible, so that’s new.

I’ve customised the main navigation too, couldn’t help myself. You may have seen me mention that I’m not an enormous fan of the way the navigation functions. WordPress claim it take less clicks to get to different screens, but I don’t really agree. You still have to click a submenu to expand it, and then click the link, that’s two clicks which by my count is the same as before. Sure it require one less page load, but…

Also not a fan of the expanding/contracting width of the menu. I had played with, implemented and then removed pretty much the same thing in an early version of Fluency 2 before I figured it wasn’t worth the effort, and well before it appeared in the WP trunk. In the end I dropped it like a sack of potatoes because I didn’t see the point in adding it for the sake of adding it. After all it was only giving me about 80px of extra page width to play with. When it appear in the trunk I really didn’t like the way that menu behaved completely different whether expanded or contracted, and thought that it would surely be confusing for new users.

Solution. Custom flyout menus. Now virtually everything is just one click away (or a nifty key-combo…). Personally I love my new menus (as you would expect) they take up less room than the default one, and the behaviour has actually reduced the number of clicks. Plus I think they look awesome.

To go with the new menus I’ve added “hot keys” for quick access. Its the first time I’ve attempted such a thing and its turned out alright. As you would expect the hotkeys won’t function if you’re inside an input or textarea so your data entry should be unimpeded. I did however add these prior to the comment moderation hotkeys being added to the trunk so there may be some conflict there. If you find anything please let me know.

Unlike Fluency 1.x I haven’t had to modify the post screens too much beyond some cosmetic touchups. Besides, now that you can drag-and-drop all the panels on these screen so you can put whatever you want where ever you want it. Under the “screen options” menu at the top right of the screen you can also choose to hide some sections completely. This can be done on the dashboard as well as the post and edit screens, its one of the really handy features they’ve included in 2.7.

It should go without saying that the primary purpose of Fluency is to change the styles of your admin, all the other bit are just extra fun. While the overall theme of the design is similar to 1.x it much more refined, smoother and hopefully more consistent. The familiar grey colour-scheme is back, with colour added as needed. Little things like the inline post/comment edit/delete/approve/etc links are styled with appropriate colours, eg. delete = red, approve = green etc. For browsers that support them, ie. everything but IE, I’ve used rgba colours for menu backgrounds to give them a slightly transparent appearance.

Enough words, I should let you gaze across the screenshots below, and most importantly direct you to the download link (top right of this page for those that missed it).

Screenshots

I haven’t covered everything, but those are the main points. If you’ve got any questions just leave a comment.

Quick word about plugins.

Fluency has not been tested with ever plugin under the sun, I’ve test the ones I use, plus a couple of the more popular ones, but in general if a plugin has decent admin screens that follow the rest of the layout then it should be fine to use in conjunction with Fluency. If you come across a plugin that doesn’t, please let me know and I’ll do my best to add support for it in the future.