• 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

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
foreach((get_the_category()) as $category) {
    echo '<img src="http://example.com/images/' . $category->cat_ID . '.jpg" alt="' . $category->cat_name . '" />';
}
?>

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


Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made via the link.

Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

8 Comments

  1. Thanks so much, i always asked how to show icons in categories and pages. I’m happy to visit your site.. Thanks for helping us

  2. I’ll suggest to do that with the category slug, not the ID. If you install your theme in other WP installation, it will still work.

  3. in which file should i add this?

  4. Hi HomeForGeekS.

    Header.php would work fine.

  5. This is exactly what I have been looking for. I hate bloating my wordpress with to many plugins.

    I do have one question though.

    I am trying to get the category names to appear in lowercase as I am using $category->cat_name to name the .jpg files to make it easier to se which icons are which.

    Any ideas how to achieve this? so far I am failing. :(

  6. Hello,
    Thank for a great code. It works like charm but without link. How can I add link to categories?

    Thanks

  • Comments are Closed

Search

Our Sponsors