Home > Uncategorized > Show category icons per post

Show category icons per post

You may like to show icons in your single posts, or search results pages, corresponding to the post’s category. I know I do. For example, if you have a “SEO” category, you want to display a related icon whenever a post in that category is displayed. It adds a certain spiffiness to your posts, as well as a bit of color. Here’s how I do it.

First you’ll want to acquire and upload a series of icons or small image files corresponding to each category. I’m afraid I can’t really help you with that part, but you’ll probably want them to be of similar size.

Then you want to add the following into your functions.php file.

<?php

function get_cat_icon($the_categories) {
foreach( $the_categories as $category) {

if ($category->cat_name == “Category 1″) {
echo ‘<a href=”http://www.yoursite.com/category/category1″><img src=”http://path/to/your/images/image1.gif&#8221; /></a>’;
} elseif ($category->cat_name == “Category 2″) {
echo ‘<a href=”http://www.yoursite.com/category/category2″><img src=”http://path/to/your/images/image2.gif&#8221; /></a>’;
}
}
} ?>

Then call the function in your template(s) (inside The Loop) where you want the category icon to display.

<?php
$the_categories = get_the_category();
get_cat_icon($the_categories);
?>

What happens is that your template calls the function and passes in the categories from each post. The function loops through each category and, depending on the category for the post, it displays a given image and links it to that category. Of course you’ll need to adjust the links as appropriate for your WordPress install. You can add as many categories/images as needed, just keep adding to the if-elseif statement.

Note that we could also use the PHP switch statement here. That might make it easier to read than the way I have it above.

Advertisements
Categories: Uncategorized
  1. March 17, 2010 at 10:58 pm

    Thanks for sharing… really usefull posts btw…

  2. soso
    May 5, 2010 at 10:00 am

    Really nice tip but I am new at css and need to attach css code to this icon to define margin and size and border ..etc
    how this could be done?

  3. soso
    May 5, 2010 at 10:44 am

    sorry but i figure it out
    thank you so much
    this how i done :
    in the top of functions file just before <?php
    but this code:

    .caticon {
    position:relative;
    height: auto;
    width: auto;
    top:3px;
    }

    then in add the class caticon in img class as follow:

    function get_cat_icon($the_categories) {

    foreach( $the_categories as $category) {

    if ($category->cat_name == “Category 1”) {
    echo ‘‘;
    } elseif ($category->cat_name == “Category 2”) {
    echo ‘‘;
    }
    }
    }

  4. ouija
    September 9, 2010 at 12:49 pm

    How would you set the image if the post belongs to multiple categories?

  5. ouija
    September 9, 2010 at 2:12 pm

    Nevermind, I managed to get it working to my liking! πŸ™‚

  6. paola
    September 12, 2010 at 7:49 pm

    Thanks for sharing this. really useful!

  7. Rama
    September 23, 2010 at 2:19 pm

    Does not work on Worpress 3.0+

    • September 23, 2010 at 3:56 pm

      That’s funny, because I’m using it right now on my other blog, which is WordPress 3.0.1.

  8. October 18, 2010 at 8:07 am

    Really helpful post, I want this feature by default on my newest theme now being designed πŸ˜€

  9. Robb
    November 10, 2010 at 5:56 pm

    Nice technique – worked perfect for me.

  10. March 7, 2011 at 1:49 pm

    nice post, it was really helpful.
    This also works on the index page as well

  1. September 20, 2010 at 7:12 am
  2. January 16, 2011 at 4:19 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: