Tangofy: Better icons for WordPress 2.7 and 2.8

[2009-04-12]. Tangofy 0.2.0 adds Turkish, by Semih Aksu (wpuzmani.com).

[2009-02-22]. Fugue 1.4.4 introduced a nicely executed Compass icon, which Tangofy 0.1.9 uses in Fugue Shadowless for Links. Full changelog at WP.org.

What is Tangofy

Tangofy is a plugin that:

  • Replaces the default menu of WordPress 2.7 with better, more helpful icons.
  • Dispenses with Black & White. All link states have full colour.
  • Hides the 32×32 icons. (Or shows them, if you prefer.)

You can select among five (5) icons sets—thanks to the Options code contributed by Josh— or even use your own set!

Here are the five included sets, next to the default icons:

  1. WordPress default
  2. Tango (Tangofy default)
  3. Tango 2
  4. Silk
  5. Fugue
  6. Fugue Shadowless

WordPress 2.7 RC, admin menu folded, default WordPress icons WordPress 2.7 and Tangofy 0.1.7, admin menu folded, Tango icon set WordPress 2.7 and Tangofy 0.1.7, admin menu folded, Tango 2 icon set WordPress 2.7 RC1 and Tangofy 0.1.2, admin menu folded, Silk icon set WordPress 2.7 and Tangofy 0.1.7, admin menu folded, Fugue icon set WordPress 2.7 and Tangofy 0.1.9, admin menu folded, Fugue Shadowless icon set

Get Tangofy for a better WordPress experience!

  1. Go to your WordPress Dashboard › Plugins › Add New
  2. Type Tangofy in the search box and hit Search
  3. Click Install
  4. Click Activate Plugin
  5. Go to Dashboard › Settings › Tangofy, and select the icons that work best for you
  6. Enjoy!
  7. Vote for Tangofy!

Alternatively, to install manually:

  1. Download the ZIP archive: downloads.wordpress.org/plugin/tangofy.zip
  2. Extract the tangofy folder and upload it to wp-content/plugins
  3. Activate Tangofy in Dashboard › Plugins
  4. Go to Dashboard › Settings › Tangofy, to select the set that works best for you
  5. Enjoy!
  6. Vote for Tangofy!

The full story

How Tangofy came about...

In November 2008 a new icon set appeared in the development version of WordPress 2.7. It was not the first time the new set appeared in public, and, like many others who follow WordPress news, I had seen the new icons before and I had also voted for them in the poll conducted to select the new icon set. However, seeing them for the first time in the actual environment they were designed for, the WordPress administration area, was different. They were not good and I was not happy.

To quote junap, who put it concisely at the WP.org forums, the icons didn’t “actually help [me] as visual shortcuts. I need[ed] to read the text to interpret them.” Which, of course, is the reverse of what UI icons are supposed to do! :-|

Since the icons were not helpful, my first thought was to remove them. It turned out there was already a plugin for that: Hide Admin Icons by Barry Ceelen. — But then I thought again: Why not look and see if there are good ready-to-use UI icons that can provide appropriate metaphors for WordPress? It was not an easy search, and looking at hundreds of tiny 16×16 icons was taxing to my eyes, but I liked the result!

I made a few alternative icon sets and a few screenshots, and I opened a ticket at the WordPress bugtracker, suggesting that it was probably not too late to improve the menu icons of WordPress 2.7. The ticket was closed and wontfixed (had the tag “wontfix” added to it) promptly, but then filosofo and Viper007Bond commented to suggest that I could probably make this into a plugin and that it was actually an easy plugin to make, thanks to the way the menu icons were coded into WordPress.

The thought had occured to me before, but I don’t think I would have tried without the prompting by filosofo and Viper007Bond. Among other reasons, I did not believe—and don’t believe now either— that a plugin was the way to deal with this. In any case, I made a plugin for my own use, a very simple one, that did exactly what I wanted: Replaced the iconset with one that was more useful to me. I sent the plugin to Josh Wood asking what he thought, and Josh kindly offered to write an options page, so that people could select among alternative icon sets.

That’s the story of Tangofy for WordPress up to version 0.1.0! :-)

Do you like the result yourself? Do you agree it is an improvement? Do you disagree? Do you have a suggestion for a better admin menu or for better metaphors? Did you find a bug in Tangofy?

