64x64 icon dark hosting
Deploy New Relic now and get $135 off your Tuts+ subscription.
Advertisement

Extending the Default WordPress RSS Feed

by

Sometimes you may need to enhance your online presence and reach a wider audience through submitting your content outside your web site. For example you may want to make your posts available on most popular social network aggregators, or make them available on mobile devices, or publish your audio/video podcasts on digital stores.

In most of these cases, it's necessary to customize the RSS Feed to make it suitable for publishing through adding custom metadata.

In this tutorial we will see how to achieve this goal for two major platforms: Flipboard and the iTunes Store, but the code is easily customizable for other platforms and web services.


Introduction

Flipboard is a social-network aggregation application for Android and iOS devices that periodically takes the content from your website and presents it in a magazine format so that mobile users can read your news through the app installed on their smartphone or tablet. iTunes Store is an online digital media store where you can publish your audio or video podcasts.

The subscription to both the services is free but it is subject to approval, especially in the case of Flipboard that seems to accept only web sites with a substantial number of readers.

They both allow you to publish content through your blog RSS Feed, but this must be compliant with their specifications. Luckily WordPress allows developers to modify the default RSS Feed structure.


Step 1 The Default WordPress RSS Feed Structure

By default, WordPress comes with various feeds. In this tutorial we will use the RSS 2.0 feed available at http://example.com/?feed=rss2 or http://example.com/feed/ if you use permalinks. This feed is a simple XML document structured like this:

As you can see, each <item> element represents a Post and contains several sub-elements, each related to that Post "component". The main are:

  • <title> is the post title
  • <link> is the post permalink
  • <pubDate> is the post publishing date in RFC822 format
  • <dc:creator> is the post author name
  • <dc:category> is a subset of elements, one for each post category
  • <description> is the post excerpt without HTML tags
  • <content:encoded> is the entire post content with HTML tags

Step 2 Customize the RSS Feed for Flipboard

According to Flipboard technical requirements it is possible to enhance the content.

by providing additional semantics within the article markup, adding the ability to specify pull quotes, slideshows, and other design elements

These additional semantics are:

  • Title & Subtitle
  • Pull quotes
  • Image, Video, and Audio Assets
  • Slideshows
  • Geographic information

We can implement these semantics in our RSS Feed through a Plugin. As said, WordPress provide specific Hooks that allow you to modify the default RSS Feed structure:

  • rss2_ns - allows to add new namespaces inside the root XML element;
  • rss2_head - allows to add to add tags in the feed header;
  • the_content_feed - allows to modify the content of each Post displayed in the Feed;
  • rss2_item - allows to add new sub-elements to each <item> (Post) element;

Create a new file called flipboard-feed.php, open it your favourite text editor and paste this plugin header:

Copy the file in your /wp-content/plugins/ directory and activate it from the Plugins admin page.

Title & Subtitle

If you want to add a Title and a Subtitle before the Post Content, you have to add something like:

