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');

<pre><code>// 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-&gt;get_item_quantity(5);

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

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

    return ( $cut ? substr( $str, 0, $len ) : substr( $str, 0, strrpos( substr( $str, 0, $len ), ' ' ) ) ) . '...';
}
?&gt;
</code></pre>

<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">

<pre><code>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
    });
});
&lt;/script&gt;
</code></pre>

Last updated on 5th September 2018