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 create a recent posts widget that displays category icons

As there is no filter in the recent posts widget, its class must be extended to modify it. I’ve just copied/pasted the original widget() function of the WordPress Recent Posts widget and added the lines 34 to 36. Here is the code that you can paste in functions.php of your theme folder :

Class Caticons_Posts_Widget extends WP_Widget_Recent_Posts {

	function widget($args, $instance) {

		$cache = wp_cache_get('widget_recent_posts', 'widget');

		if ( !is_array($cache) )
			$cache = array();

		if ( ! isset( $args['widget_id'] ) )
			$args['widget_id'] = $this->id;

		if ( isset( $cache[ $args['widget_id'] ] ) ) {
			echo $cache[ $args['widget_id'] ];
			return;
		}

		ob_start();
		extract($args);

		$title = apply_filters('widget_title', empty($instance['title']) ? __('Recent Posts') : $instance['title'], $instance, $this->id_base);
		if ( empty( $instance['number'] ) || ! $number = absint( $instance['number'] ) )
 			$number = 10;
 			
		$r = new WP_Query( apply_filters( 'widget_posts_args', array( 'posts_per_page' => $number, 'no_found_rows' => true, 'post_status' => 'publish', 'ignore_sticky_posts' => true ) ) );
		if ($r->have_posts()) :
?>
		<?php echo $before_widget; ?>
		<?php if ( $title ) echo $before_title . $title . $after_title; ?>
		<ul>
		<?php  while ($r->have_posts()) : $r->the_post(); ?>
		<li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>">
		
		<?php if (function_exists('get_cat_icon_lite')) {
		          echo get_cat_icon_lite();
		      }
		if ( get_the_title() ) the_title(); else the_ID(); ?></a></li>
		<?php endwhile; ?>
		</ul>
		<?php echo $after_widget; ?>
<?php
		// Reset the global $the_post as this query will have stomped on it
		wp_reset_postdata();

		endif;

		$cache[$args['widget_id']] = ob_get_flush();
		wp_cache_set('widget_recent_posts', $cache, 'widget');
	}
}

function caticons_posts_widget_register() {
  unregister_widget('WP_Widget_Recent_Posts');
  register_widget('Caticons_Posts_Widget');
}
add_action('widgets_init', 'caticons_posts_widget_register'); 

Make Category Icons Lite work with Easel

To display icons in front of the title with this theme, Easel, go to Category Icons Lite settings to uncheck Posts. Edit the functions.php file in this theme folder to add these lines at end of the file :

add_filter('easel_display_post_title', 'bm_caticonslite');
function bm_caticonslite($entry_title) {
  return get_cat_icon_lite().$entry_title;
}

Then add this to style.css : Continue reading

Make Category Icons Lite work with any Suffusion based theme

With the Suffusion theme, the icons are not displayed in front of the title. So to make this theme compatible, go to Category Icons Lite settings to uncheck Posts. Edit the functions.php file in this theme folder to add this line in the suffusion_theme_setup() function :

add_filter( 'suffusion_get_post_title_and_link', 'bm_caticonslite' );

Then add this function at the end of the file : Continue reading