How to use Category Icons with the Thematic theme

This is for version 0.9.7.7 of the Thematic theme.

1. Go to the folder library > extensions
2. Open the file content-extension.php
3. At the line number 672, replace : Continue reading

How to use Category Icons tags in a script

Sometimes, you need to use the tag get_cat_icon or/and put_cat_icons in a script. So to get the icon in a variable, it must not be displayed. The parameter to not display the category and to get it returned is : echo, and it needs to be set to false. Here are examples of how to use it. If your script is not in the Loop, you must use the cat parameter and give it a category id. Continue reading

How to hide No categories if there are no subcategories

Someone is using the put_cat_icons tag in order to display his categories and subcategories in archive.php. This presents a sizeable icon for each subcategory of the currently selected category. How to do this :

$cat = get_cat_ID( single_cat_title("", false) );
put_cat_icons( wp_list_categories('hide_empty=1&orderby=name&echo=0&depth=1&title_li=&child_of='.get_cat_ID( single_cat_title("", false) )));

The problem is that when there is no subcategory, “No categories” is displayed. So to hide this, we’ll use another filter this time, named wp_list_categories. Paste the following code in your functions.php file in your theme.

function bm_dont_display_it($content) {
  if (!empty($content)) {
    $content = str_ireplace('<li>' .__( "No categories" ). '</li>', "", $content);
  }
  return $content;
}
add_filter('wp_list_categories','bm_dont_display_it');

How to set a default icon

Suppose you have categories that don’t have yet an icon assigned to. If you want to display a default icon instead of nothing (no icon), here is the code that you must paste in functions.php (in your theme) :

function bm_noicon($content) {
 if (empty($content)) {
   $content = '<img src="http://yourdomain.com/wp-content/uploads/cisco.gif" alt="default icon" />';
 }
 return $content;
}
add_filter('category_icons', 'bm_noicon');

Of course, you need to replace http://yourdomain.com/wp-content/uploads/cisco.gif by your own icon/image URL.

How to assign a specific icon for a post

Someone (onkelandy from Weeds ? :)) asked me if it was possible to assign a specific icon for just a post :

Normally icons are shown depending on the category a post is put in. If a post is related to several categories the priority system comes into place. Anyhow there are some cases where that icon just doesn’t fit to a specific post. So it would be very cool if it was possible to define a specific icon/icon category for just that post by using the “custom field” that appears on the “create post” page in the admin area.

Yes, it is possible, thank to the filter ‘category_icons‘, as I’ve written about in this post. Just make sure you add a custom field named “caticons” and the URL of the icon/image as the value. Paste the following code into functions.php of your theme :

function bm_unic_icon ($content) {
  $values = get_post_custom_values("caticons"); // Get the values of the field 'caticons'
&nbsp; if (isset($values[0])) {
    $content = '<img src="'.$values[0].'" alt="my specific icon" />'; // Get the icon URL
  }
&nbsp; return $content;
}
add_filter('category_icons', 'bm_unic_icon',15); // Use the filter 'category_icons'

Of course, it’s up to you to customize the 4th line, in order to make a W3C compliant output, for example…

How 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;
}