2 February 2009 2 Comments

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

Welcome to the final part of our tutorial on how to write your own WordPress Twitter Widget.

Does this all look a little strange? If so, check out part 1 and part 2 of this tutorial!

First, let’s look at the code…

function WordTweet_control() {
 
	// We need to grab any preset options
	$options = get_option("widget_WordTweet");
 
	// No options? No problem! We set them here.
	if (!is_array( $options )) {
		$options = array(
	  	'WordTweetTitle' => 'WordTweet',
	  	'username' => 'Username',
	  	'password' => 'Password',
	  	'tweets' => '1'
		);
	}
 
	// Is the user has set the options and clicked save,
	// Then we grab them using the $_POST function.
	if ($_POST['WordTweet-Submit']) {
		$options['WordTweetTitle'] =
		  htmlspecialchars($_POST['WordTweet-WidgetTitle']);
		$options['username'] =
		  htmlspecialchars($_POST['WordTweet-WidgetUsername']);
		$options['password'] =
		  htmlspecialchars($_POST['WordTweet-WidgetPassword']);
		$options['tweets'] =
		  htmlspecialchars($_POST['WordTweet-WidgetTweets']);
		// And we also update the options in the Wordpress Database
		update_option("widget_WordTweet", $options);
	}
 
	?>
	<p>
		<label for="WordTweet-WidgetTitle">Title:</label><br />
		<input type="text"
		  id="WordTweet-WidgetTitle"
		  name="WordTweet-WidgetTitle"
		  value="<?php echo $options['WordTweetTitle'];?>" />
		<br />
		<label for="WordTweet-WidgetUsername">Username:</label><br />
		<input type="text"
		  id="WordTweet-WidgetUsername"
		  name="WordTweet-WidgetUsername"
		  value="<?php echo $options['username'];?>" />
		<br />
		<label for="WordTweet-WidgetPassword">Password:</label><br />
		<input type="text"
		  id="WordTweet-WidgetPassword"
		  name="WordTweet-WidgetPassword"
		  value="<?php echo $options['password'];?>" />
		<br />
		<label for="WordTweet-WidgetTweets">No. of Tweets:</label><br />
		<input type="text"
		  id="WordTweet-WidgetTweets"
		  name="WordTweet-WidgetTweets"
		  value="<?php echo $options['tweets'];?>" />
		<input type="hidden"
		  id="WordTweet-Submit"
		  name="WordTweet-Submit"
		  value="1" />
	</p>
	<?php
}
 
function WordTweet_init() {
	// These are the Wordpress functions which will register the
	// Widget, and also the control - or options, to you and me.
	register_sidebar_widget('WordTweet', 'widget_WordTweet');
	register_widget_control('WordTweet', 'WordTweet_control');
}
 
add_action("plugins_loaded", "WordTweet_init");

This really should be nothing new, if you followed the tutorial on how to create a WordPress widget. We’re simply setting up the options for the Widgets page of the WordPress admin, and saving the options to the database with our update_option(“widget_WordTweet”, $options); command.

In part two, we added a piece of code to link to an external CSS stylesheet, like so…

// First we grab our CSS stylesheet. It's a really simple one, but it's good practice to
// keep this in a seperate file.
echo'<link href="' . get_bloginfo('url') . '/wp-content/plugins/WordTweet/WordTweet.css" rel="stylesheet" type="text/css" media="screen" />';

So now we just need to take a look at what’s in the stylesheet.

.WordTweet li {
	display:block;
	background-image:url(twitter.png);
	padding-left: 22px;
	background-repeat:no-repeat;
}

By displaying our li elements as a block it get’s rid of the bullet points which are the default. We set a background image to our Twitter ‘t’ (you can grab that in the full sourcecode download), and so we also have to pad the text from the left where this image is by 22px. Finally, we make sure this background isn’t repeated.

That’s it! By saving that file as an external CSS file you can have all kinds of fun with it. You might want to add a border-bottom and create a nice underlined effect. Whatever tickles your fancy.

Finally, some homework. This is a pretty basic implementation, and there are lots of things you can add to spice it up for your own site. Maybe you can try the following, all pretty easy with some basic php:

  • Try writing a script to display “added x hours ago”, like here on the site.
  • Try making the ‘@’ filtering out an option in the Widget settings.
  • Try changing the CSS so the Tweets appear in speech bubbles, or add your own Twitter icon in a corner of the widget

You can download the full sourcecode, CSS and images from http://www.richardshepherd.com/downloads/WordTweet.zip. And as always if you have any questions please just drop me a comment.

2 Responses to “How to write a WordPress Twitter Widget – Part 3 of 3”

  1. Rock Your Web 20 June 2009 at 4:50 am #

    Nice article. Good job.


Trackbacks/Pingbacks.

  1. How to write a WordPress Twitter Widget – Part 2 of 3 | Richard Shepherd - 26. Oct, 2009

    [...] to part 1 | Go to part 3 Spread the [...]

Leave a Reply