Ahmad Awais

NAVIGATE


SHARE


Why You Should Never Use Colored Icons Inside the WP Admin Panel

Ahmad AwaisAhmad Awais

<rant>

This is going to be a short post because I’ll try to keep it on point. WordPress has an ecosystem. When you enter that ecosystem, you gotta respect its rules; you gotta make an effort to be a part of the community, and you should try to improve the product user experience while you’re at it.

Remember that kid from your time at school who never really understood how to be a part of the cool kid’s group? Especially, during summer camps when there was no uniform condition to abide by, he wore the oddest of the clothes. Yup, it was that time in our lives when standing outside the crowd meant you are a weirdo geek or something.

Same is the case with WordPress. You see, WordPress core doesn’t have everything you need to build your custom website with. That’s why there exists a concept of plugins. Plugins are supposed to extend WordPress. Now, I am not talking about API based plugins which connect a SaaS platform with WordPress. I am talking about little plugins which add an extra functionality in your WordPress admin panel.

You see I was a UX designer who later converted from frontend of the web to a full stack developer. But that designer part inside me never really went away. I find it hard not to judge a book by its cover. In case of WordPress plugins, I judge your programming practices with these teeny tiny mistakes.

Responsible Extension of WordPress Admin Panel#

I guess what I am trying to say is that when you build a small WordPress plugin, that extends a feature inside our WordPress Admin panel, you should be very careful about the list of following factors.

⚡️ Never use colored icons inside the admin panel! It’s true, and I can’t tell you how many plugin developers ignore this one. When you add a menu for your plugin or when you add an extra feature in the WP editor’s TinyMCE bar; in both the cases you get to add an icon for your menu or the feature. You have the option to be a responsible developer here. Adding a colored icon disturbs everything for someone like me.

It’s very hard to focus and write something when your editor has more colors inside it than a friggin’ rainbow.

Bad-UX-WP-Editor-Icons

See how funny the TinyMCE bar looks when you break the flow of design and choose to embed colorful unicorns inside it? I for one cannot stand it. Here’s another one.

Bad-colored-icons

See, how bad it looks? Yucks! I wanted to use this ThirstyAffiliates plugin but having to look at these two greenish icons made me write off the plugin in the very first week. I don’t even know how to explain this thing. But to me, it looks like you threw up over the UI and thought — Yeah, that looks nice!

⚡️ Never put colored icons in the admin menu bar! Some plugin developers believe that they are doing some kinda favor to their users by putting a big pixelated piece of junk right inside the admin menu bar. What? Too much? Did I just say that out loud? What’s done is done now. I hate to break it to you, but can you please stop ruining the WordPress admin panel?

Piece-of-junk-icon

See what I am talking about? In the collection of 7 custom plugins, all of the plugins except one kept their icons in line with WP admin panel design. See how cool they look? And can you spot the pixellated, ultra-visible (read ultra-hateful) blue-colored icon for WP-Optimize? That said, it’s a pretty great plugin. I use it all the time.

Bad-UX-deal-breaker

Oh, this again. Look at how bad that greenish icon looks the one for Affiliate Links. It’s the deal breaker for me. Couldn’t stand all the great features which this plugin had to offer due to the poor choice of silly colored-icons.

Speak Away!#

I hope I have not hurt your feelings, oh did I? Maybe I should? WordPress developers need a reality check. And don’t you even get me started at if your plugins should create a separate menu or just reside as a sub menu inside tools/setting menu. Seriously, don’t.

</rant>

[UPDATE]: I like and use the plugins that I mentioned in this article. The only thing that I don’t like about them is their colored icons. I hope no one has any funny ideas about this troll. It is NOT meant to disgrace or disrespect anyone. #FoodForThought

Founder & CEO at Langbase.com · Ex VP DevRel Rapid · Google Developers Advisory Board (gDAB) founding member. 🧑‍💻 AI/ML/DevTools Angel InvestorAI/ML Advisory Board member San Francisco, DevNetwork

