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

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?

13

13 responses to “How to Assign Icons, Images, and Colors to Categories and Tags in The WordPress Backend”

    • 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.

      • 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.

  1. @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!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Discover more from WP Tavern

Subscribe now to keep reading and get access to the full archive.

Continue reading