WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How To: Show Different Icons for Each WordPress Category

Last Updated on December 12th, 2018

Published on December 14th, 2011

Tags:

Share This Article

For the next version of WPLift, Im working on a new theme and had the need to use icons for each category as a visual clue to help people identify content on the homepage. Fortunately this is pretty easy to accomplish in WordPress as each category has its own ID number which we can use to display the images.

Code for your Theme

You can use the following code in your theme where you want the image to appear, replace example.com/images with the path to a folder on your site and name your icons 1.jpg, 2.jpg, 3.jpg and so on , making the number correspond to your category IDs.

[php]
<?php
foreach((get_the_category()) as $category) {
echo ‘<img src="https://example.com/images/’ . $category->cat_ID . ‘.jpg" alt="’ . $category->cat_name . ‘" />’;
}
?>
[/php]

Source: WordPress Codex

Use a Plugin

If you want a more advanced way to do this, there is a plugin called “Category Icons” you can use with some more advanced features:

  • displays one or more icons in front of your post title or wherever you want
  • displays icons in the sidebar, with or without the category name, with or without the help of the widget
  • includes a widget.
  • you can make rollover with the icons in the sidebar
  • is able to display category icons in your RSS

Download Category Icons Plugin &raquo

Stay informed on WordPress

Every Friday you’ll receive news, tutorials, reviews, and great deals from the WordPress space.

Invalid email address
Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift in 2010.