There is no doubt that the band 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.
Note: Since I (once again) rushed this out the door, I’ll try and revisit the content above in the coming days to include some more details.
(19 votes, ave: 4.79/5)
Loading ...
what exactly do i have to copy and paste in wich directory?
beacause its not working like i want it to do!
i just overwrote similar files, like wp-admin.css….
i havent been finding a tutorial or a readme file…
i’m new to this and a little pissed
so pls reply to this comment & help me , thank you
omg, its a plugin buddy. put the whole folder in your ‘plugins’ directory and activate the thing from wp admin.
shhheeeessh, good luck
hey sam ;),
thank you for this excellent hint .
i have destroyed a moment ago my whole directory but, ok^^
now i can doit the right way
just activate the plugin ^^
best regards Nico
Great Job Dean!
Thanks for this, this is an awesome plugin. I’m loving the keyboard navigation option as well.
First of all, greatly done! You did a wonderful redesign.
But as mentioned before i would also love a version where the submenu is visible all the time. And maybe the sidebar a little bit wider (and the font size bigger).
Though a beautiful redesign of fluency, the hotkeys are useful, too. Thanks!
Suggestions noted, you’re not the only one to suggest having the submenu always visible.
i know this isnt really to do with Fluency plugin, but i am wanting a combination of Fluency admin and the old style horizontal menu, so my Client can always see which admin side submenu they are currently on. (I did this previously with OZH menu on WP2.6, but OZH 2.7 update isnt all that great, i am trying to migrate to Fluency)
many many thanks!
any chance of keeping the icons to the left of the text?
If you were feeling adventurous you could dive into the css and un-comment the lines that are hiding the icons. Beyond that I’m evaluating which suggestions I may or may not incorporate into the next version.
cool thanks, i got adventurous, and commented out line 50 of the css, but it displays all wrong, and the icons appear all over the place.
will try a few changes.
many thanks
just off the top of my head you might just need to make the menu wider to accommodate the extra width.
heya, i am trying that, but currently having major probs with the css. tried making all the 110px widths to wider, but the hovers dont move along to the right accordingly.
also, it seems with the icons uncommented the menu items format themselves like so
- Appearance
- - - Users
- - - - - Tools
sending all sorts of things to new lines, and generally looking pretty nasty. (using ff3/xp)
many thanks!
hi, great work on the new plugin.
is there any way we can make the left hand menu a little wider? say 200px
I have a few menu items that take up two lines of text and it breaks the hovers.
also, would be great to turn off the hotkey letters.
many thanks, great work
Great Plugin, light and fast…
But: Would be even better if it would work with internet explorer (yes, I know, uuuh but I use it…) as I can’t access the whole menu from “settings” due to too many plugins there and IE7 shows the list different than Firefox…
I dont know how to install it, can someone tell me? Thanx.
Very god!
I lovy Fluency.
Love the new fluency. I can’t stand the frou frou interface of 2.7, this makes the entire user experience lighter, sleeker, and classier!
I have a question though, on the wp_login.gif graphic, what font did you use? It is a beautiful graphic and a beautiful font.
Not sure what font it is since its just the WordPress logo, if you do a search around on the wordpress.org site you might find what font it is.
Great job!
I think there’s a bug. In Firefox, if an author goes into the “edit posts” panel, the title of the posts written by other authors won’t appear, well yes, but it’s white over white background. How can I solve that?
Not download! File not found!
Could you please try again, as you may have been trying to download the file while I was in the process of upgrading this site to WordPress 2.7. Please let me know if you are still unable to download the file.
Great Work…clean design, easy interface, the best admin solution for Wp2.7. Congratulations
God - I was hoping you would do a new version of Fluency - ever since I upgraded to 2.7 I was kinda lost
With Fluency 2 I am back to being “doing stuff” instead of “searching stuff”. THANK YOU!
By the way, what does the letters in the menu stand for? I was thinking it’s only the starting letter of the menu title but then there’s G for Pages and N for Plugins.
The letters (and numbers in the submenus) are “hotkeys”, for example to add a new post you could just press “P” then “2” to get to the “add new post” screen. Works great in Firefox and Safari, but there been reports of issues in Internet Explorer.
Finally! WordPress has submenus visible without having to click its parent first. I was using a plugin for such functionality then but it was not compatible with Fluency. Now, no need for that.
The arrows are somewhat too big though…
Thank you!
Very nice work! I’m using it on my humble blog, polaricecap.net. I like much of the functional aspects of Wordpress 2.7, as well as a few of the UI decisions. However, the styling was just a mess (what’s the deal with all the italics everywhere?). Thanks for cleaning up the mess.
Two questions: What browser(s) are you seeing this in? And, did you have the default navigation minimized/contracted when you activated it?
If its option two, all you need to do is deactivate the plugin (which you’ve probably already done), expand the default menu, and then reactivate the plugin, it should then be fine. (see other users comments below)
I was not impressed with wordpress 2.7’s new design.. infact it felt dull.. but when I found this plugin.. all my questions where answered.. Thank you so much.. I was this close to ditching Wordpress and looking for a new blogging tool.
“Minor error” Total navigation disappears after activation of the plugin :S Any idea?
Very… Very…. Very beautiful!!! Thanks!
This is just fantastic! I wasn’t that fond of the collapsible menus. Makes 2.7 even more visually appealing.
Oh, Thanks!
After expand left sidebar and re-activate plugin, it’s work just fine.
The left sidebar menu doesn’t show up if you activate the plugin when the default menu is collapsed to icon state.
We’re running the latest version at Chewru.Com — we love it. A couple bugs, maybe:: When I finish a post and publish it — the visual view (not the HTML view), goes entirely white. If you highlight the ‘empty’ box you see the text, but I can’t get it to come up otherwise (forced to edit in HTML going forward). This is a CHROME-only issue as far as I can see.
In IE8, I can see the text that’s blank in chrome, but the mouse-over menus dont pop up. It looks like it tries too - it builds the frames for the text that should be in there - but they’re blank. The only keyboard shortcuts that show are NUTS — kind of funny.
Please keep working on this admin backend — it’s great so far!
You have to correct something in your description: if you choose the minimal look in the new Wordpress administration, you don’t have to click to develop the tree.
This looks great! I was impressed with the WP2.7 admin page already, but somehow you’ve found ways to improve it even more. Great work!
Beautiful plug!
Look good but left sidebar is gone in IE8 Beta2.
Hey, your plugin is so nice!
Oh, Man, this is beautiful! I was really bummed when I upgraded to WP 2.7 and had to deactivate Fluency Admin, but you have made something really cool, here.
Unfortunately, the left column is not activated in Firefox — - or at least not in the theme I’m using.
I see some problems with Safari rendering buttons (edit, delete…) when viewing list of posts. Because of that height of specific post is to big.
Just installed the Fluency Admin 2.0 and this rocks! Very well done and user friendly. Sharing with other people as a 5 start must install. Thanks!
A very nice Admin Theme. I used it in my technic blook and i love it to work with.
Very cool. I didn’t think you’d continue fluency after 2.7!
This is an amazing admin theme! Thank you so much for creating and working on this. The hover over effect is excellent and the keyboard shortcuts are a great time saver. Just plain awesome…
Wow, this is simply great.
I’m a web designer, and wordpress is obviously my cms of choice. I’ve been looking to use something like this for a long time.
Anyway i could package this with client work? Just to spice up their final product? I know a lot of clients that would prefer logging into something like this, rather then logging into that default wordpress blue!
Please, let me know at paul.unr (at) gmail.com
Yes, thats correct. Comments would have a hotkey if there was a submenu, as the top level hotkeys are only used to activate the submenu. I’ll look at changing this in a future update.
Personally I can’t figure out what the Akismet menu doesn’t live under Comments, that seems weird to me.
Nice, I’m quite overwhelmed how you managed it to top the also very nice default design. And with the keyboard shortcuts I can finally sale my mouse
What I was wondering is why every menu item got it’s shortcut except for the comments. The reason for this is probably that the comments don’t have a submenu, right? But I think it would be nice to have a shortcut for this also.
Plugins getting a main menu item obviously don’t get a shortcut. Perhaps it would be nice if one could configure such shortcuts by one selfs.
Most of the transparency is done using rgba colours, which both Firefox and Safari handle, for IE it should use solid colours. Based on your comment it sounds like Opera may not support rgba.
In regards to the expanded menu, I actually intended to add some code to make sure that it was set to expanded but I ran out of time to add it in.
FYI: Before plugin activation, make sure that the original menu is expanded. Otherwise it will be hidden. There are also transparency issues in Opera, I guess because of Firefox specific CSS-rules.
Great work otherwise, apart from the gorgeous design, I especially like the keyboard shortcuts for menu navigation
Indeed it does, you just happened to drop by as I was uploading the new version.
I’m not seeing any text other than the post title, but I’m hoping 2.0 means a WP2.7 compatible version? In which case I’ll grab it as soon as I’ve upgraded.