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'); 

How to display category icons in the sidebar

To display the icons in the sidebar, you have 2 solutions :

1. Use the widget
Go to Appearance > Widgets and drag Category Icons Widget to the right. You can have multiple Category Icons widgets.

Category Icons Widget

Category Icons Widget

Category Icons Widget Settings

Category Icons Widget Settings

Here is a good & complete spanish tutorial.

2. Manually

In the sidebar.php page of your WordPress theme, you must use the put_cat_icons function.

UA:F [1.6.2_892]

What’s new in 2.0.7 ?

This is a recommended update !
  • Compatibility with My Category Order added.
  • I’ve added some links to Category Icons’s blog.
  • You can now sort a column of the category icons table by clicking its header. If you want to come back to the initial sort state, refresh the page.
  • The widget is now embedded in category-icons.php. The file category-icons_widget.php is not needed anymore, so you just have to activate only the plugin itself (the widget is automatically activated when you activate the plugin).
  • The check for the field priority is removed. May be it will avoid some issues with MySQL… 
  • The “Template Code” tab is renamed “Template Tags”…
Update :
  • Italian language updated by Gianni. Thank you Gianni !!!
  • Turkish language added by Selim Basak.

How to remove the border around icons

Sometimes, you don’t want to have a border around the icons. Try one of these solutions :

1. In the posts

In your template file, put the following code if you want no link and no border (most of the time, just ‘link=false’ do the trick) :

get_cat_icon('class=myicons&link=false');

with this added in your style.css file :

.myicons {
 border: 0px;
 border-style:none;
}

2. In the sidebar

Use the put_cat_icons() function. Example :

put_cat_icons(wp_list_categories('echo=0'),'class=myicons');

But you can also use the widget as an alternative, which is easier, but don’t forget to activate it. You’ll need to enter the following parameters in put_cat_icons() field :

class=myicons

with this in your style.css :

.myicons {
border: 0px;
}

3. Use the border parameter

Important ! If you use the border parameter, your page will not be valid XHTML Strict.

In your pages and posts :

get_cat_icon('border=false');

In the sidebar :

put_cat_icons(wp_list_categories(’echo=0′),’border=false’);

In the widget parameters:

border=false