Blog Design Studio

In the second part of this tutorial we will extend the widget with more options. Let’s start by defining what sort of options we want it to have.

• Show timestamps
• Discover Hyperlinks
• Discover @replies
• Discover avatar
• Followers count

You can download the extended plug-in here.

Step 1: Getting the form ready for the new options

First of all we need to create the new options in the widget. Find the form() function and add the new form fields to it. Copy the code and add it at the end of the HTML.

<p><label for="<?php echo $this->get_field_id('timestamps'); ?>"><?php _e('Show timestamps:'); ?> <input id="<?php echo $this->get_field_id('timestamps'); ?>" name="<?php echo $this->get_field_name('timestamps'); ?>" type="checkbox" <?php if($timestamps!=""){ echo "checked='checked'"; } ?> /></label></p>
<p><label for="<?php echo $this->get_field_id('hyperlinks'); ?>"><?php _e('Discover Hyperlinks:'); ?> <input id="<?php echo $this->get_field_id('hyperlinks'); ?>" name="<?php echo $this->get_field_name('hyperlinks'); ?>" type="checkbox" <?php if($hyperlinks!=""){ echo "checked='checked'"; } ?> /></label></p>
<p><label for="<?php echo $this->get_field_id('replies'); ?>"><?php _e('Discover @replies:'); ?> <input id="<?php echo $this->get_field_id('replies'); ?>" name="<?php echo $this->get_field_name('replies'); ?>" type="checkbox" <?php if($replies!=""){ echo "checked='checked'"; } ?> /></label></p>
<p><label for="<?php echo $this->get_field_id('avatar'); ?>"><?php _e('Discover avatar:'); ?> <input id="<?php echo $this->get_field_id('avatar'); ?>" name="<?php echo $this->get_field_name('avatar'); ?>" type="checkbox" <?php if($avatar!=""){ echo "checked='checked'"; } ?> /></label></p>

These are all check boxes that will turn on/off the options in the widget.

Step 2: Making Sure Your Form is Saving the new options

To make the form save the new options that we added in the html we need to edit the form() and update() functions.

In the form() function add this in the code before the html of the form.

$timestamps = esc_attr($instance['timestamps']);
$replies = esc_attr($instance['replies']);
$hyperlinks = esc_attr($instance['hyperlinks']);
$avatar = esc_attr($instance['avatar']);

In the update function add this code just before return $instance;

$instance['timestamps']=$new_instance['timestamps'];
$instance['replies']=$new_instance['replies'];
$instance['hyperlinks']=$new_instance['hyperlinks'];
$instance['avatar']=$new_instance['avatar'];

Step 3: Creating the set of functions for the options

To make the new options we need to extend the BS_Twitter class by adding the new set of functions. All of the new functions will be added after the widget() function.

function bs_tweeter_hyperlinks($text) {

$text = preg_replace('/\b([a-zA-Z]+:\/\/[\w_.\-]+\.[a-zA-Z]{2,6}[\/\w\-~.?=&%#+$*!]*)\b/i',"<a href=\"$1\" class=\"twitter-link\">$1</a>", $text);

$text = preg_replace('/\b(?<!:\/\/)(www\.[\w_.\-]+\.[a-zA-Z]{2,6}[\/\w\-~.?=&%#+$*!]*)\b/i',"<a href=\"http://$1\" class=\"twitter-link\">$1</a>", $text);

$text = preg_replace("/\b([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})\b/i","<a href=\"mailto://$1\" class=\"twitter-link\">$1</a>", $text);

$text = preg_replace('/([\.|\,|\:|\Ў|\ї|\>|\{|\(]?)#{1}(\w*)([\.|\,|\:|\!|\?|\>|\}|\)]?)\s/i', "$1<a href=\"http://twitter.com/#search?q=$2\" class=\"twitter-link\">#$2</a>$3 ", $text);

return $text;

}