Please, leave a comment to say what you think! You are most welcome!

δκ

Page changes

2009-02-22
Updated Fugue Shadowless screenshot for Tangofy v. 0.1.9.
2008-12-25
Updated screenshots and page for Tangofy v. 0.1.7.
2008-12-08
Updated screenshots for Tangofy v. 0.1.2.
2008-12-06
Updated screenshots for Tangofy v. 0.1.1.
2008-12-05
Updated page for Tangofy v. 0.1.0.
2008-12-02
Tangofy is now hosted at wordpress.org/extend — adapted page accordingly.

Responses (54)

Pingbacks (28)

  1. [...] βρε αδερφέ δεν του έκατσαν καλά τα νέα εικονίδια, είπε να φτιάξει ένα ωραιότατο plugin με νέα. Και ναι, [...]

  2. [...] schafft hier Tangofy. Tangofy ersetzt die Icons durch andere, bessere Icons aus dem Tango Icon Pack, Silk Icon Pack und [...]

  3. [...] Gott sei Dank glänzt WordPress nach wie vor mit seinem größten Vorteil: der flexiblen Anpassbarkeit. So gibt es Plugin, dass die Verwendung anderer Icons ermöglicht. Das Plugin hört auf den Namen Tangofy. [...]

  4. [...] fand, hat ein PlugIn geschrieben, um sie einfach austauschen zu können. Das PlugIn heißt Tangofy und kommt mit vier vorgefertigten [...]

  5. [...] Tangofy – Better icons for WordPress 2.7。 ちょっと管理画面が明るくなったー。 [...]

  6. [...] 2008-12-17. Τώρα και το Tangofy στα ελληνικά! [...]

  7. [...] do desenvolvedor: Demetris Site do plugin: Tangofy Tradução: Fernando [...]

  8. [...] Tangofy – Meny-tillägg för adminpanelen som tillåter dig byta tema för ikoner eller att själv välja varje menyikon. Av Demetris. [...]

  9. [...] ist der ‘Ärger’ jedoch verflogen, denn gerade habe ich folgendes Plugin entdeckt: Tangofy! – Better icons for WordPress 2.7 (bzw. [...]

  10. [...] im Adminbereich nimmer sehen kann und Abwechslung brauch, für den ist das Plugin “Tangofy” genau das [...]

  11. [...] dabei hilft ein Mini Plugin namens Tangofy weiter. Es wechselt lediglich die Symbole der Menüs aus. Dazu stehen verschiedene Themes zur [...]

  12. [...] Tangofy Better icons for WordPress 2.7 @op111.net (tags: wordpress plugins icons) [...]

  13. [...] euch die Icons in eurem WordPress-Adminbereich nicht gefallen, könnt ihr auch einfach das Plugin “Tangofy” [...]

  14. [...] of users has voted for the current standard icons. But even that can be changed – the plugin Tangofy makes it [...]

  15. [...] verdade é que muitos utilizadores não gostam deles - para facilitar-lhes a vida, existe o plugin Tangofy, que torna essa alteração [...]

  16. [...] düzenlenebiliyor. Eklenip çıkarılabiliyor. Ve tabii ki ikonları değiştirilebiliyor. Bugün Tangofy ikonlarını kurdum. Wordpress yönetim panelinde hafif bir gnome etkisi yarattı. Hoş duruyor. [...]

  17. [...] Tangofy is a simple plugin to modify icons in the stock Wordpress admin pages. [...]

  18. [...] Tangofy är ett smart tillägg som är framtaget för att sätta färg på användargränssnittet i WordPress. Det ersätter plattformens standardikoner för att ge dig möjligheten att välja mellan fem andra färggladare ikonuppsättningar. [...]

  19. [...] articolo e’ stato originariamente scritto da Demetris e pubblicato su op111.net. Tradotto ed adattato con l’aiuto dell’ [...]

  20. [...] Note. The menu icons you see on the screenshots are not the default ones. If you like them, you can have them too! [...]

  21. [...] used the Silk WordPress admin menu icon set with Tangofy plugin because I didn’t like the monochromatic icons, but I didn’t particularly like the whole [...]

  22. [...] Tangofy – Ein Plugin um in der Administrationsoberfläche die Icons schöner aussehen zu lassen. [...]

  23. [...] used the Silk WordPress admin menu icon set with Tangofy plugin because I didn’t like the monochromatic icons, but I didn’t particularly like the whole [...]

Comments (26)

  1. Soccer Dad says:

    Excellent! I know it was a popular vote, but the B/W icons look horrible to me. The runner up set is better with the blue, but a little color sure would be nice.

  2. nice plugin. your plugin make my dashboard fun. thanks

  3. Ben Dunkle says:

    Thanks for voting for me! As a discussion point, while the icons you’re presenting in the alternates are more colorful, how do you see them as metaphorically closer to the labels they’re assigned to? I racked my brains on what would be the best way to visually interpret “posts” and “appearance”; e.g., a thumbtack and a simplified widgetty screen were the best I could come up with.

  4. demetris says:

    Thanks everyone for the comments!

    @SOCCER DAD

    The popular vote is an interesting situation, given that a poll was not really needed: If the user interface of WordPress is your job, you shouldn’t need a poll to select the best submission.

    I cannot really understand what was the purpose of that poll… :-)

    @BEN

    Ben, I know some of the metaphors in the sets I put together are not good (and I’m working on it), but keep in mind that I work with ready-to-use sets that were not made for WordPress, and that I’m not an artist or a designer, so I can’t make a good icon with an appropriate metaphor if one is missing from a set or style. The most I can do is minor edits of existing icons. — That said, finding icons with good metaphors for the two Tango styles is not really a problem, thanks to the general quality of the Tango icons and thanks to the number of open-source projects that make Tango icons for their own uses.

    Your icons I think are good icons, with a couple of exceptions. And some are more than good. They are very good. (My favourites are the little house and the plug.) But they don’t work well as User Interface Icons at 16 by 16 pixels.

    I see three kinds of problems

    1. WordPress puts style before function

    One aspect of this is the choice to use Black & White for the 16×16 icons of the admin menu. In my opinion, it is an irresponsible choice for an application so many people use and rely upon.

    I opened a ticket about this, before your icons were committed, when I realized by seeing the CSS that WP was really going for B&W icons. The ticket was titled “Black & White icons fun but not functional”. It was immediately wontfixed with the comment that it did not provide a solution but was “just a complaint”.

    2. Some metaphors are bad

    2a. POSTS

    The pin is not used for posts in general. It is used for *sticky* posts. But I agree with you that posts are difficult to visualize. I think that the calendar icon is a better metaphor, but I don’t know if it is the best. For the default set of Tangofy I went back to what I had up to v. 0.0.6: just a notepad and a pencil (the stock accessories-text-editor icon of GNOME).

    2b. LINKS

    The chain link is not good for hyperlinks. It is a metaphor that suggests the name, not the function or the purpose, and, for this reason, it depends on language — VERY VERY bad for UI icons! — That said, hyperlinks are difficult to visualize too. But I think that the GNOME stock web-browser icon (earth with overlayed arrow) works well for hyperlinks. It is the best metaphor I found in the sets I looked at, and it is well executed in the GNOME icon set.

    2c. PLUGINS

    The electric plug has the same problem as the chain link. It suggests the name, not the purpose or the function.

    The jigsaw puzzle piece is used in Firefox for extensions (which are the equivalent of WordPress plugins) and is immediately recognizable for this kind of functionality. Other metaphors that may work well for plugins are the Lego brick (used in Firefox for plugins) or just a generic archive icon.

    3. Some metaphors are not well executed

    3a. MEDIA

    The camera is not easy to recognize and it hides the easily recognizable piece of the icon, the note.

    3b. APPEARANCE

    The icon could mean anything. I know it is a layout (which is a concept difficult to visualize) but, if I have to think to get it, the icon has failed. — I think the Tango/GNOME metaphor (shirts) is better, and there are more metaphors that may work for appearance; e.g., a palette.

    3c. USERS

    The icon looks more like a couple of pawns to me, or a couple of rubber seals, than like an icon of two little persons.

    3d. TOOLS

    The hammer is not a good idea. Also, the positioning of the two tools does not help. This is an easy metaphor to execute and there is no reason it should fail. For comparison, see the Silk icon: it only has one tool, a wrench, and it works perfectly.

    That’s it for now! :-)

  5. Soccer Dad says:

    I agree with most of your thoughts on the icons and indicating what they are for, but the calendar for posts is hard to see. In almost anyone’s eyes they’re going to think ‘Calendar’

    I wonder if something along the lines of ‘articles’ like a newspaper or such would be better. The notepad icon is for pages – got that. But I find myself NOT using the term ‘posts’ because I think it’s a bad term. SUre, many blog entries are just little blurbs or posts, but on many sites, they’re stories, articles, etc.

    Tough call – but there’s got to be something beyond a calendar.

  6. iamzaks says:

    Great plugin, I agree with the icons, they look good isolated, but in the admin area they lack personality

  7. Ben Dunkle says:

    Thanks for all the interesting points. As icons become more and more a part of how we communicate, these kinds of discussions are very relevant.

  8. Jasper says:

    Very nice, thanks. Been using it now and I like the Max 2 version a lot!

  9. Chris says:

    Dude. This plug-in is awesome.

    No disrespect to the artist who did the icons in the offical release but the ones you have in your plugin are way better. I think it is the lack of colour in the official ones really gets to me.

    My admin area is now transformed. Thanks for this! I am much happier!

  10. o.me says:

    do I need some chmod-changes to activate the icons? I activated the plugin but nothing happens :-(

  11. demetris says:

    @o.me: No. No changes needed. You should see the new icons upon activation.

    Do you use a custom location for wp-content, by any chance? Can you give some details, to see if I can replicate this? (Theme, WordPress version, and other plugins.)

  12. o.me says:

    Hi,

    I use version 2.7 of wp and the typograph theme. The whole installation is within the same folder. Any clue which plugins could interfere with this? I use shutter reloaded, smush it, pda view, ie warning and such things but nothing special indeed.
    Maybe it’s just my installation which crashed at some point in the past ’cause I had some problems with icons in an other plugin, too.

    Cheers

  13. demetris says:

    @o.me: I tried with your setup (WP version, theme, and plugins) and I cannot replicate this… If you activate the plugin, do you see the URL of tango.css (the default icon set) in the source of admin pages, in the HTML head?

    By the way, have you removed tangofy from wp-content/plugins?

  14. o.me says:

    Hi,

    it’s currently disabled but I’ll check you advise! Thanks for your help!

  15. o.me says:

    I would say it’s implemented :-) but still nothing happens :-(

  16. demetris says:

    Good news, and for future reference:

    It seems that the problem o.me was having was incorrect permissions. Changing permissions to 755 for Tangofy directories and to 644 for Tangofy files resolved the issue.

  17. Mezanul says:

    Thanks!
    This plugin is great! :)

  18. Tony says:

    I agree about the calendar being potentially confusing, but since there’s a couple of options that don’t use one it doesn’t bother me much.

    Thanks for this. I was finding that I’d spend more time looking at the sidebar than I thought I should. Even just injecting some color in the icons so they stand out is helpful.

  19. Livio says:

    Yes! That’s what I needed to be happy!

    I hate WordPress’ icons, they’re lifeless, ugly!

    Tango and GNOME icons are best for me, thank you very much for bringing life to my dashboard!

  20. Darran says:

    I have just installed this and it really looks good, the WordPress admin is slightly more exciting now. Thanks! Great plugin! Looking forward to more styles in future releases!

  21. mark says:

    Whee! It’s seldom that users come back when everything is working fine, but I just have to say how much I love the new Tangofied interface! The icons are gorgeous. Thanks!

  22. It’s nice to add a bit of colour to the dull grey ones found in WordPress 2.7. I use Kubuntu and I sometimes struggle with their icons which comes in any colour as long as its shades of blue.

  23. John Myrstad says:

    This is a nice plugin, and i`d like to propose an enhancement:

    Is it possible to distribute icon set source files with the plugin ?

  24. Kerrick Long says:

    I love it, and I have one more suggestion: Maybe could you replace the default WordPress smileys that are inserted into posts, with the Pidgin smileys?

  25. demetris says:

    Glad you like it, Kerrick!

    Replacing the default smileys is already possible with some other plugins. There is Tango/GNOME Smilies:

    http://wordpress.org/extend/plugins/tango-smilies/

    And you can find some more by looking at the smilies and emoticons tags at WordPress Extend:

    http://wordpress.org/extend/plugins/tags/emoticons

    http://wordpress.org/extend/plugins/tags/smilies

Write a comment

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