How to Add Thumbnails to WordPress Categories & Tags

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

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

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.

Getting Started

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

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

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

The Template Tags

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.

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

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.

How To Display Thumbnails

Get Terms list

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.

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

<?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:

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.

Display the Thumbnails

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

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

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 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:

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

FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenEmail