How to Add Thumbnails to WordPress Categories & Tags

 <?php if (!empty($terms) && !is_wp_error($terms) ){ echo '<p>'. $taxonomy .':</p>'; echo '<ul>'; foreach ($terms as $term) { echo $term->name; } echo '</ul>'; } ?> 

The result looks something like this:

To begin with, deploy this plugin in your WordPress site. You can install the plugin either through Plugins > Add New or through FTP. Once you have activated the plugin, go to Post > Categories. Now, you should be able to find the button “Set a thumbnail“.

Here we have CSS, HTML, JavaScript, jQuery and PHP. We have attached the respective image (logo or icon) for each of these terms. Now, we need to know how to display them.

Getting Started

This plugin comes with some handy template tags to retrieve images similar to the Post Thumbnail template tags. This way, we can retrieve the term’s thumbnail easily.

 <?php $taxonomy = 'category'; $args = array( 'orderby' => 'name', 'order' => 'ASC', 'hide_empty' => true, 'exclude' => array(), 'exclude_tree' => array(), 'include' => array(), 'number' => '', 'fields' => 'all', 'slug' => '', 'parent' => '', 'hierarchical' => true, 'child_of' => 0, 'childless' => false, 'get' => '', 'name__like' => '', 'description__like' => '', 'pad_counts' => false, 'offset' => '', 'search' => '', 'cache_domain' => 'core', ); $terms = get_terms($taxonomy, $args); ?> 

The output is an Array containing information of each term including the term_id, name, slug, term_group, term_taxonomy_id, description, etc. Now, we need to display the term’s name within the lists using the foreach loop, as follows.

Thanks to this WordPress tip and the Taxonomy Thumbnail plugin, we can do this to our post categories and tags. Let’s check out how this can be done with a few lines of code.

The Template Tags

We add the template tag, get_term_thumbnail(), to get the thumbnail and we also add a link to the term’s archive page.

  • get_term_thumbnail_id( $term_taxonomy_id ): to get the Taxonomy term thumbnail ID.
  • has_term_thumbnail( $term_taxonomy_id ): To check if the Taxonomy term has thumbnail or not.
  • get_term_thumbnail( $term_taxonomy_id, $size = ‘post-thumbnail’, $attr = ” ): To retrive the Taxonomy term thumbnail.

First we use the get_terms() function to get lists of terms of the specified Taxonomy – in this case we will get the terms from the post category.

How To Display Thumbnails

Get Terms list

Back in version 2.9, WordPress added the ability to add an Image Thumbnail (later renamed Featured Image) for post, page as well as custom post type. This Image Thumbnail feature does not cover Category, Tag, and Custom Taxonomy, even for later versions (with the exception of perhaps Custom Taxonomy, possibly in WordPress 4.4.)

Clicking this button will display the WordPress Media Manager. Here you can you select the image you have previously uploaded as the category image or you can upload your image, customize it, and finally select it as the image thumbnail of the category (or the tag).

 if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){ echo '<ul>'; foreach ( $terms as $term ) { echo '<li><a href="/index.php/' . $taxonomy . '/' . $term->slug . '">' . $term->name . get_term_thumbnail( $term->term_taxonomy_id, $size = 'category-thumb', $attr = '' ) . '</a></li>'; } echo '</ul>'; } 

And the result (after the added CSS) is as shown below:

The image will be shown in the Category table, allowing you to see which category has an image category attached.

Display the Thumbnails

The plugin has options to choose to retrieve all terms or just terms with thumbnails. To do this, use the parameter below on the get_terms() function:

To show the image thumbnail, we will extend the foreach loop, like from our previous code.

Sometimes a WordPress site will look a lot nicer if we were able to display an image beside categories or tags. For example, we may add an image about CSS in the "CSS" category or the HTML5 logo in the "HTML" category (like shown below).

As you can see above, these functions require the taxonomy ID – the category, the tag, or the custom taxonomy ID – which you can retrieve using the term_taxonomy_id function. The plugin comes with a few more functions such as to set and delete the thumbnail, but these are sufficient for now.

 $taxonomy = 'category'; $args = array( 'with_thumbnail' => true, // true = retrieve terms that has thumbnail, false = retrieve all terms ); $terms = get_terms($taxonomy, $args); 

Apply to other taxonomy

As mentioned, you can apply this plugin to not only categories but also other Taxonomy such as the Tags, Link Category, and Custom Taxonomy. This plugin is useful to enable Image Thumbnail on any Taxonomy just like in Post and Page.

Leave a Reply