I’ve been using Tumblr for nearly a month and I absolutely love it. My site remains on WordPress, and it will continue to do so, but I wanted to bridge the gap between the two platforms to make the transition easy for my site visitors (dad) and myself. Tonight, I did just that.

Using some extra PHP within a WordPress page template, and some beautiful jQuery (Masonry, courtesy of David Desandro), I created a showcase of excerpts of my 10 latest Tumblr posts. To fit this with the rest of the theme and style of my website, I went beyond just showing a bulleted list in a widget and, instead, put each excerpt into it’s own box.

You can see the demo page right here.

When you’re working with WordPress, you already have a lot of pre-made PHP functions at your disposal – in this case, those for fetching content from an RSS feed. I grabbed the latest 10 posts using my Tumblr’s RSS feed and placed the following PHP in the page template where I wanted it to go:

<div id="tumblr-feed">
	<?php require_once (ABSPATH . WPINC . '/feed.php');
	$rss = @fetch_feed('http://feeds.feedburner.com/jennschifferontumblr');
 
	if (!is_wp_error( $rss ) ) :
		$maxitems = $rss->get_item_quantity(10);
		$rss_items = $rss->get_items(0, $maxitems);
	endif;
 
	if ($maxitems == 0) echo '<div class="tumblr-post">Nothing to see here, folks.  Go to <a href="http://pancaketheorem.com" target="_blank">pancaketheorem.com for the fun stuff.</div>';
	else
	foreach ( $rss_items as $item ) : ?>
		<div class="tumblr-post">
			<p><?php echo string_limit_words($item->get_description(), 25); ?>
		[<a href='<?php echo wp_filter_kses($item->get_link()); ?>'>read more...]</a></p>
		</div>
	<?php endforeach; ?>
 
   <?php } ?>
 
</div>

tumblr-feed is the container that holds all the tumblr-post boxes. You need the container for using the Masonry function later on.

Within the tumblr-post div, I’m echoing the description of the post (the post content). I don’t want the entire entry to show, though, so I created a function called string_limit_words that takes a string and your maximum word count and outputs an excerpt of your post. To use that function, though, you need to add it to your functions.php file within your WordPress template:

function string_limit_words($string, $word_limit)
{
  $words = explode(' ', $string, ($word_limit + 1));
  if(count($words) > $word_limit)
  array_pop($words);
  return implode(' ', $words);
}

So that will display your content. Of course, you need to add some CSS to make your tumblr-post boxes look fabulous and float. I also made sure – and this is important – that the maximum width of any images or embeded objects are the same size or smaller than the tumblr-post box width. The rest of my CSS is just for styling the header and paragraphs.

.tumblr-post { width: 270px; padding: 5px 15px; float: left; margin: 10px;}
.tumblr-post img, object, embed { max-width: 270px;}
.tumblr-post h3 { font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: bold;}
.tumblr-post p { padding: 2px 0; margin:0;}

Now, to make your boxes float nicely, without any vertical gaps, download Masonry, load the script in your template, and then add this snippet of code to your template’s Javascript – be it external or internal:

$('#tumblr-feed').masonry({
    singleMode: true,
    itemSelector: '.tumblr-post'
});

This is why you need the tumblr-feed container – so that the Masonry function knows where to look for the boxes that it’s laying out.

I apologize for not getting deeper into explaining all of the code, this was just something I threw together late this evening, after spending the entire day getting my freaking iPhone 4 activated. My point in all this is that it’s really easy to integrate content from two completely different platforms, thanks to RSS and PHP. If you have questions, you can comment here or email me or whateva.

6 notes • leave another