Cutting Edge Tutorials

If you’re using Wordpress to build a website showcase (or in my case blog showcase), it’s nice to show the recent posts from that website in the showcase.

In this tutorial I’m going to show you how to do this, using the Wordpress Custom Fields feature and SimplePie.

Read more after the jump.

Step 1: Custom Fields

Wordpress allows you to add custom data for your blog posts.  This allows you to use Wordpress for much more than just blogs.  In this case we’re going to use the feature to store the URL for the RSS feed of the website we’re showcasing.

Create a new blog post. In the edit screen towards the bottom of the page you should see an option for “Custom Fields” (you may need to expand this section, by click on the plus icon).

If you’ve used Custom Fields before you’ll get a drop down of field names you’ve previously used, as well as way to add a new one.

We’ll use the name ‘rss_url’ for the key, and for the value enter the URL of the RSS feed you want to include in the post.

All done with Custom Fields.

Step 2: Install SimplePie

SimplePie is a PHP library for the interacting with RSS feeds. It was designed to be simple enough for non-programmers to use, but powerful and extendable for the pros.

Download the latest version of the library from the official website, as of writing, the current version is 1.1.

Upload the file to your server, I took the opportunity to rename the file adding a .php extension. I put the file into a folder called classes in my Wordpress root folder. This is usually the root of your website, but if you’re running Wordpress from a subfolder upload SimplePie there.

Step 3: Access the RSS feed

Now we need to tell Wordpress to access the RSS feed.

To keep thing simple, I decided to just show the posts, but not actually store them in Wordpress. We’re going to modify the single.php file in your theme to use the Custom Field and Simple Pie to access the RSS feed.

<?php
  require('classes/simplepie.inc.php');
  $customFields =  get_post_custom();
  if (!empty($customFields['rss_url'][0])) {
    $feed = new SimplePie();
    $feed->set_feed_url($customFields['rss_url'][0]);
    $feed->init();
    $feed->handle_content_type();
  }
?>

Here we check to see if the rss_url value is set as a custom field, and if it is, we initialize the SimplePie class that will access the RSS feed.

Caching

To avoid having to fetch the RSS feed each time the post is displayed to a visitor, you can make use of SimplePie’s caching. SimplePie will store a copy of the RSS feed on your server for a set time period (default is 20 minutes). This feature is activated by default, but does require that you create a folder called “cache” in your Wordpress home directory which the webserver has write permissions on. How to do this is different from host to host, please check with your host for instructions.

Step 4: Display the feed

Now that we have the item list from the RSS feed we need to display them. Inside the if statement we wrote in Step 3, add the following code. (Complete Listing below).

<?php if ($feed->data) { ?>
  <h3>Recent Posts From This Blog</h3>
  <ul class="recentPosts">
  <?php $items = $feed->get_items(0, 5); ?>
    <?php foreach($items as $item) { ?>
      <li>
        <a href="<?php echo $item->get_permalink(); ?>">
          <?php echo $item->get_title(); ?>
        </a>
      </li>
  <?php } ?>
  </ul>
<?php } ?>

Here we check to see if data was successfully loaded by SimplePie, and then we loop thru the results. The parameters to the get_items function specify where to start in the fetch and how many items to return. In this case we’re asking for the first 5 items.

Step 5: Style the display

Depending on your theme you may not need to change anything here, as your css may contain the necessary styling commands already.

Using CSS we’re able to style the feed items.

The items you’ll want to add styling for if needed are:

ul.recentPosts {}
    ul.recentPosts li {}
      ul.recentPosts li a {}

Mine looks this:

Step 6: You’e done!

Thats is it. From now on when your post detail page is viewed you’ll be able to see a list of the current posts from that site. To see this in action check out the I Heart Blogs website.

<?php
require('classes/simplepie.inc.php');
$customFields =  get_post_custom();
if (!empty($customFields['rss_url'][0])) {
  $feed = new SimplePie();
  $feed->set_feed_url($customFields['rss_url'][0]);
  $feed->init();
  $feed->handle_content_type();
  if ($feed->data) { ?>
    <h3>Recent Posts From This Blog</h3>
    <ul class="recentPosts">
      <?php $items = $feed->get_items(0, 5); ?>
      <?php foreach($items as $item) { ?>
        <li>
          <a href="<?php echo $item->get_permalink(); ?>">
            <?php echo $item->get_title(); ?>
          </a>
        </li>
      <?php } ?>
    </ul>
<?php } ?>
<?php } ?>

Tags: RSS, SimplePie, Wordpress

This entry was posted on Monday, February 18th, 2008 at 9:05 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.