Category Specific Feed Lists in WordPress

On larger WordPress blogs, it make sense to offer category specific news feeds so that users can subscribe to just the topics that they are interested in. There are already a couple of solutions out there that can help achieve this using either plugins or making use of wp_list_categories. However, I wasn’t happy with either option. Installing a plugin to create a single page seems like overkill to me whilst the wp_list_categories approach has its own problems.

The Problems

1. wp_list_categories will always output a link to the categories themselves. On a page that was supposed to just list news feeds, I felt that could create confusion.
2. It’s difficult to style the RSS links to use icons via CSS — which is useful if you want to create rollover effects.
3. wp_list_categories used with the feed and/or feed_image parameters outputs the two links with only whites pace separating them. That can cause problems for some user agents.
4. Even if you make use of both feed and feed_image to provide a text alternative if images are disabled or not accessible, you can only specify a single string for the feed attribute which means that all of the RSS links have identical text. Not good for accessibility or Search Engine Optimisation (SEO).

The Code

I needed a way to simply grab all of the data relating to top level categories and then use it to fashion the links in the manner that I wanted. This is what I came up with:

<ul class="rss-feeds">
<?php
$myitem ='';
$mycats=  get_categories(); 
foreach($mycats as $mycat) {
	$myitem = '<li><a title="Subscribe to the '.$mycat->name.' news feed" href="'.get_bloginfo('url').'/category/'.$mycat->category_nicename.'/feed/">'.$mycat->name.'</a></li>';
	echo $myitem;
}
?>
</ul>

I then dropped the code into a specific page template (and, no, it shouldn’t be inside The Loop), created a new page called “News Feeds” using this template which resulted in the following:

Styling The List

Now to add some icons via CSS.

I created two 16px x 16px rss icons in different colours to represent the ‘on’ and ‘off’ states and dropped them into the images directory of the theme. I then added the following CSS:

.rss-feeds {
	margin:20px 0 0;
	padding:0;
}
.rss-feeds li {
	list-style:none;
	list-style-image:none;
}
.rss-feeds li a {
	padding-left:25px;
	background:url(images/tiny-rss.png) no-repeat top left;
}
.rss-feeds li a:hover,.rss-feeds li a:active,.rss-feeds li a:focus {
	background:url(images/tiny-rss-on.png) no-repeat top left;
}

The End Result

A nicely formatted list of RSS feed links with CSS rollover effects that work with images off or on.