function bs_tweeter_users($text) {

$text = preg_replace('/([\.|\,|\:|\Ў|\ї|\>|\{|\(]?)@{1}(\w*)([\.|\,|\:|\!|\?|\>|\}|\)]?)\s/i', "$1<a href=\"http://twitter.com/$2\" class=\"twitter-user\">@$2</a>$3 ", $text);

$text =  preg_replace('/(^|\s)#(\w+)/', '\1#<a href="http://search.twitter.com/search?q=%23\2">\2</a>', $text);

return $text;

}

function bs_string_remover($tweet, $username) {

$string_length = strlen($username);

$tweet = substr_replace($tweet, '', 0, $string_length+1);

return $tweet;

}

function bs_twitter_followers_counter($username, $cache) {

$cache_file = $cache."/".md5($username);

if (is_file ( $cache_file ) == false) {

$cache_file_time = strtotime ( '1984-01-11 07:15' );

} else {

$cache_file_time = filemtime ( $cache_file );

}

$now = strtotime ( date ( 'Y-m-d H:i:s' ) );

$api_call = $cache_file_time;

$difference = $now - $api_call;

$api_time_seconds = 3600*24;

if ($difference >= $api_time_seconds) {

$api_page = 'http://twitter.com/users/show/' . $username;

$xml = file_get_contents ( $api_page );

$profile = new SimpleXMLElement ( $xml );

$count = $profile->followers_count;

if (is_file ( $cache_file ) == true) {

unlink ( $cache_file );

}

touch ( $cache_file );

file_put_contents ( $cache_file, strval ( $count ) );

return strval ( $count );

} else {

$count = file_get_contents ( $cache_file );

return strval ( $count );

}

}

function bs_relative_time( $timestamp ){

if( !is_numeric( $timestamp ) ){

$timestamp = strtotime( $timestamp );

if( !is_numeric( $timestamp ) ){

return "";

}

}

$difference = time() - $timestamp;

$periods = array( "sec", "min", "hour", "day", "week", "month", "years", "decade" );

$lengths = array( "60","60","24","7","4.35","12","10");

if ($difference > 0) { // this was in the past

$ending = "ago";

}else { // this was in the future

$difference = -$difference;

$ending = "to go";

}

for( $j=0; $difference>=$lengths[$j] and $j < 7; $j++ )

$difference /= $lengths[$j];

$difference = round($difference);

if( $difference != 1 ){

$periods[$j].= "s";

}

$text = "$difference $periods[$j] $ending";

return $text;

}

function bs_cache_avatar($username){

$cache_file =ABSPATH.'wp-content/plugins/bs_twitter/cache/'.md5($username).'.jpg';

if (is_file ( $cache_file ) == false) {

$cache_file_time = strtotime ( '1984-01-11 07:15' );

} else {

$cache_file_time = filemtime ( $cache_file );

}

$now = strtotime ( date ( 'Y-m-d H:i:s' ) );

$api_call = $cache_file_time;

$difference = $now - $api_call;

$api_time_seconds = 3600*24;

if ($difference >= $api_time_seconds) {

$xml = simplexml_load_file("http://twitter.com/users/".$username.".xml");

$ch = curl_init($xml->profile_image_url);

$fp = fopen($cache_file, "w");

curl_setopt($ch, CURLOPT_FILE, $fp);

curl_setopt($ch, CURLOPT_HEADER, 0);

curl_exec($ch);

curl_close($ch);

fclose($fp);

}

return get_bloginfo('url').'/wp-content/plugins/bs_twitter/cache/'.md5($username).'.jpg';

}

Let’s take a look at the functions one by one.

• bs_tweeter_hyperlinks – will discover the hyperlinks in the content of the tweet and add the link to it.
• bs_tweeter_users – will discover the users in the tweet content and add the link to the users profile on twitter.
• bs_string_remover – will remove the users from the content when needed.
• bs_twitter_followers_counter – is a function that will display the followers number also cache it so we don’t send requests to the twitter api every time we refresh the page on the front end
• bs_relative_time – shows the tweet time in relative time.
• bs_cache_avatar – displays your avatar before every tweet and also stores the image locally on your site.

Step 4: Displaying the new set of functionalities on the front end

In the widget function we need to change the code so we can display the new set of options that we created. To do this we will change the function completely. Just copy and paste the new widget function over the existing one.

