New Snippets Feed & How-To

Avatar of Chris Coyier
Chris Coyier on

There is a new snippets-only feed! This will always remain it’s own separate feed I think, and not be a part of the main feed. Mostly because I hope that the snippets will grow and grow and there will hopefully be a lot of entries and I think that would overwhelm the regular articles feed. Snag it:

Code Snippets Feed

Getting this to work was a bit of a journey, so I thought I’d document it here!

Snippets are WordPress Pages

Each individual snippet page is a WordPress page. There are a couple reasons for this:

  • I like the hierarchy system of pages: /snippets/css/individual-snippet
  • I can create dynamic navigation from the hierarchy
  • Pages aren’t part of the RSS feed by default

So I like that the pages aren’t a part of the main RSS feed, but I also wanted to create an RSS feed just for them. When I began, I had no idea how I was going to do this.

Custom Feeds

You may have noticed just this week I updated how the video screencasts feed works too. For both that and this new snippets feed, I’m using a technique totally new to me that Jeff Starr posted over on Digging Into WordPress: Easy Custom Feeds.

WordPress makes it easy to create custom page templates. Literally just start a file like this in your theme:

<?php 
/* 
Template Name: RSS Snippets
*/
?>

After that, you can pretty much do whatever you want here. Typically you run a loop and output the title content of the page and all that jazz, but you don’t have to. In this case, we are going to do something much different. We are going to create a valid RSS feed. But first a little prep.

The Problem / The Plan

The goal here is to craft a feed that is composed only of individual snippets arranged by date, most recent first. The problem is that there is no great out-of-the-box WordPress query to get that done. We can query_posts for pages, that’s not problem. We can even query_posts for children of a specific page, which will be helpful. The problem is that we can only go one level deep with that.

$args = array(
	'showposts' => 5,
	'post_type'  => 'page',
	'post_status' => 'publish',
	'post_parent' => '3222',   // snippets page ID
);

$posts = query_posts($args);

Running a query like that will only return the category pages of the snippets, which isn’t very helpful, we need to go one level deeper than that and get the children of the children, while excluding that middle level. NOTE: I’m not going to include the entire RSS feed template here, just because it’s big and long and you can get it from here anyway.

First, I experimented with trying to pass an Array in for the post_parent, and give it each of the ID’s of the category pages. That doesn’t work as that is an invalid parameter for query_posts. So the plan then becomes we are going to need to create individual feeds for each individual category. We’ll give the post_parent parameter the ID value of a category instead of the snippets page itself.

$args = array(
	'showposts' => 5,
	'post_type'  => 'page',
	'post_status' => 'publish',
	'post_parent' => '3247'   // individual snippet category
);

But… there are seven different categories of snippets. Hard coding these values into this page template would be kinda dumb. That would mean I’d have to create seven different page templates with only one tiny trivial difference. That’s never a good thing. Instead, let’s create one template, only pass in the value of that category page via a custom field:

the_post();

$id = get_post_meta($post->ID, 'parent_page_feed_id', true);

$args = array(
	'showposts' => 5,
	'post_type'  => 'page',
	'post_status' => 'publish',
	'post_parent' => $id,
);

Now we can publish new pages for each category feed very easily:

Stitching Them Together

Now there are seven RSS feeds for each of the snippets. That’s cool, but not the ultimate goal of just having a snippets feed. They need to get stiched together and sorted by time of publication. That kind of thing is super easy to do in Yahoo Pipes.

Burn it

There are other feed stitching services available, but one of the major reasons for going with Yahoo is that I trust it will be around for some time and be reliable. (I’m not saying the other services are unreliable, per say, it’s just one of those things…). I could just give out the Pipes RSS feed, but:

  1. It’s not a very clean URL
  2. I wouldn’t get any statistics
  3. If Yahoo Pipes goes under I’m hosed

So, as usual, I burned the feed. This results in the nice URL (http://feeds.feedburner.com/CSS-TricksSnippets/), gives me statistics, and if Yahoo Pipes were to go under or have problems, I can just redirect the source of the feed to a different feed stitcher. And if FeedBurner goes under? God save us all.