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.
hi-i like the style that this plugin offers… unfortuately, i am having a problem with it. it installs fine but i can’t expand any of the categories. it’s as if they’re all closed and there’s no way to expand them. i don’t have the arrows next to each category. however, i just realized that if i left click on the right side of each category, the sub-menu flickers up momentarily, but not long enough to click on anything. using 2.8.2
Is it possible to disable the Fluency customization of the login/register part? And how can I make a custom logo show up there?
What a great plugin. Usability is excellent and presentation too - particulalry when I want to demo the admin to the end users and hand-over to them for self management. It is all so much better.
Bit of feedback …I noticed on the plugins editor screens, the selection box is obscured by a title and while it is possible to use the drop down list, it is not possible to hit the ‘Select’ buton and hitting the Return key does not seem to work either. (Mac running Firefox 3.0.11).
I will see if I can sort it out and I will drop a note back here if I manage it. Joyous as that will be to do, if anyone has already solved this or immediately knows how to - that would make me even more joyful!!
Okay a solution of sorts. It involves messing with a couple of the WordPress files so if you do this and then one day disable the plugin the changes will remain in place on the default admin theme.
The same problem occurs in two places on the Theme editor and the Plugin editor. One solution is to place the ‘submit’ button on the line below.
Navigate from the root directory public_html/wp-admin/theme-editor.php
On line 135 you get the following:
<input type="submit" name="Submit" value="” class=”button” />
If you place this between tags the button moves down a line and everything works as below:
<input type="submit" name="Submit" value="” class=”button” />
The same applies for the plugin-editor.php file in the same directory. Find line 172
<input type="submit" name="Submit" value="” class=”button” />
and put it between tags:
<input type="submit" name="Submit" value="” class=”button” />
This works. Hope it doesn’t confuse !! ;)
My tags are not showing up on this. The tags are P tags as in a P between two pointy brackets at the front and a /P between two pointy brackets at the end.
As I said, hope it doesn’t confuse.
Nevermind, manually uploaded the folder. Does this also work with 2.8? Because the description says 2.7 only.
Yep, should work fine in 2.8 (although there are few minor style oddities), currently working on an update to clean up any issues.
Very cool. I can’t wait!
How do you install this? It says the plugin doesn’t have a valid header. Is there no Guide for the installation?
Have a read of this comment below http://deanjrobinson.com/projects/fluency-admin/#comment-83803 Seems that the current download doesn’t work correctly with the builtin in plugin installer, this will be fixed in the next release.
Are the 2.8 issues in terms of styles the ones that I am noticing in IE (specifically IE8)? Seems like the flyout menus are a little quirky right now and you’ll notice that the borders don’t extend to 100% width like they would in Firefox. Thoughts?
The oddities you’re seeing in IE are probably more to do with IE than WP2.8. IE8 (final) wasn’t around when Fluency 2 was released. I may check the next version in IE8 but make no promises.
Hopefully this will be updated officially for 2.8, haven’t tried it yet though. Hope it works!
The current version (2.0) works fine with WP2.8 with the exception of a few style oddities here and there, but nothing that I’ve seen that makes it unusable. I’ve started an update for WP2.8 and I should be able to get it out in the next week or so.
Hi, I have tried installing the plugin on a number of 2.8 sites but get the following error message when I activate the plugin:
“The plugin does not have a valid header.”
any ideas?
thanks pete
Hmm, not sure what could be causing that I’ve also installed Fluency on several WP2.8 blogs, and I haven’t had any issues at all. Is that all the message tells you? Do you have any other plugins that change the admin interface in any way that could be conflicting with Fluency?
I got the same message about the header and I think I figured it out. When I downloaded your zip and then used the Wordpress “add new” plugin feature I used the upload option. That created a “wp-fluency-2” folder that contained another “wp-fluency-2” folder and a “MacOSX” folder. So plugin folder structure was wrong. I fixed it by deleting that and just uploading the contents of your plugin directly in ftp.
And thanks for this. I have been hating the new admin look and your plugin makes it more tolerable.
ahhhh…. great, thanks for the info.
I’ll make I test that install method for the next and make sure its compatible.
Phenomenal work and very intuitive layout. Thank you for sharing this - it’s greatly appreciated.
…it… doesn’t work.
I’m using WP 2.7.
The footer says I’m using Fluency but there’s no change to the admin.
Hi Luuk, what web browser are you using? And are you running any other plugins that change the admin area that may be in conflict with Fluency?
Hi,
I’m running Firefox 3.0 on Ubuntu 9.04.
And AFAIK there are no other plugins active…
update: I’m using WP2.8 now.
OK, i reinstalled the plugin and now it works!
…and… it…
i love it.
keyboard control, minimal design, OMG u rule.
Okay, just updated to WP 2.8 and Fluency seems to work just fine for me. I don’t know about widgets (my blog doesn’t use them).
…Oh, and thank you for Fluency. It’s beautiful and functional and just makes using WP a joy (more so!). I think I’m more excited about using the interface than I am about blogging now! Very intelligent and powerful. It should be included in WP by default.
Any plans to update to 2.8?
wordpress 2.8 is out some changes to the way columns show up etc, haven’t installed fluency yet, will it work?
Anyone have this working with the 2.8 release? I’m pretty tech savvy, but new to WordPress, so I don’t want to muck anything up by being an early adopter! :D
I’ve had several user report that the current version of Fluency was working fine with the WP2.8 release candidates (I’ve also had no issues), and I imagine that nothing should have change in the final release that would prevent it from working.
I do plan to do a minor update in the next couple of weeks so if you do spot anything that seems to be broken (like, possibly the new widgets admin page) please let me know so that I can address them in the update.
it seems, that we have some language problems after installing WP 2.8 - Some translated parts (german) got back to english after updating. Maybe nothing that is related to Fluency…?
I tried the plugin on WP 3.0 RC1 and it rocks !!!! Great great grea job ;-)
Love the plugin; makes WP’s admin SO much more intuitive!
I quickly read through the comments/questions below and did not see anyone else with my problem. In Firefox, all of the submenus are black text on grey background (impossible to read). Screen shot is http://i40.tinypic.com/ibkxdv.jpg . In IE, they show up as black on white which also seems inconsistent compared to other screenshots I’ve seen below. I did disable all other plugins to rule that out, and I don’t think any changes have been made to your code. WordPress 2.7 and 2.7.1, FF 3, IE 8, XP. I’m going to try in MacOS Leopard when I get to work today as well just for more info. Thanks for any suggestions!
An update I just noticed, whichever submenu is active (such as Settings -> General), that title does show up white. But the inactive subsections are still blacked out. Thanks again!
Well.. decided to grab a new zip of the plugin and the submenus are fine now, at least in MacOS Firefox, but it should be fine everywhere. Thanks again for the great admin redesign.
Hi Andrew, The IE issue with the bg colour of the menus is explained here: http://deanjrobinson.com/projects/fluency-admin/#comment-72250
As for the black text on the dark background in your screenshot, the only thing that I can think of off the top of my head that could be causing this is that it looks like you’re using the blue colour scheme in your wp-admin, have you tried it with the grey colour scheme?
I had it on grey first, then changed to blue. Since the issue was fixed (at least in MacOS) by extracting a newly-downloaded .zip, I think maybe I did play around with the wp-admin.css after all, though I still don’t remember doing it. I’ll check in IE when I get home but I normally don’t use IE anyway. Thanks again for your help, and for the link above that I somehow missed. :)
Just checked in IE and it’s still grey on white, but I don’t care because I use Firefox anyway. :)
Hey man great theme, I plan to use it on my clients websites as its much easier to navigate then the default wordpress style.
Just a note I have Events Calender (PLUGIN PAGE: http://tiny.cc/M5b5H) installed and it doesnt show an arrow next to it when not hovered, it does when i hover and it shows the links just fine but doesnt have regular, just wanna let you know. Also i recommend for plugins that do that (add a new admin page you should give it a letter and number as well if this is possible.
Other then that great work mate, cheers.
Mr. Robinson,
Just a note to let you know that Fluency-2 is working under WP-2.8-beta-1.
Mr. Robinson,
Under WP 2.7.1 using Fluency 2 an odd bug has arisen. See screenshot: http://tinyurl.com/d4bjlr
Hey! Pure awesomeness, this plugin is!!!
Could you give us some control over the fonts used, or just use better typography? =) Artistically, and bent towards design, I got a bit annoyed when I saw that it was automatically showing text in some font like Arial, or Helvetica. Lucida Grande, or Sans Unicode, would be by far more convenient!! 
Thanks, nevertheless.
don’t work over here :(