function widget($args, $instance) {

extract($args);

$title = apply_filters('widget_title', $instance['title']);

if ( empty($title) ) $title = false;

$twitter_username = trim($instance['twitter_username']);

$number = absint( $instance['number'] );

$timestamps = esc_attr($instance['timestamps']);

$replies = esc_attr($instance['replies']);

$hyperlinks = esc_attr($instance['hyperlinks']);

$avatar = esc_attr($instance['avatar']);

$cache_path = ABSPATH.'wp-content/plugins/bs_twitter/cache';

if($title){

echo $before_title;

echo $title;

echo ' - <small>'.$this->bs_twitter_followers_counter($twitter_username, $cache_path)." Followers</small>";

echo $after_title;

}

echo $before_widget;

if (class_exists('SimplePie')) {

$feed = new SimplePie();

$feed->set_feed_url('http://www.twitter.com/statuses/user_timeline/'.$twitter_username.'.rss');

$feed->set_cache_location($cache_path);

$feed->enable_cache(true); //disable caching

$feed->set_cache_duration(1800); //The number of seconds to cache for. 60 is 1 minute, 600 is 10 minutes, 900 is 15 minutes, 1800 is 30 minutes.

$feed->set_timeout(50);

$success = $feed->init();

$feed->handle_content_type();

if ($success):

echo "<ul class='bs_twitter_feed'>";

foreach ($feed->get_items(0, $number) as $item):

if ($item) {

?>

<li>

<?php

$content = $this->bs_string_remover($item->get_title(), $twitter_username);

if($hyperlinks!=""){

$content=$this->bs_tweeter_hyperlinks($content);

}

if($replies!=""){

$content=$this->bs_tweeter_users($content);

}

if($avatar !=""){

echo '<div><a href="'.$item->get_permalink().'"><img src="'.$this->bs_cache_avatar($twitter_username).'" /></a></div>';

}

echo $content;

if($timestamps!=""){

echo '<span><abbr title="'.$item->get_date().'">'.$this->bs_relative_time(strtotime($item->get_date())).'</abbr></span>';

}

?>

</li>

<?php

} // end if there is an item

endforeach;

echo "</ul>";

if($twitter_username !=""){

echo "<a class='follow' href='http://twitter.com/".$twitter_username."'>More ...</a>";

}

endif; //success

}

echo $after_widget;

}

That’s it! You can take a look at the new code and if you have any questions feel free to comment bellow.

There are a lot of Twitter widgets for WordPress but in my experience none of those utilize the powerful SimplePie PHP class that is in the WordPress core. SimplePie is a powerful RSS reader class that has very nice built-in caching system since as we all know the Twitter API is limited to only 150 requests per hour creating problems with high traffic websites.

You can download the plug-in here.

Step 1: Getting the plug-in ready

Create a folder and name it bs_twitter. In that folder, create a PHP file and name it the same as the folder i.e. bs_twitter. Also, in the bs_twitter folder create a folder and name it cache. This will be the main plug-in file. Now, include the SimplePie class and add the activation/deactivation hooks for the plug-in.

register_activation_hook(__FILE__, 'bs_twitter_activate');
register_deactivation_hook(__FILE__, 'bs_twitter_deactivate');
if ( file_exists(ABSPATH . WPINC . '/class-feed.php') ) {
	@require_once (ABSPATH . WPINC . '/class-feed.php');
}
function bs_twitter_activate () {
}
function bs_twitter_deactivate () {
}

Step 2: Have the widget code prepared

Starting from WordPress 2.8, creating a widget has become easier with the widget API. This code needs to be pasted to the widgets.php file:

• BS_Twitter is both the name of the class, as well as the name of the first function (the constructor). The constructor contains the code needed to setup the widget – it’s called Twitter Posts.

• form() generates the form that you see in the widget management page in WordPress.

• update() updates the options you enter in the form when the widget configuration is saved.

• widget() displays the actual output of the widget in the main site.

• The last part of the code hooks into WordPress’ widget initialization and instructs it to register your widget

