troubleshooting Question

Help with Wordpress php fuction wp_list_categories. Add an icon image

Avatar of Jon Imms
Jon ImmsFlag for United States of America asked on
2 Comments1 Solution1824 ViewsLast Modified:
I am creating a page which i would like to display a list of categories, with an image and description.  For this i am using a plugin called Category Icons.

I am trying to modify the way it displays with a function. What i would like to do is have it display like a regular post, so title, image/icon , description,  read more.

I am able to display the title and Description, but i am unable to display the image.

this is the simple function the plugin guys say to display an icon and title, which works
function bm_caticons_listing() {
    $listing_code = '<ul class="our-menu">';
    foreach(get_categories("orderby=name&order=ASC&exclude=33") as $category) {
       $listing_code .= '<li class="our-menu-cats">'.get_cat_icon("echo=false&cat=".$category->cat_ID).''.$category->cat_name.'</li>';
    $listing_code .= '</ul>';
    return $listing_code;

I'm trying to modify this so i can display as i have said above. This is what i have got so far
// Create a modified output of wp_list_categories where the categories description
// is added inside a span tag within the link like so:
//<li><a title="Category Description" href="#">Category Name<span>Category Description</span></a></li>
function list_cats_with_desc() {
  $base = wp_list_categories('echo=0&exclude=33');
  // <li> so let's make use of that!
  // Shouldn't really use regexp to parse HTML, but oh well. wp_list_categories adds a "cat-item-[category_id]" class to the
  // (for the curious, here's why: )
  $get_cat_id = '/cat-item-[0-9]+/';
  preg_match_all($get_cat_id, $base, $cat_id);
  // Let's prepare our category descriptions to be injected.
  // Format will be <a>category-name<span>category-desc</span></a>
  $inject_desc = array();
  $i = 0;
  foreach($cat_id[0] as $id) {
    $id = trim($id,'cat-item-');
    $id = trim($id,'"');
    $desc = trim(strip_tags(category_description($id)),"\n");   // For some reason, category_description returns the
                                                                // description wrapped in an unwanted paragraph tag which
                                                                // we remove with strip_tags. It also adds a newline
                                                                // which we promptly trim out.
    if($desc=="") $desc = "Add Description";
    $inject_desc[$i] = '<span class="cat-desc">' .get_cat_icon("echo=false&cat=".$category->cat_ID) . $desc . '</span></a>';
  // Now we inject our descriptions
  $base_arr = explode("\n", $base);
  $base_i = 0;
  foreach($inject_desc as $desc) {
    // We check whether there's an occurence of "</a>"
    while(strpos($base_arr[$base_i], "</a>") === false) {
    // If we find one, inject our description <span>
    $base_arr[$base_i] = str_replace("</a>", $desc, $base_arr[$base_i]);
  $base = implode("\n", $base_arr);
  echo $base;

I am unable to get the image/icon to appear though ???   Could somebody take a look to see what i am doing wrong please.

Here is the link to the page it is being displayed on  ... category webpage
Basically, if i can get the image to appear with the description, then i can style it with css pretty easily.
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 2 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros