How to write a WordPress Twitter Widget – Part 1 of 3

So you may have noticed in the sidebar over there on the right there’s a bunch of my recent Tweets. There are plenty of WordPress Twitter widgets, some better than others, but why not start and write your own? In this three part tutorial we’ll look at putting together the basic code, and then in further episodes we’ll start getting a little more advanced with some jQuery scripting.

First things first, make sure you read and understand the How to Create a WordPress Widget Tutorial, as we’ll be building on that code. In fact, adding in the Twitter code is reasonably straightforward.

Twitter has a API we can use to grab all the details, but our life get easy if we use a prewritten PHP class that does some of the hard work for us. A couple are kicking around out there, but I’m going to work with the lightweight twitterPHP by David Billingham. It doesn’t include all the functionality of the Twitter API, but it’s got everything we need to kick off with.

So, we know how to create a Widget thanks to our earlier tutorial. What we now need to do is:

  1. Start with the usual widget code
  2. Send a call off to Twitter with our username and password
  3. Ask Twitter for a certain number of Tweets
  4. Display these Tweets in our widget
  5. Finish up the widget code
  6. Write the code for the WordPress widget options

And that’s it. So, without further ado, I give you WordTweet – my WordPress Twitter widget!


Our code starts off almost identical to the WordPress widget tutorial:

	  	'username' => 'Username',
	  	'password' => 'Password',
		'tweets' => '1'

	// Display the widget!
	echo $before_widget;
	echo $before_title;
		echo $options['WordTweetTitle'];
	echo $after_title;

You’ll spot a couple of changes. First we include the PHP Twitter class, which we will make sure is in the same directory as the widget.

require_once 'twitter.class.php';

Secondly we have changed our options code a little bit, to take into account the new options we need.

	// If no options have been set, we need to set them
	if (!is_array( $options )) {
		$options = array(
	  	'WordTweetTitle' => 'WordTweet',
	  	'username' => 'Username',
	  	'password' => 'Password',
		'tweets' => '1'

Next up we use the Twitter class to get our Twitter feed:

    // Create a new Twitter object and query for direct messages
    $t = new twitter();
      $t->username = $options['username'];
      $t->password = $options['password'];

    // This is where we grab the string as $result, from the users
    // timeline, with a $count=1 so we only get the most recent
    $result = $t -> userTimeline($id=false, $count = ($options['tweets'] * 4), $since = false);

So, we create an object $t and tell it our username and password which we grabbed from the options a few lines earlier. This is all happening on the server so it’s relatively secure – no one will see this info in our sourcecode.

Okay, then we query Twitter with the following options:

  1. userTimeline – the timeline for the user specified in $options[‘username’]
  2. $id=false – This is optional, and allows us to return the results to the Twitter username or id specified. We don’t use this option, and hence set it to false.
  3. $count = ($options[‘tweets’ * 4) – Stick with me on this on, as the logic is a little convoluted. $count is simply the number of Tweets to grab. Now on my homepage I display the three most recent, so you might ask why we don’t simply put $count = 3. Good question! Well, as we’ll see in the next part of this tutorial I like to remove all my ‘@’ Tweets because they are normally directed at just one persona and so not always suitable for my homepage. However, it’s impossible to know how many ‘@’ Tweets there are in any given query until we’ve actually made the query. Make sense? It might be that my last five Tweets are all good. But it might be that four of them are ‘@’ Tweets and so that would only leave me one to display. So, I grab four times the number of Tweets I want, because I’m pretty sure that if I want to display three Tweets, if I get the last 12 there are probably at least three non ‘@’ Tweets in there. Why four times? Why not! It could be * 5 or * 10 if you wanted. For me, I’m happy that * 4 is enough, although we can also set this as an option if we want.
  4. Finally, we have $since = false. We can put a HTTP formatted date in here and that means we’ll only grab Tweets after that date. For this tutorial we are going to leave that as false, but you might want to introduce a new option to set this to the last day, or the last week.

That’s enough for part one. Make sure you understand what we’ve done here, and also look through the twitter.class.php and make sense of what David Billingham has done.

In part two of this tutorial we’ll cycle through our Tweets and display them in our widget. See you then!

Go to part 2 | Go to part 3

3 thoughts on “How to write a WordPress Twitter Widget – Part 1 of 3”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>