How to hack Category Icons Lite in order to use CSS sprites images

The “Hack” word is a bit too strong, I know… 🙂 Here is how to do that. You’ll need Category Icons Lite 1.2 at least.

1. The sprites sheet

I used CSS Sprite Generator to generate the sprite sheet and the CSS rules, but you can use another if you want.

Nothing difficult. Just make sure your icons are the same size for a nice looking result (32×32 pixels, for example) and then compress your icons in a zip file. Upload it and apply the settings :

CSS Sprite Generator

CSS Sprite Generator

You should have something like this :

The result

The result

Click on Download Sprite Image and copy the CSS Rules.

2. The theme

I choose to create a child theme of the default WordPress theme, so I created a directory twentyelevelen-caticons in wp-content/themes.

a. The image

In the new child theme, create a directory : images. Copy the downloaded image into it.

b. The CSS

Create a new file : style.css at the root of the child theme. Now, edit it and copy/paste this CSS at the beginning :


/*
Theme Name: Twenty Eleven Caticons
Theme URI: http://machkouri.net/caticons/
Description: Child theme for the Twenty Eleven theme
Author: Brahim Machkouri
Author URI: http://machkouri.net/caticons/
Template: twentyeleven
Version: 1.0
*/

@import url("../twentyeleven/style.css");
li.cat-item { padding-bottom: 16px; }
li.cat-item > a > span.caticons { padding-top: 16px; }

And add the rule to reference the sprite image and the other generated rules :

.caticons {
    background: url("images/csg-5034aff8ed9b2.png") no-repeat  no-repeat scroll 0 0 transparent;
    padding-right: 32px; /* width */
}

.caticons-XboxGreen{ background-position: 0 0; width: 32px; height: 32px; }
.caticons-apple{ background-position: 0 -33px; width: 32px; height: 32px; }
.caticons-copyleft{ background-position: 0 -66px; width: 32px; height: 32px; }
.caticons-firefox{ background-position: 0 -99px; width: 32px; height: 32px; }
.caticons-new-webmin-logo{ background-position: 0 -132px; width: 32px; height: 32px; }
.caticons-opensource{ background-position: 0 -165px; width: 32px; height: 32px; }
.caticons-ubuntu-logo{ background-position: 0 -198px; width: 32px; height: 32px; }
.caticons-wordpress{ background-position: 0 -231px; width: 32px; height: 32px; }
.caticons-xp{ background-position: 0 -264px; width: 32px; height: 32px; }

3. The Code

Now it’s time to add some code to make this work. In the twenty eleven-caticons directory, create a file functions.php in which you’ll paste this code :

<?php
add_filter('caticonslite_array','bm_caticons_icons_array');
add_filter('caticonslite_htmltag','bm_caticons_sprites');
function bm_caticons_icons_array($array) {
  $array=array();
  /*
  // Assign a category to an icon
  $array[$cat_id] = array(  'icon_id' = $i,
		            'url' => $class,
		            'slug' => $cat_slug,
		            'name' => $cat_name
		         );
  */

    $array[7] = array( 'icon_id' => 1,
                       'url' => 'caticons-XboxGreen',
                       'slug' => 'linux',
                       'name' => 'Linux'
                     );

    $array[13] = array( 'icon_id' => 2,
                        'url' => 'caticons-apple',
                        'slug' => 'scripting',
                        'name' => 'Scripting'
                      );

    $array[1] = array( 'icon_id' => 3,
                       'url' => 'caticons-copyleft',
                       'slug' => 'uncategorized',
                       'name' => 'Uncategorized'
                     );

    $array[6] = array( 'icon_id' => 4,
                       'url' => 'caticons-firefox',
                       'slug' => 'video-games',
                       'name' => 'Video Games'
                     );

    $array[8] = array( 'icon_id' => 5,
                       'url' => 'caticons-new-webmin-logo',
                       'slug' => 'gtaiv',
                       'name' => 'GTA IV'
                     );

    $array[10] = array( 'icon_id' => 6,
                        'url' => 'caticons-opensource',
                        'slug' => 'red-dead-redemption',
                        'name' => 'Red Dead Redemption'
                      );
    return $array;
}
/*
   Displays a span with the class of the generated CSS rules instead of an img
*/
function bm_caticons_sprites($html) {
    $icon = $html;
    if (!empty($html)) {
        $class = url_extractor($html);
        if (!empty($class)) {
            $icon = "<span class=\"caticons $class\">&nbsp;</span>";
        }
    }
    return $icon;
}
/*
   Extracts the url (it is not a real url : it is the class of the generated CSS rule)
*/
function url_extractor($string) {
    $src = '';
	$pattern = '/src="([^"]*)"/i';
	preg_match($pattern, $string, $matches);
	if (isset($matches[1]) AND !empty($matches[1])) {
    	$src = $matches[1];
    	$src = str_ireplace('http://', '', $src);
	}
	return $src;
}

