Import Feed, Display in Multiple Columns

Recently I worked on a project where a single RSS feed was imported and displayed in multiple columns on the web page. Certain pages display feed items in two columns, others in groups of three or more. This technique uses WordPress’ built-in fetch_feed functionality to parse external feeds, and a slice of PHP magic to display them in multiple columns. It’s flexible too, enabling any number of columns and feed items from anywhere in your theme/template files.

For example, you could display any of the following:

• 10 feed items split into two columns of five
• 30 feed items split into three columns of 10
• 30 feed items split into five columns of six

Notice the pattern? The key to showing the same number of posts in each column is to set the total number of feed items as a multiple of the total number of columns. Before explaining how that works, let’s back up a bit and get fetch_feed() set up..

Setting up fetch_feed()

To display feeds in multiple columns, use WordPress’ fetch_feed function, set up like this anywhere in your theme template files:

<?php include_once(ABSPATH . WPINC . '/feed.php');
if(function_exists('fetch_feed')) {
	$feed = fetch_feed('http://example.com/feed/'); // feed URL
	if (!is_wp_error($feed)) : $feed->init();
		$feed->set_output_encoding('UTF-8');	// set encoding
		$feed->handle_content_type();		// ensure encoding
		$feed->set_cache_duration(21600);	// six hours in seconds
		$limit = $feed->get_item_quantity(10);	// get 10 feed items
		$items = $feed->get_items(0, $limit);	// set array
	endif;
} ?>

There are three things to configure:

• feed URL – replace http://example.com/feed/ with the feed URL
• cache duration – change if needed, default is six hours (in seconds)
• number of feed items – should be some multiple of the number of columns

So for example, getting 10 feed items would enable us to display 1, 2, 5, or 10 columns, with the same number of feed items in each column. So, to display a feed evenly across three columns, some multiple of three is required for the number of feed items. So that would be 3, 6, 9, 12, and so on – basically any number divisible three.

Read more about the other fetch_feed variables at the WordPress Codex.

Setting up array_slice()

Once fetch_feed() is set up, we have an array of $items containing our feed content. To display the items in multiple columns, we use PHP’s incredibly useful array_slice function, which enables us to extract slices of the feed array. The array_slice function accepts three basic parameters, the input array, offset, and length:

array_slice($array, $offset, $length);

Using the $items array generated from the fetch_feed() function, we calculate the other two array_slice variables depending on the total number of columns and feed items. So for the sake of simplicity, let’s say we want to display two columns each with five feed items. The PHP would look something like this:

// display first five feed items
$blocks = array_slice($items, 0, 5); // grab first five items from the array
foreach ($blocks as $block) {
	echo $block->get_title();
	echo $block->get_description();
}

// display next five feed items
$blocks = array_slice($items, 5, 10); // grab next five items from the array
foreach ($blocks as $block) {
	echo $block->get_title();
	echo $block->get_description();
}

Likewise, to display 30 feed items in three columns of 10 each, we would create three foreach loops using the following array_slice values:

$blocks = array_slice($items, 0, 10); // first column
$blocks = array_slice($items, 10, 20); // second column
$blocks = array_slice($items, 20, 30); // third column

As you can see, the key to displaying external feeds in multiple columns is configuring array_slice with the correct $offset and $length parameter values. Once you’ve got that dialed in, you’re ready to put it all together and make it happen.

Displaying feed items

Notice in the previous section that we use the following to display feed items in each column:

echo $block->get_title();
echo $block->get_description();

That’ll display the title and description for each feed item, but you can do much more than that. Here is a more elaborate example showing how different feed items may be included in the markup:

<div class="feed-item">
	<h1><a href="<?php echo $block->get_permalink(); ?>"><?php echo $block->get_title(); ?></a></h1>
	<p>
		<?php echo $block->get_date("l, F jS, Y"); ?>
		<?php echo substr($block->get_description(), 0, 200); // limit to 200 characters ?> 
		<a href="<?php echo $block->get_permalink(); ?>">Continue reading</a>
	</p>
</div>

For each feed item in the loop, this snippet displays the following:

• Title of the feed item, linked to the post URL
• Content of the feed item, truncated to 200 characters
• A “Continue reading” link, linked to the post URL
• Each feed item is wrapped with <div class="feed-item">

There is much more available for customizing your imported feeds, see the SimplePie documentation and more specifically the item-level data methods for all the details.

Putting it all together

Here is the final code for displaying external feed content in multiple columns:

<?php include_once(ABSPATH . WPINC . '/feed.php');
if(function_exists('fetch_feed')) {
	$feed = fetch_feed('http://example.com/feed/');
	if (!is_wp_error($feed)) : $feed->init();
		$feed->set_output_encoding('UTF-8');	// set encoding
		$feed->handle_content_type();		// ensure encoding
		$feed->set_cache_duration(21600);	// six hours in seconds
		$limit = $feed->get_item_quantity(10);	// get 10 feed items
		$items = $feed->get_items(0, $limit);	// set array
	endif;
}

if ($limit == 0) { 
	echo '<p>RSS Feed currently unavailable.</p>'; 
} else {
	// display first five feed items
	$blocks = array_slice($items, 0, 5);
	foreach ($blocks as $block) { ?>
		<div class="feed-item column-one">
			<h1><a href="<?php echo $block->get_permalink(); ?>"><?php echo $block->get_title(); ?></a></h1>
			<p>
				<?php echo $block->get_date("l, F jS, Y"); ?>
				<?php echo substr($block->get_description(), 0, 200); ?> 
				<a href="<?php echo $block->get_permalink(); ?>">Continue reading</a>
			</p>
		</div>
	<?php }

	// display next five feed items
	$blocks = array_slice($items, 5, 10);
	foreach ($blocks as $block) { ?>
		<div class="feed-item column-two">
			<h1><a href="<?php echo $block->get_permalink(); ?>"><?php echo $block->get_title(); ?></a></h1>
			<p>
				<?php echo $block->get_date("l, F jS, Y"); ?>
				<?php echo substr($block->get_description(), 0, 200); ?> 
				<a href="<?php echo $block->get_permalink(); ?>">Continue reading</a>
			</p>
		</div>
	<?php }
} ?>

As-is, this code displays two columns of five feed items each. Using the techniques and info presented in this article, it’s possible to configure this code to display any number of feed items in any number of columns. This code works when placed in just about any theme template file that makes sense. Probably best when placed outside of the WordPress post loop.

Note that we also verify the feed is available before trying to display anything. After setting up fetch_feed(), we inject the following PHP logic:

if ($limit == 0) { 
	echo '<p>RSS Feed currently unavailable.</p>'; 
} else {
	// display first five feed items
	// display next five feed items
}

This ensures that no empty markup tags are echoed to the browser if/when the feed is unavailable. It happens, so checking is a good move.

Instant Summary

Using array_slice() together with fetch_feed(), it’s possible to display any number of feed items in any number of columns. This provides much design flexibility for your project.