Genesis Taxonomy Images User Guide

This User Guide explains how to use the Genesis Taxonomy Images plugin. There are usage instructions and examples of the code you’ll need to display a term image for your users.

TL;DR

After installing the plugin, you will have the new ability to assign a featured image to each term in all taxonomies (tags, categories, custom taxonomies). The assigned image is shown in the term list and can be modified on the term edit screen.

To display the image for your users, you’ll have to add some code. You’ll find examples of this later in this guide.

Assigning Images to a Term

Adding a new image to a term

Step 1. In the Dashboard, navigate to the Categories edit screen (Posts ➜ Categories).

I’m using Categories for the instructions, but these steps apply to all taxonomies in your site.

Step 2. In the term list, you’ll see a new column called “Image” in the table of terms.

Step 3. Edit a category (by rolling over the category name and selecting Edit). This will open the Edit Category page, where you’ll see a new section called “Term Image,” together with some control buttons.

Step 4. Click the Set Term Image button to launch the familiar Media Upload panel, and either select an existing image in your Media Library or upload a new one in the usual way. Once you have selected an image, click the Use image button in the Media panel to return to the Edit Category screen. You’ll now see your chosen image displayed in the Edit Category screen:

Step 5. Very important: the term image has been added to the term screen, but not yet saved. Click the Update button at the bottom of the Edit Category screen in order to save the image for later use. This will take you back to the term listing page.

Step 6. Once you have clicked the Edit screen Update button, you will be taken back to the main Categories edit screen where you will see a thumbnail of your image in the “Image” column:

Remove or Change an Existing Term Image

To remove an image, navigate to the Edit screen for the term in question and use the Remove Term Image button to…you guessed it, remove the existing image. Then click Save at the bottom of the term’s edit screen.

To change an image, navigate to the Edit screen for the term in question and use the Set Term Image button to launch the Media Uploader panel to select or upload a new image. From here, the steps are the same as adding anew image; see steps 3, 4 and 5 above.

Displaying a Term Image for your Users

Now that the images are assigned, making them visible to your users will require a bit of code.

What is stored

Every image in WordPress’s Media Library has an ID used to identify it. When you click Save after assigning an image to a term, this ID is stored as term meta, a standard part of WordPress.

Getting the Image: Standard WordPress tools

As mentioned, the assigned image ID is stored as term meta. This means you can access the image ID using the standard WordPress term meta tools, like get_term_meta().

Remember that the image ID is stored, which is great: having the image ID means you can then do anything you can normally do with an image in WordPress. However it also means that you have to write the code to do something with it: get the image URL, add the img tag, whatever.

There is an easier way.

Getting the Image: plugin tools

This plugin provides an easy way to not only get the image ID, but optionally the image URL and the a fully rendered img tag complete with scrset attributes for responsive images.

It’s does all this using a helper function called gtaxi_get_taxonomy_image(), the details of which you can find here. There are also filters provided to allow you to modify what is returned at various points along the way. These filters are listed here.