In the code above, the key of $array is the category id. The value of $array is an array which contains the properties of the icons and the categories :

  • icon_id = id of the icon
  • url = generated class of the icon
  • slug = category slug
  • name = category name

Of course, a tool to generate this array can be written, but that’s not the purpose of this tutorial. (But with a donation, I can write you this tool 😉 )

Make sure the plugin settings are set like this to see the result :

Category Icons Lite Settings

Category Icons Lite Settings

Screenshot a post title :

Post Sprite

Post Sprite

Screenshot of the categories widget :

Widget Sprite

Widget Sprite

Don’t blame me if the icons don’t “reflect” the categories, it’s normal : I did with the icons I add, voila.

What is Category Icons ?

I agree with Ryan Caldwell (performancing.com) :

So the first step in my adventure was to prettify [my pages] a bit. To do this, I downloaded the Category Icons plugin for WordPress. Category Icons allows you to associate a unique image with each of your WordPress categories. By placing a little snippet of code on your category.php theme file, you can then have a big, bold image come up that will make your category pages look better than 90% of the category pages out there.

Or with  JTPratt when he wrote :

It’s a beautiful plugin […] well documented and supported. Everything is configurable from the options menu, you can use it on your index (home) page, post pages, or even your sidebar! You can do icons only, or text and icons, and it comes with a widget for the sidebar.

The cool thing about the plugin is that it gives you ways to do one or multiple category icons, but also a method for putting icons with your categories in the side bar as well ! I’m always very grateful when a good plugin come along !

😀

Sources : JTPRATT’s Blogging Mistakes ( here & here ) & Performancing

What’s new in 1.8.2 ?

  • New option : size of the space before and/or after the icons in the sidebar.
  • French translation is up to date. Other language than english & french needs to be updated. (thanks in advance to the translators)
  • A widget is included to display icons in the sidebar, if you prefer to use a widget :
caticons_widget.png

How to assign an icon to a category

First :
PUT SAME FOLDER PATH ON THE SERVER WHERE ICONS ARE OR WILL BE IN BOTH FIELDS IN OPTIONS FORM AND IT WILL WORK.

In WordPress 2.3.X :

Go to Manage > Category Icons and click on Icons tab.

Manage icons

In WordPress 2.5 :

Go to Settings > Category Icons and click on the Icons tab.

Manage Icons WP 2.5

In WordPress 2.7+ :

Go to Posts > Category Icons and click on the Icons tab.

Icons tab

Icons tab

If you want to delete the icons of a category and its priority, click on the checkbox in front of it, and then click on the button “Delete Icons and Priority”.

In the “Name” column, click on the name of the category to edit or select its icons.

Select Icons WP 2.5

In the dropdown menu icon or Small icon, select an icon among the ones you uploaded in the default folder (wp-content/uploads) or the folder you’ve choosen to upload them. And then click on the button to the right to validate.That’s all.