How to Assign Icons, Images, and Colors to Categories and Tags in The WordPress Backend

13

When WordPress 4.4 was released in late 2015, some users questioned how to add colors and icons to categories as illustrated at the 1:17 mark in the release video. The colors and icons are not something users can define by default. Instead, they’re exposed by plugins using the Taxonomy Term Meta feature in 4.4.

WordPress 4.4 Release Video Showing Colors and Icons
WordPress 4.4 Release Video Showing Colors and Icons

To add icons, images, or colors to taxonomy terms such as categories and tags, I recommend using WP Term Images, WP Term Icons, and WP Term Colors. All three plugins are developed by, John James Jacoby, and are part of his Stuttter project.

Note, that in order to assign icons, images, and colors to taxonomies in WordPress 4.3 or earlier using these plugins, you’ll need to install and activate the WP Term Meta plugin as it adds Term Meta support.

Once all three plugins are installed and activated, browse to the Categories section of the WordPress backend. You’ll see new fields where you can assign an icon, color, and image. Icons use the Dashicon set that ships with WordPress.

Icon Picker
Icon Picker

Choosing a color is easy as WP Term Colors uses the built-in color picker provided by WordPress.

Assigning a color to Taxonomies
Assigning A Color to Taxonomies

WP Term Images uses the WordPress Media Library to assign an image. Here’s what a category looks like with a color, image, and icon.

Icon, Color, and Image Assigned To The News Category
Icon, Color, and Image Assigned To The News Category

The visual queues are only displayed on the taxonomy management page. In a future update, I’d like to see visual queues in the same areas of the WordPress backend where a taxonomy is displayed. For example, displaying the icon, color, or image for a category on the Post management screen. The category management page is something I rarely visit once a site is established. However, I visit the Post management screen on a daily basis. At the same time, I question the usefulness of displaying something next to individual tags.

These plugins are examples of what’s possible with taxonomy term meta support in WordPress 4.4. I tested each plugin on WordPress 4.5 alpha and didn’t experience any problems. If you’d like to learn more about term meta and how to use it, I encourage you to read this tutorial by Justin Tadlock. What use cases or scenarios can you think of where the visual queues described above would come in handy?

Would you like to write for WP Tavern? We are always accepting guest posts from the community and are looking for new contributors. Get in touch with us and let's discuss your ideas.

13 Comments


  1. Hi

    Those plugins do not work on existing categories in a wordpress multi site install. Just tested several themes and they all fail to save the settings for the icon, color and image

    Report


    2. Hi Neo,

      I’ll need a bit more information to help. All of these plugins are currently in use in a few multisite environments, and I’ve not seen what you’re seeing yet.

      Rather than try and do support here in the Tavern comments, would you be able to jump over to WordPress.org and open a ticket in the support forum for one of the plugins you’re having an issue with?

      If there’s a problem, I’ll get it fixed right away and get new versions out ASAP.

      Thanks for taking the time to reach out.

      Report


      1. Hi

        I am using a wpms with wp 4.4.1 setup in 2011. so it still uses the blog dir structure.

        I uploaded the plugins and deactivated all plugins even the ones that are network activated.

        Then activated only these 3 plugins in a couple of subdomains one was running the default 20-13 theme.

        The fields are there and i can set the color and icon and image, but the moment i save them they disappear and are not attached to the category.

        Best regards,
        N.

        Report


      2. I did add a support request in wordpress.org in one of the plugins. If you send me email i can send you a screen video i made.

        Report


  3. It’s a shame you need to add an extra four plugins to offer some visual appeal. It’d be nice to see it as a standard on the back-end (though not sure if I’d use personally, but can see the appeal).

    Report


    1. Good coded plugins are like functions, Is it problem that WordPress has 1013242 php files ?

      Report


      1. Given I’m not a coder, I can’t answer that. :)

        From a simple UX point of view, the less I have to manage the better. If 1 million+ PHP files are found under one area, versus 4 separate plugins, I’m good with that.

        Report


  4. @Danny Brown I agree ;) The plugin author should roll these tidbitty helpers into a single plugin “suite” toolset. I’ve rolled tax colors, tax icons and tax images in my themes for years, using:

    get_option( “taxonomy_$tax_id” )

    Looking forward to using Term Meta now!

    Report


    1. Cheers, Tai, I might even mess about with your solution on test server, to see if it’s something that might help on my multi-author blog. :)

      Report


      1. @Danny Brown Yeah, the new Term Meta is awesome for developers! You just gotta get creative. There are many ways to implement Term Meta. Here’s a site with a color-coding system, icons for tax terms and custom header images for taxonomy_$tax_term.php templates, etc:

        https://firstfocus.org/issues/education/

        Click on “Issues” in the main navbar to see colors. Click on “Resources” in the navbar to see icons in the taxonomy widget. Term Meta is fun stuff!

        Report


      2. Awesome, cheers for the link, look forward to checking it out.

        I’m no dev – heck, I’m not even an amateur copy/paste coder – but it’s always fun to see what others are doing and how to implement it. :)

        Report

Comments are closed.