🎩 Award-winning Open Source Engineer & Dev Advocate 🦊 Google Developers Expert Web DevRel 🚀 NASA Mars Ingenuity Helicopter mission code contributor 🏆 8th GitHub Stars Award recipient with 3x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).

🌳 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. 📟 Teaching thousands of developers Node.js CLI Automation (100 videos · 22 Projects) & VSCode.pro course. Over 142 Million views, 22 yrs Blogging, 56K developers learning, 200+ FOSS.

✌️ Author of various open-source dev-tools and software libraries utilized by millions of developers worldwide WordPress Core Developer 📣 TEDx Speaker with 100+ international talks.

As quoted by: Satya Nadella · CEO of Microsoft — Awais is an awesome example for developers.
🙌 Leading developers and publishing technical content for over a decade 💜 Loves his wife (Maedah) ❯ Read more about Ahmad Awais.

👋… Awais is mostly active on Twitter @MrAhmadAwais

📨

Developers Takeaway

Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!

✨ 172,438 Developers Already Subscribed
Comments 17
  • Ashley
    Posted on

    Ashley Ashley

    Reply Author

    PREACH!


  • Phelan
    Posted on

    Phelan Phelan

    Reply Author

    Ahmad, I completely agree with you. I would add one more and that is the plugin section itself. I can’t stand when the developer decides to be a designer and add cute background colors, fonts, and other crap to separate their plugin from the rest. This is the worst zen rule breaking of all.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Thanks, for dropping by. You are right. Blending in is much better than standing out in this scenario.


  • Luke Cavanagh
    Posted on

    Luke Cavanagh Luke Cavanagh

    Reply Author

    WP-Optimize is actually a solid plugin though.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Yes, I also like the plugin. Hence my frustration. I think I did report this as a support request as well.


  • Jason Tucker
    Posted on

    Jason Tucker Jason Tucker

    Reply Author

    Lil bit of CSS to filter the color out would fix this for you.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hey, Jason! Nice of you to drop by. I know that. I am just way too lazy to that. I think I will end up contributing to each of these plugins if the developers let me. It’s better to fix the root of contention here.


  • Noel Sufrin
    Posted on

    Noel Sufrin Noel Sufrin

    Reply Author

    You speak the truth, Ahmad!

    Nicely worded, concise and on-point. As a kid standing outside the crowd, wearing multi-colored Chuck Taylors, a home-made Anarchy tee, and a big black Mohawk, I reveled in bucking the norm. But that rebelliousness ends at admin UI/UX aesthetics. Thanks for championing the cause!

    PS: I’ll bet you hate left lane drivers who never move over too, don’t ya?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      That’s very kind of you to say. ?

      Glad to see that I am not alone, you along with most of the response had been in the favor of keeping icons grayscaled. Better readibility and effective for color blind people as well.

      PS: I’ll bet you hate left lane drivers who never move over too, don’t ya?

      ? Yup! Tell me you have invented the mind reading tech already :)


  • André Giæver
    Posted on

    André Giæver André Giæver

    Reply Author

    Word!

    I’m having to deal with numerous of these plugins and their epileptic attempts to make themselves noticeable in wp-admin. Now, all promotional purposes and good intentions aside, they all undermine the most general of usability aspects, not to mention editorial workflows. Shame on them for being so ignorant an shame on us for not telling the developers directly how we feel about it.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      It’s about time we start talking about such stuff! :)


  • Mike
    Posted on

    Mike Mike

    Reply Author

    Ahmad, great post! I completely agree with you.


  • Jeremiah Easter
    Posted on

    Jeremiah Easter Jeremiah Easter

    Reply Author

    You are correct sir! stop the color madness :)


  • Former WP Contributor
    Posted on

    Former WP Contributor Former WP Contributor

    Reply Author

    Thanks for this article.

    If you find some time, please add your thoughts here:

    https://github.com/WordPress/wporg-plugin-guidelines/issues/71

    The issue there unfortunately was closed without discussion with simply a personal opinion given as reason. Community matters? Not so much…