How toHow to display a list of the categories with icons

Here is an example of how to do that :

echo '<ul>';
foreach(get_categories("orderby=name&order=ASC") as $category) {
    echo '<li>'.$category->cat_name.' '.get_cat_icon("echo=false&cat=".$category->cat_ID).'</li>';
}
echo '</ul>';

Update : As I’ve received e-mails and comments on how to implement it, here is the solution. First, create a new page and put {#caticons_listing} in it. Then, paste the following code in the function.php file of your theme (if the file does not exist, create one) :

add_filter('the_content','bm_caticons_listing');
function bm_caticons_listing($content) {
    $listing_code = '<ul>';
    foreach(get_categories("orderby=name&order=ASC") as $category) {
       $listing_code .= '<li>'.$category->cat_name.' '.get_cat_icon("echo=false&cat=".$category->cat_ID).'</li>';
    }
    $listing_code .= '</ul>';
    return str_replace('{#caticons_listing}',$listing_code, $content);
}

Update 2 : You can use a shortcode : [caticons_listing], instead of {#caticons_listing}, which results in a simpler code, as suggested by Robert of trupela.com (thanks, Rob !) :

add_shortcode('caticons_listing','bm_caticons_listing');
function bm_caticons_listing() {
    $listing_code = '<ul>';
    foreach(get_categories("orderby=name&order=ASC") as $category) {
       $listing_code .= '<li>'.$category->cat_name.' '.get_cat_icon("echo=false&cat=".$category->cat_ID).'</li>';
    }
    $listing_code .= '</ul>';
    return $listing_code;
}

29 thoughts on “How to display a list of the categories with icons

  1. Hi, thanks for the update. Here is what I am trying to do:
    Instead of:
    Category Name1
    Category Name2

    I am trying to get this:
    ICON1 Category Name1 (#of posts in cat.) (LINK to Form page 1)
    ICON1 Category Name1 (# of posts in cat.) (LINK to Form page 2)

    ICON1=The icons assigned
    LINK to Form Page=The same icon repeated which links to diff pages after the count # of posts per category.

    Can you help me? Thank you!

  2. Hi.
    For the # of posts in cat., use $category->count. After that, it’s just some HTML code. Good luck.

  3. Hi, I’ve looked all around for the HTML code for the link to Form pages. Could you point me in the right direction please Sub?

    Thanks and I appreciate your help!

  4. Hi Sub,

    Excellent plugin.
    I too want to just implement the icons next to my existing category list.
    I see the code above, but where exactly do I put it?

    Thanks,
    Marc

  5. Hi Sub,
    I created functions.php, and uploaded it to the template are with all the other .phps, but it does not work at all.
    I am just trying to be able to add html code right after the category names and post counts in the sidebar (The icons work great).
    Thanks and hope to hear from you,
    Kind Regards

  6. Hi Sub,

    I just found your plugin… But one question is left…

    I don’t get the “create a new page” part. What exactly do I have to do?

    Regards

  7. Hi,

    How would I change the first line of code so the text doesn’t display (I just want the thumbnail to show). Thanks :)

  8. Hey,

    Brilliant plugin; I spent ages trying to code something similar myself before a friend pointed me at this, and it’s perfect!

    My question is, I’m wondering if there’s a way to get the list to display as links rather than just a static list?

    Thanks!

    Cx

  9. Hi,

    delete the <ul> and </ul> tags, and replace 5th line by this one :
    $listing_code .= ‘<a href=”‘.$category->cat_ID.’”>’.$category->cat_name.’ ‘.get_cat_icon(“echo=false&cat=”.$category->cat_ID).’</a>’;

  10. how do i link the category heading?

    echo ”;
    foreach(get_categories(“orderby=name&order=ASC”) as $category) {
    echo ”.$category->cat_name.’ ‘.get_cat_icon(“echo=false&cat=”.$category->cat_ID).”;
    }
    echo ”;

    The image is already linked but not the text.

    I am using this code in index.php

  11. Great Plugin, just one question so I can use it for what I need to.

    How would I add category icons to a category page (archives.php) to allow category navigation via images of subdirectories under the parent category. Basically, how do I get the individul subcategories under the category to display in the archives pages (for categories). I want to be able to navigate through with categories.

  12. Great plugin. I wish to list the categories in a plugin, I cannot use the {#caticons_listing} in the plugins – it just prints out ‘{#caticons_listing}’ I have modified the function slightly so that it just displays the icons in a horizontal list. How could I call this from within a sidebar widget?

    Thanks for your help

  13. Hi,

    Really like the plugin! It seems to be limited only by one’s imagination!

    I have modified the curly brackets approach to listing categories (with icons of course) in a post or page and created a shortcode to do the job. The “{}” approach worked well but I found an overhead to do it for each and every post. Employing a shortcode means that the code is only invoked as needed.

    A good rap for your plugin plus a demo plus the code for the function behind the shortcode can be found on my blog here: http://www.trupela.com/2009/11/16/a-post-is-a-category-is-a-story/

    R

    PS. a big thanks to the author of this plugin for the valued contribution to the WordPress community.

  14. Hi!
    Thanks for the great plugin!! really change the style of my blog!

    I need help!! I can’t make disappear the folder Icon next to my category icon.

    When i see the categories, first i see the categorie folder , 2nd the icon i upload, 3rd the category name.

    I just want Icon + Name.

    Can you tell me any solution! Thank you very much from Argentina!!

  15. Hi!
    I modified your code snipped to accept two arguments: “include” and “exclude”. See below.

    add_shortcode(‘caticons_listing’,'bm_caticons_listing’);
    function bm_caticons_listing($atts) {
    extract( shortcode_atts( array(
    ‘include’ => ”,
    ‘exclude’ => ”,
    ), $atts ) );
    $listing_code = ”;
    if ($atts['include']) $include = “&include=”.$atts['include'];
    if ($atts['exclude']) $include = “&exclude=”.$atts['exclude'];
    foreach(get_categories(“orderby=name&order=ASC&hide_empty=0″.$include.$exclude) as $category) {
    $listing_code .= ”.$category->cat_name.’ ‘.get_cat_icon(“echo=false&cat=”.$category->cat_ID).”;
    }
    $listing_code .= ”;
    return $listing_code;
    }

  16. Hello, can you explain better how to put $category->count.?

    Please:)!!

  17. Somebody mentioned my code snippet above was throwing errors; I’m guessing because it was copy/pasted directly from comments, which changed the quotes to their unicode equivs.

    I’ve redacted it onto Pastebin, see:
    http://pastebin.com/63HzSP4Z

    Note that I haven’t touched this plugin since February and totally forget where I used it — apologies if the updated pastebin code doesn’t work.

  18. How do I get the icons to display in a an array of 4 icons wide versus just a list

  19. <?php
    $cats = explode("”,wp_list_categories(‘title_li=&echo=0&depth=1&style=none’));
    $cat_n = count($cats) – 1;
    for ($i=0;$i<$cat_n;$i++):
    if ($i<$cat_n/2):
    $cat_left = $cat_left.'’.$cats[$i].”;
    elseif ($i>=$cat_n/2):
    $cat_right = $cat_right.”.$cats[$i].”;
    endif;
    endfor;
    ?>

    How i add here? please help