• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

In the last post, we tried to learn how to display category images by displaying company profiles at the bottom of our posts. Each company was used as a category and we used a little bit of code to display images for the categories used to file the post. We also displayed description for that category and a link to read more posts about that company.

I decided to continue practicing with images for tags and categories. In today’s post we will try to learn how to display tags as trending topics in the sidebar with images. Just like Mashable, except that our trending topics will not have a follow button below them.

The problem

Currently WordPress does not have functionality to associate images with categories, tags and custom taxonomies. So if you want to display an image to represent a particular category, tag, or custom taxonomy you will have to use plugins to do that. Most currently available plugins provide different kind of features. So if you want to do something you have to go through different plugins, then you will find a plugin that will offer some solution close enough to meet your needs but not good enough.

For example, while writing this post we found a plugin that we will discuss later. That plugin provided as the functionality needed but we had to write our own code and add our own styling to it.

The problem with tags is that people like to display them as cloud. I don’t know why? Does showing tags in a cloud make them more appealing to visitors? Are there some other ways to display tags and make them interesting and appealing?

We will try to learn how we can display our tags in a list with images next to them. We will sort the list so that the most used tags on our site are on top of the list.

Preparation to associate Images with Tags in WordPress

First of all you need to decide what image size you want to use for your images. Since we will be using this in our sidebar we don’t want to use larger images. In this tutorial we will be using 40x40px images for our tags. You can use other sizes depending on your own layout and preferences.

Taxonomy Images Plugin for WordPress

Taxonomy Images plugin by Michael Fields, allows you to associate images with your categories, tags, link categories, and custom taxonomies using the built in Media Uploader, and then display those images in your templates and themes. You can use this plugin to display these images anywhere on your website it works find inside posts, sidebars, and archive templates. We will be using this plugin to build associations and then we will use the plugin functionality to display those images for our tags.

Download Taxonomy Images plugin »

Add Images to Tags

Go to your tag management screen and if you have downloaded and installed Taxonomy Images plugins then you will see a nice image box next to your tags. Clicking on this box will open media uploader window and you can add an image to that particular tag. Make sure you do that for most commonly used tags on your website at least.

Displaying images for Tags in the Sidebar

In the first step we need to create some code to display a list of our tags with the most posts along with their associated images. To do that we add the following code to our theme’s functions.php file:


function my_trending_tags() {
echo "<div class='trending_topics'><ul>";

	$categories =  get_categories(array( 'taxonomy' => 'post_tag', 'orderby' => 'count', 'number' => '10' ));
	 foreach ($categories as $category) {
		$termlink = get_category_link( $category->term_id );
		$termname = $category->cat_name;
	 	$tax_term_id = $category->term_taxonomy_id;
 		$images = get_option('taxonomy_image_plugin');
 		echo '<li><a href="' . $termlink . '">';
		echo wp_get_attachment_image( $images[$tax_term_id], 'full' );
		echo '</a><br /><a href="' . $termlink . '">' . $termname . '</a></li>';

 }
	echo "</ul></div>";

}

Now allow me to explain this code to you, first we create a function and name it my_trending_tags. Inside the function we 10 post tags with the most posts by using get_categories function. Now get_category function returns an array of the information we need (see php array). Then we loop through the information in the array. We pick one tag, fetch the url for the tag page, then we fetch the image for that tag, then we print the name of the tag and close the link, list item and go back and do that again until we have printed all 10 tags or there are no more lines in the array. Once we have looped through the array we close the list and the div class.

Now the problem is how to display our function inside a widget. Most themes use widgets and we cannot add php code in the widgets. To resolve this we download, install and activate WordPress PHP Code Widget by Otto42. This plugin allows to add php code widget into our sidebar. Go to Widgets, drag and drop PHP Code Widget into the sidebar where you want your trending tags to appear. Inside the widget add this single line of code

<?php my_trending_tags(); ?>

The result in your sidebar will look something like this:

Styling your Trending Tags

So far we have associated images with our tags and displayed them in a bulleted list. But now the list looks terrible. Because we have not added any styling to our list, in your theme’s user style sheet add the following CSS:

.trending_topics ul {
list-style-type:none;
list-style:none;

}

.trending_topics li {
border-bottom:1px solid #ccc;
padding:5px;
background:#eee;
}

How the final result looks :


Different Methods to do the same thing

I like to make things easier and simpler for non-expert users. Some of our expert level readers might want to do this a little differently. Like for example they can add an action for my_trending_tags function and then do that action inside a Widget so that they don't have to add code in functions.php file and the same widget becomes available to all other themes. Some more advanced users might want to write their own plugin to associate images with taxonomies, uploading them, and managing those images.

Conclusion

Tag clouds were used to quickly give a user an idea of what topics are most often discussed on a blog. However, I feel that most web users are now tag cloud blind and hardly click on tags in the cloud. The functionality to display tags without clouds is available since a long time and lots of websites owners already use tags in different ways. Images with your tags and categories make them more appealing and noticeable, but I am sure there are many other ways use them even more efficiently.


Post Tags

Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

11 Comments

  1. Couldn’t you add a function to just register it as a widget? This is based on using your code as a plugin.

    function widget_my-trending_tags() {
    my_trending_tags()
    }

    function my_trending_tags_init(){
    register_sidebar_widget(__(‘My Trending Tags’), ‘ widget_my-trending_tags ‘);
    }
    add_action(“plugins_loaded”, “my_trending_tags_init”);

    • NoumaanYaqoob

      Yes @facebook-100000568991097:disqus as I mentioned in the end of the post that it can be added as a widget. but if you have created a plugin why not load the widget inside it so that it is available for all themes.

  2. I used your but when I display trending tag. it links back to the post itself not to tag. please investigate.

  3. Great article!

    Id like to do a similar thing but display the image in the post itself. so in the single post view show the image of the tag the post has.

    luv to here your feedback.

  4. Does it work by using wordpress 3.8?

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors