Gabriel de Kadt

Again, this is for one my current projects: my mate Phil’s digital DJ tips site…

OK – so there’s loads of plugin’s out there that do this kind of thing but I’m not after anything fancy (or bloated), I’m happy to code this into the theme files with a bit of PHP and well – it’s something slightly new to learn …

Primary requirements:

• We want this thing to use the SimplePie feed parser and cacheing system, as already included with a standard WordPress install. This will copy the latest tweets into WordPress and avoid running-off to bother Twitter every time our WP site gets a visit. This will also make the thing more robust as Twitter does occasionally… fail.
• A raw Twitter feed will include your user name at the beginning of each tweet. This unnecessary when the blog and tweets are from the same person/identity/brand so we’ll need to remove that.
• We need the SimplePie cache to expire fairly regularly – not enough to bust Twitter’s balls with extra requests – but enough to keep the tweets fresh
• We may want to trim the tweets (yes even less than 140 characters!) so they fit on one line without having the set an explicit width or css “overflow:hidden;”. [This is a graphic design call here as I like backgrounds fills to match the variable length of text (inline) rather than be fixed-width with trailing whitespace of block level element - makes each tweet look like the unique thing it is.]
• Once this is done it goes into a simple carousel to rotate through the last x tweets.

The code comes in a couple of pieces:

The main engine: get the twitter feed – pack it up and process it.

I put the following into an include file to keep it all wrapped together for easy access. This code mostly based on the excellent WordPress codex article “Function Reference/fetch feed“. The String replace reference came from the classic tizag PHP guide and the shorten to the nearest whole word came from somewhere else

	<?php
	// Get RSS Feed(s)
	include_once(ABSPATH . WPINC . '/feed.php');

	// Get a SimplePie feed object from the specified feed source. CHANGE THE USER ID BELOW!
	$rss = fetch_feed('http://twitter.com/statuses/user_timeline/126881491.rss');
	if (!is_wp_error( $rss ) ) : // Checks that the object is created correctly
	    // Figure out how many total items there are, but limit it to 5.
	    $maxitems = $rss->get_item_quantity(5);

	    // Build an array of all the items, starting with element 0 (first element).
	    $rss_items = $rss->get_items(0, $maxitems);
	endif;

	// shorten string function
	function short_str( $str, $len, $cut = true ) {
	    if ( strlen( $str ) <= $len ) return $str;

	    return ( $cut ? substr( $str, 0, $len ) : substr( $str, 0, strrpos( substr( $str, 0, $len ), ' ' ) ) ) . '...';
	}
	?>

<div id="djt-twitter-feed"><!-- djt classes and ID to be replaced by something that is useful to you -->
	<ul id="djt-tweets" class="jcarousel-skin">
	    <?php if ($maxitems == 0) echo '<li>No tweets!</li>';
	    else
	    // Loop through each feed item and display each item as a hyperlink.
	    foreach ( $rss_items as $item ) : ?>
	    <li class="cfn">
	        <span><a href='<?php echo $item->get_permalink(); //or hardcode link to Twitter homepage ?>'
	        title='<?php echo 'Posted '.$item->get_date('j F Y | g:i a'); ?>'>
	        <?php //get tweets (but remove twitter ID before displaying)
	        	$djt_twitter_tweet = $item->get_title();
	        	$djt_twitter_tweet = str_replace("YourTwitterUsername: ", "", $djt_twitter_tweet) ;
	        	echo short_str( $djt_twitter_tweet , 140, false) //OK - not actually doing any shortening with this line now ;
	        ?></a></span>
	    </li>
	    <?php endforeach; ?>
	</ul>
</div>

Set the cache expiry in functions.php

// Alter expiry lenght on feeds (set in seconds)
add_filter( 'wp_feed_cache_transient_lifetime', create_function('$a', 'return 480;') );

Finally make it pretty with jCarousel

The idea was to have one tweet visible at a time – scrolling/rotating through the list. Grab your copy of jCarousel (it’s much bigger than jCarousel lite but by the time I’d figured out the trouble with my wp_head() it was time to leave well enough alone. To be revisited when there’s some time to optimize.) I’ll not go into the CSS – that’s there online.

	<!-- jCarousel -->
	<script type="text/javascript">

	function mycarousel_initCallback(carousel) { };

	jQuery(document).ready(function() {
	    jQuery('#djt-tweets').jcarousel({
	        auto: 8,
	        wrap: 'last',
	        vertical: false,
	        scroll: 1,
	        animation: 0,
	        initCallback: mycarousel_initCallback
	    });
	});
	</script>