Grow your CSS skills. Land your dream job.

New Snippets Feed & How-To

Published by Chris Coyier

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.

Comments

  1. Permalink to comment#

    Hmm.. this may come in handy! Thanks, man.

  2. Permalink to comment#

    i wish there was feeds for individual categories…

  3. Permalink to comment#

    wp_list_pages function in wp has the ‘depth’ parameter. Can’t we use the combination of that and the loop to get the job done?

    • Permalink to comment#

      You can’t get the content wp_list_pages, only the titles.

      And you can’t get the depth with query_posts.

      Double Whammy.

  4. Hm, i hope that the quality of the posted snippets doesn’t remain that low. When I look at some recent snippets, I see almost nothing else than native php-function descriptions e.g. “how to convert a string to an array” (explode). I don’t think that this is very userful as everyone developing with php will know stuff like that.

    • TeMc
      Permalink to comment#

      in that case, David, Submit one here! :D


      TeMc

    • I’ve submitted 11 snippets so far and don’t want to make Chris poor ;).

    • Permalink to comment#

      David is the current winner of the snippet submitting race. =)

      Sorry if many of them aren’t of use to you, but there is a wide range of complexity and variety and the beginner style ones are definitely of use to many folks. Just because they are beginner-oriented, doesn’t mean they are “low quality”

    • @Chris:
      For me personally the term “snippet” implies that there was some work done to modify / improve existing functions to create a new benefit in any way. When I like to know which php-function is covering which functionality, I would prefer the documentation. Nevertheless, most snippets are very good for beginners and advanced programmers – I’m just afraid that the quality is getting worse.

  5. Permalink to comment#

    has anyone seen my hunting knife?

  6. Permalink to comment#

    no really, have you seen it?

  7. Permalink to comment#

    Something definitely usefull for the future.
    Thanks a bunch :-)

  8. Permalink to comment#

    Subscribed, hopefully I don’t get too overloaded in Google reader. I’m struggling to keep up as it is. :)

  9. Just subscribed to this. But just hope i’ll find the time to follow up.

    Another geek who is overloaded with info from the internet.

  10. Nii
    Permalink to comment#

    Thank you for your posts.

    I just wanted to add, that “per say” should be written “per se”. :)
    (Per se in the wikipedia)

  11. Niall
    Permalink to comment#

    Chris, I haven’t seen an update to the CSS Snippets since the 10th.
    Nothing new, or a problem on my end? I submitted one the day of the snippets launch and thought it was rather good D:

  12. jamie
    Permalink to comment#

    Any idea how to get the author of the post to show up in a feedburner feed? right now it only shows Posted: and the date.

  13. Permalink to comment#

    Chris, this is great! One thing that will make it easier to comment parts/linees of the snippets would be line numbers.

    Also the “add to coda” thingie is annoying to Windows user (there are still some…).

  14. Perfect…I’ll be digging through all the PHP and HTACCESS snippets!

  15. aurel
    Permalink to comment#

    this is amazing idea –

    for the sake of those people that tend to find such topics too late:)
    is there a way of making feeds to get the entries as E.g i subscribed now and it only shows 5 entries for the CSS feed

    however if i look at the snippet page there are alot more – so is there a way to backdate so i can get all the snippets at my rss aplication

    anyway this post and this idea is just perfect thanks for the cool features

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".