Category Icons Premium Module for Another WordPress Classifieds Plugin

In a previous post (“beware of imitations“), I said that Category Icons Premium Module for Another WordPress Classifieds Plugin was an imitation and that you should not buy a plugin that you could have for free. Well, I was mistaken : the author sent me the source code, and it’s not comparable to the WordPress Category Icons plugin. So, I made a mistake, and I apologize to A. Lewis for my error. I’m sorry.

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 center text vertically after the icons

If you want to center text vertically after the icons, just as I do, you need to add this in your CSS stylesheet (style.css) :

.myicons {
  vertical-align: middle;
}

Add this in your theme files :

get_cat_icon('class=myicons');

If you want to add this in sidebar.php without using the widget, you should have something like this :

if (function_exists('put_cat_icons'))
 put_cat_icons( wp_list_categories('title_li=&echo=0'),'class=myicons'));
else
 wp_list_categories('title_li=');

For the widget, put this in the parameters field :

class=myicons
widget myicons How to center text vertically after the icons

Category Icons Widget

Please, please, use Firebug to test your CSS settings.

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 ? icon smile How to assign a specific icon for a post ) 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'
  if (isset($values[0])) {
    $content = '<img src="'.$values[0].'" alt="my specific icon" />'; // Get the icon URL
  }
  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…

Beware of imitations !

Update : I apologize to A. Lewis for my error.

I’ve found that this website : http://www.awpcp.com/premium-modules/category-icons-module/ is selling a WordPress plugin called Category Icons for $10.99 !!! Here is how they describe it :

Category Icons Module

Category Icons Premium Module for Another WordPress Classifieds Plugin – $10.99

This module allows you to add icons to your categories and subcategories. The silk icon pack from famfamfam.com is included in the default package. You can always use your own icons by uploading them to the images/caticons folder. Adding your icons is a simple matter of selecting the icon you want to use for a specific category and clicking a button to set it. (If you have previously made a donation of $10 or more please contact me for a free copy of this module)

It sounds familiar, does not it ? Even the famfamfam icon pack I’ve talked about here. So don’t buy a plugin that you could have for free by downloading it !

What’s new in 2.1 ?

Almost one year without update, but here it is :

  • jQuery scripts bugs with WordPress 2.8 resolved.
  • The admin interface is successfully checked as XHTML 1.0 Transitional.
  • Bug in checkboxes in Options Tab resolved.
  • Better visual integration with WordPress 2.7+
  • You can now add multiples Category Icons widgets.
  • You can include just some categories thank to the new “Include” field in the widget.
  • Two options were missing from the start : maximum icon width & maximum icon height.
  • You can choose the access type to the database : an access for every icon (a query for each icon) which is the default option, or one access for all the icons (one query for all).
  • Added compatiblity with Rob Marsh’s plugins (http://rmarsh.com/) : recent posts, recent comments & similar posts. Just add in output filter : {caticons} to see the first category icon.
  • Compatible with WordPress MU 2.8.1

The translations need to be updated. You’ll find all the .po files in the archive if you’re willing to help. Thanks for that. icon smile Whats new in 2.1 ? Make sure the .pot file creation date is :
POT-Creation-Date: 2009-07-23 12:43+0100
Or download it from the svn repository.

codaSlider error

For those having the following error :

Syntax error, unrecognized expression: [@name='igcaticons_spacerstype'][@value='image']
category_icons-links-panels.js:2TypeError: Result of expression ‘jQuery(”div#slider1″).codaSlider’ [undefined] is not a function.

just comment this line (it should be line number 547) :

wp_enqueue_script('caticons-links-panel', '/wp-content/plugins/category-icons/js/category_icons-links-panels.js');

Category Icons patch for WordPress 2.8

Update 2 : the patch is not needed anymore as there is a new version of category icons (2.1) that is compatible with WordPress 2.8+. Download it to resolve the issue.

Update 1 : here is the detailed procedure (thanks to ycs for the tip) :

  1. deactivate the plugin,
  2. log out of the admin control panel,
  3. replace the old category_icons-panel.js in the js folder by this one,
  4. clear your browser cache,
  5. close all open browser windows,
  6. open a browser, log in and reactivate the plugin.

Please leave me a comment if it’s not working.

How to make an horizontal list

Someone asked me how, so here it is. Paste the following code in style.css of your theme :

ul, li {
    display: inline;
}

For example, for the default WordPress theme, it will be :

#sidebar ul, #sidebar ul li {
	display: inline;
}

It’s up to you to find the correct CSS code, as the themes have different stylecheets. My only advice would be to play with FireBug, a FireFox plugin.

How to display a list of the categories with icons

Long time without updates : lot of work and family stuff… But let’s come back to the list. 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;
}

See a demo here : http://www.trupela.com/2009/11/16/a-post-is-a-category-is-a-story/

Icons for this blog

As you can see, I don’t have icons for my categories. I’ve been searching around for icons, but unfortunatly, I couldn’t find ones corresponding to my categories.

So I’m searching for a volunteer who would create icons for my categories :

Documentation, How to, FAQ, Translations, Changelog, News, Tips & Tricks

If someone wants to help, you’re welcome !