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.

How to use a template tag to display icons with Category Icons Lite

You must have at least v1.0.4. Just copy and paste this code in your template file (index.php, loop.php, etc) :

<?php if (function_exists('get_cat_icon_lite')) echo get_cat_icon_lite();?>

You can also give it the category id. If you want to display the icon for the category id number 3, you’d do that :

<?php echo get_cat_icon_lite(3); ?>

How to get only the icons URL

If you want to get only the icons URL, you need to copy and paste this function in your functions.php file :

function extract_caticonsurl($string,$return_always_array=FALSE) {
	$myarray = array();
	if (preg_match_all('/<img\s+.*?src=[\"\']?([^\"\' >]*)[\"\']?[^>]*>/i', $string, $matches, PREG_SET_ORDER))  {
		foreach ($matches as $match) {
			$myarray[] = $match[1];
		}
	}
	if ($return_always_array === FALSE && count($myarray) == 1 ) $myarray = array_pop($myarray);
	return $myarray;
}

And paste this code where you want to get the URL(s) :

$caticons_url = extract_caticonsurl(get_cat_icon('echo=false'));

The extract_caticonsurl function returns an array if there’re several icons, or a string (the URL) if there is only one.

How to display icons for pages in the sidebar

I’ve written a function that seems to be working. I think I’m going to include it in a future version of my Category Icons plugin. So, you can have page icons the same way you have category icons in the sidebar.

The following code will add icons in front of the title page in the sidebar when you use the Pages widget. You can see that I’ve used a filter named widget_pages_args to add the filter wp_list_pages in order to parse the HTML generated by wp_list_pages. It’s because I want to display icons only in the sidebar and nowhere else.

To use that code : Continue reading

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 !