You could add this also manually to the Post Content, in the text editor, but that is not an optimal solution because these tags will then also be displayed on your web site (unless you don't hide the hgroup element through a CSS style). So, to achieve this automatically and only in the RSS Feed, it is better to use the Post title for the <h1> element and a Custom Field for the <h2> subtitle.

In your edit Post page, add a flipboard_subtitle Custom Field.

Add these lines to our Flipboard RSS Feed plugin:

Now, if you publish the Post and refresh your RSS Feed page source, you will see the hgroup tag before the Post Content.

Pull Quotes

For pull quotes you can use in your Post Content the <blockquote> tag to point out some parts of the text. We can take advantage of the plugin to replace the <blockquote> with the <aside> tag.

Add these lines to our Flipboard RSS Feed plugin:

Reload your RSS Feed page source, you will see the new <aside> tag.

Image

For all of these elements, we will follow another method suggested by Flipboard: instead of putting the semantics directly into the Post Content, we will add a new subset of Media RSS elements to the <item> element.

Media RSS is an RSS extension that enhances the publishing of multimedia files in RSS feeds. Image, video and audio files and their metadata can be included into RSS feeds thanks to its special elements.

In our case we will use the main one of them: <media:content>.

In addition, we also need GeoRSS extension to support Geographic information, so we have to add the correct namespaces to the RSS Feed to make it valid.

Add these lines to our Flipboard RSS Feed plugin:

And the result will be:

Now we want to add into our RSS feed all the images attached to our Posts. We must do something like:

The <media:content> element supports two sub-elements: <media:description> is the caption used for the image and in WordPress is the Title of the Image, while <media:copyright> contains the copyright information or credit for the author of the image.

Now, we will implement this in our WordPress Feed. Write a Post and attach some images to it (note that images must be at least 400px in the smallest dimension):

Publish the Post, then add these lines to our Flipboard RSS Feed plugin:

Reload your RSS Feed page source, you will see a <media:content> element for each attached image.

A brief note on the <media:group> element: it can be used to provide alternate crops and sizes of the same image, for example portrait/landscape versions.

Video

For video files Flipboard suggests to use this code:

Here we have a new sub element: <media:thumbnail>: it simply specifies a preview image for the video. This can be a little tricky since we need a way to create a direct connection between the attached video and its preview image and tell WordPress that the two files are connected. We can proceed this way:

  1. Add a new Post and attach one or more videos/audio to it
  2. In the Media Library page, upload the preview image, take note of the image dimensions and copy the image File URL
  3. In the Media Library find the video, edit it and paste the image URL in the Description field and also add the width and the height of the image, each separated by a pipeline character "|". This is necessary, to set the correct image dimensions.

Now it's time to put the video in our RSS Feed. Add these lines to our Flipboard RSS Feed plugin:

And here is the final result:

Audio

The Fliboard code for audio files is:

As you can see, it is substantially identical to the video one: so to attach the image preview to the audio file, we can use the same method we followed for videos.

So, add these lines in our plugin:

Slideshows

To add all images attached to a Post in a slideshow format we must add a portion of HTML code to the RSS Feed Post content:

Add these lines in our plugin:

And this is the result:

Geographic information

To display geographic information we can use a Custom Field as we did for the hgroup Subtitle.

So, in your Edit Post page, add a flipboard_geo Custom Field and set the value in a format like this: 45.256 -71.92 (a complete list of supported tags is available in the GeoRSS documentation).

Add these lines to our Flipboard RSS Feed plugin:

Submit Your Feed to Flipboard

Once the RSS Feed is ready, you can request Flipboard to include it in their news sources: you have to contact Flipboard staff by email, including your RSS Feed URL, Twitter, Facebook and website details. The staff will review all the info and will let you know in 5 business days.


Step 3 Customize the RSS Feed for Your Podcasts on iTunes

To publish our audio or video podcasts on Apple iTunes, we need to format the RSS Feed according to iTunes technical specs through a new plugin:

Create a new file called itunes-feed.php, open it your favourite text editor and paste this:

Copy the file in your /wp-content/plugins/ directory and activate it in the Plugins admin page.

iTunes Namespace

To add the iTunes namespace and support iTunes specific meta tags, we can use the rss2_ns filter:

iTunes Head Tags

Next step is to add various information that will help iTunes to better categorize your feed in the store and show detailed information about your podcast channel.

We can add all these informations through rss2_head filter:

For the sake of brevity for this tutorial, the example is static. You can modify all the info manually in the plugin source code. If you prefer to make it dynamic, you can create an Option Page to handle all this information (see also: Handling Plugins Options in WordPress 2.8 with register_setting() by Ozh).

iTunes Post Tags

For each Post, iTunes asks to add some additional tags:

We can handle some of this info like this:

  • author: we'll use the Post author
  • subtitle: we'll use the Post's Attachment Title
  • summary: we'll use the Attachment Caption
  • duration: we'll use the Attachment Description
  • keywords: we'll use the Post tags

Write a new post, add a Title, some content and some Tags. Then, attach an audio file to the post.

After the file is uploaded, add other info: Title, Caption and use the Description field to specify the duration.

Add a Featured image to the Post, and finally publish it.

Now, add these lines in our itunes-feed.php plugin:

Finally, publish the Post and reload the RSS Feed page source.


In Conclusion

Though this tutorial covers only two main platforms, thanks to WordPress Hooks it is possible to customize the default RSS Feed and make it suitable for other external Web applications. For each Post you can attach additional information by using new RSS extensions, or you can enhance the Post content by providing additional HTML code to meet the requirements of all the platforms you want to use to publish your content.


References

Advertisement