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.

0 Comment

Featured Designs

Parent Society

Parent Society

Marijuana Maps

Marijuana Maps

Cake Journal

Cake Journal

CopyKat Recipes

CopyKat Recipes

Jessica Denay

Jessica Denay

Keith Ferrazzi

Keith Ferrazzi

Rennaissance Yoga

Rennaissance Yoga

Brink Zone

Brink Zone

Illustrious Author

Illustrious Author

Boca Care

Boca Care

KingsCast

Kingscast

Notecook

Note Cook

My Business Musings

My Business Musings