class BS_Twitter extends WP_Widget {
	function BS_Twitter() {
		$widget_ops = array( 'classname' => 'twitter_widget', 'description' => 'Show your latest Tweets' );
				$this->WP_Widget( 'twitter_widget', 'Twitter Posts', $widget_ops);
	}
	function form($instance) {
	}
	function update($new_instance, $old_instance) {
	}
	function widget($args, $instance) {
	}
}
add_action( 'widgets_init', 'bs_load_widgets' );
function bs_load_widgets() {
	register_widget('BS_Twitter');
}

Step 3: Creating the form

First thing that needs to be done even before you create the form for a widget, you must determine the type of inputs you need. For this specific widget, 3 inputs are needed: title for the widget, Twitter username, and number of tweets to be displayed. If you look at the basic code above, in the form() function you will find a parameter $instance. This basically contains the current values for all inputs in the form (for example, when you save the form with certain values). Therefore, it is needed to pull out the current values of the widgdet and populate the widget input fields with them.

$instance = wp_parse_args( (array) $instance, array('title' => 'Twitter', 'number' => 5, 'twitter_username' => 'abuzz') );
$title = esc_attr($instance['title']);
$twitter_username = $instance['twitter_username'];
$number = absint($instance['number']);
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"> Title: </label>
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('twitter_username'); ?>"> Twitter username: </label>
<input id="<?php echo $this->get_field_id('twitter_username'); ?>" name="<?php echo $this->get_field_name('twitter_username'); ?>" type="text" value="<?php echo $twitter_username; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('number'); ?>"> Number of twits: </label>
<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" />
</p>
<?php

Maybe this seems as heavy code, but it actually is very simple. It creates a HTML form containing several changes. Instead of using id’s and name’s, you have to use get_field_id(). This needs to be done because if there are multiple instances of a widget and only one single ID, there will be errors. WordPress takes care of it for you if you use the said function. The other thing is that the value of the input fields is generated using PHP.

Step 4: Making Sure Your Form is Saved

To make sure your form updates, you need to configure your update() function. This is very simple. By default, WordPress gives 2 parameters – the old instance, and the new instance. We basically don’t really need the old instance because the old instance is only used if there are values that you may not want to change. Paste in this code into the update() function:

$instance=$old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['twitter_username']=$new_instance['twitter_username'];
$instance['number']=$new_instance['number'];
return $instance;

Step 5: Output the Widget HTML

This is the final step, and it makes sure you widget displays HTML on the front end. Now that we have the user inputs set up, we can just use the inputs to communicate with the Twitter API and display tweets. The first step in the widget() function is to get the values of the user inputs. Copy and paste this code:

extract($args);
$title = apply_filters('widget_title', $instance['title']);
if ( empty($title) ) $title = false;
$twitter_username = $instance['twitter_username'];
$number = absint( $instance['number'] );
if ( empty($twitter_username) ) return;

Once this is done, paste this code:

if($title){
echo $before_title;
echo $title;
echo $after_title;
}
echo $before_widget;
if (class_exists('SimplePie')) {
$feed = new SimplePie();
$feed->set_feed_url('http://www.twitter.com/statuses/user_timeline/'.$twitter_username.'.rss');
$feed->set_cache_location(ABSPATH.'wp-content/plugins/bs_twitter/cache');
$feed->enable_cache(true); //disable caching
$feed->set_cache_duration(1800); //The number of seconds to cache for. 60 is 1 minute, 600 is 10 minutes, 900 is 15 minutes, 1800 is 30 minutes.
$feed->set_timeout(50);
$success = $feed->init();
$feed->handle_content_type();
if ($success):
echo "<ul>";
foreach ($feed->get_items(0, $number) as $item):
if ($item) {
?>
<li>
<a href="<?php echo $item->get_permalink(); ?>">
<?php echo $item->get_title() ?>
</a>
</li>
<?php
} // end if there is an item
endforeach;
echo "</ul>";
endif; //success
}
echo $after_widget;

This is a great plug-in for those who have high-traffic websites. This tutorial makes it easier to create customized Twitter widget. Options can be added and change to suite your needs.

This is just the first tutorial of the series that is coming up in the next period. We will explain how to customize this widget and adding more features such as adding the user avatar, discovering hyperlinks and hashtags and much more.