• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

I recently wrote a tutorial walking you through how to create your own WordPress widget, giving you the freedom to dictate what you want your widget to do by providing you with in-depth information about all the components needed to create a widget (I recommend you familiarise yourself with that tutorial before going through this tutorial).

I now want to expand upon that and walk you through the process of creating your own widget that will display your recent tweets by using Twitter’s profile tool. If at any point you start wondering what I’m doing, refer back to the original guide for a more thorough explanation of the individual components of the code.

The plugin header

Start off by creating a new folder in wp-content/plugins to house your plugin and then create a blank PHP file in that folder where you’ll put your plugin code.

First, you need to put together the plugin header, which sets all of the information about the widget, such as its name, version and description:

<?php
/*
Plugin Name: Dave Recent Tweets
Plugin URI: http://www.doitwithwp.com/
Description: Displays your recent tweets in a sidebar widget
Version: 0.1
Author: Dave Clements
Author URI: http://www.theukedge.com
License: GPL2
*/

/*  Copyright 2011  Dave Clements  (email : http://www.theukedge.com/contact/)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

Once you’ve completed that with your own information, we need to start the widget class and put the constructor together. In the example below, I’ve set my widget class as diww_my_recent_tweets_widget – you need to be sure to use a very unique phrase to avoid conflict with any other plugins. I’ve also input my widget title (Dave Recent Tweets) and a widget description (Displays your recent tweets using the Twitter Profile tool).

// Start class diww_my_recent_tweets_widget //

	class diww_my_recent_tweets_widget extends WP_Widget {

// Constructor //

	function diww_my_recent_tweets_widget() {
		$widget_ops = array( 'classname' => 'diww_my_recent_tweets_widget', 'description' => 'Displays your recent tweets using the Twitter profile tool' ); // Widget Settings
		$control_ops = array( 'id_base' => 'diww_my_recent_tweets_widget' ); // Widget Control Settings
		$this->WP_Widget( 'diww_my_recent_tweets_widget', 'Dave Recent Tweets', $widget_ops, $control_ops ); // Create the widget
	}

The variables

Now we need to put together the variables that we’ll be using. Twitter’s profile widget tool provides you with a whole array of options to customise the appearance of your widget. I’ve included many of them as options in this example, but you can add and remove them as you see fit. I’ve opted to allow the user to set:

  • The widget title
  • The number of tweets to display
  • The twitter user
  • All five color options
  • Whether or not to show hashtags
  • Whether or not to show the timestamp
  • Whether or not to show avatars

I’ve given them all obvious and unique identifiers that we’ll be using in our code. This next section of code pulls the values of the variables from the database for use in the widget. Note that there are two different syntaxes here; one for text inputs and one for boolean (true/false) inputs:

// Extract Args //

		function widget($args, $instance) {
			extract( $args );
			$title 		= apply_filters('widget_title', $instance['title']); // the widget title
			$tweetnumber 	= $instance['tweet_number']; // the number of tweets to show
			$twitterusername 	= $instance['twitter_username']; // the twitter username to poll tweets from
			$shellbg	= $instance['shell_bg']; // Shell background color
			$shellcolor 	= $instance['shell_color']; // Shell text color
			$tweetsbg 	= $instance['tweets_bg']; // Tweets background color
			$tweetscolor 	= $instance['tweets_color']; // Tweets text color
			$tweetslinks 	= $instance['tweets_links']; // Tweets links color
			$hashtags   = isset($instance['hashtags']) ? $instance['hashtags'] : false ; // whether or not to show hashtags
			$timestamp   = isset($instance['timestamp']) ? $instance['timestamp'] : false ; // whether or not to show timestamp
			$avatars   = isset($instance['avatars']) ? $instance['avatars'] : false ; // whether or not to show avatars

The widget code

The next section of code is what will be used to create what the widget should display. You’ll notice that the code has been taken from Twitter’s Profile Widget tool, except we’ve substituted in our variable options so that we can modify its appearance through the control panel.

// Before widget //

		echo $before_widget;

// Title of widget //

		if ( $title ) { echo $before_title . $title . $after_title; }

// Widget output //

		?>
		<script src="http://widgets.twimg.com/j/2/widget.js"></script>
			<script>
			new TWTR.Widget({
				version: 2,
				type: 'profile',
				rpp: <?php echo $tweetnumber; ?>,
				interval: 6000,
				width: 250,
				height: 300,
				theme: {
					shell: {
						background: '<?php echo $shellbg; ?>',
						color: '<?php echo $shellcolor; ?>'
					},
					tweets: {
						background: '<?php echo $tweetsbg; ?>',
						color: '<?php echo $tweetscolor; ?>',
						links: '<?php echo $tweetslinks; ?>'
					}
				},
				features: {
					scrollbar: false,
					loop: false,
					live: true,
					<?php if ($hashtags) {
						echo 'hashtags: true,';
					}
					else {
						echo 'hashtags: false,';
					}
					if ($timestamp) {
						echo 'timestamp: true,';
					}
					else {
						echo 'timestamp: false,';
					}
					if ($avatars) {
						echo 'avatars: true,';
					}
					else {
						echo 'avatars: false,';
					} ?>
					behavior: 'all'
  				}
			}).render().setUser('<?php echo $twitterusername; ?>').start();
			</script>
			<?php

// After widget //

		echo $after_widget;
		}

Update your options in the database

Now we’re going to insert a section of code which is going to take the options that the user will enter in the control panel and save the new values to the database. You’ll notice that the syntax is the same for every option:

// Update Settings //

 		function update($new_instance, $old_instance) {
 			$instance['title'] = ($new_instance['title']);
 			$instance['tweet_number'] = ($new_instance['tweet_number']);
 			$instance['twitter_username'] = ($new_instance['twitter_username']);
 			$instance['shell_bg'] = ($new_instance['shell_bg']);
 			$instance['shell_color'] = ($new_instance['shell_color']);
 			$instance['tweets_bg'] = ($new_instance['tweets_bg']);
 			$instance['tweets_color'] = ($new_instance['tweets_color']);
 			$instance['tweets_links'] = ($new_instance['tweets_links']);
 			$instance['hashtags'] = ($new_instance['hashtags']);
 			$instance['timestamp'] = ($new_instance['timestamp']);
 			$instance['avatars'] = ($new_instance['avatars']);
 			return $instance;
 		}

Putting the control panel together

Now we’re ready to put together the control panel where the user can set and choose their options for their profile widget. This section of code starts off by declaring some default options which will appear after first installing the widget. It then goes on to provide fields for setting options; some of the fields are text entry fields, whereas some fields are checkboxes. You can also use radio buttons and drop-down lists if you like.

Depending on what type of input field you need for each option will determine the syntax that you need for it. You can copy the syntax for checkboxes and text inputs from this example.

// Widget Control Panel //

 		function form($instance) {

 		$defaults = array( 'title' => 'Dave Recent Tweets', 'tweet_number' => 3, 'twitter_username' => '', 'shell_bg' => '#AAE3FF', 'shell_color' => '#333', 'tweets_bg' => '#EFFFFF', 'tweets_color' => '#333', 'tweets_links' => '#716B68', 'hashtags' => 'on', 'timestamp' => 'on', 'avatars' => false );
 		$instance = wp_parse_args( (array) $instance, $defaults ); ?>

 		<p>
 			<label for="<?php echo $this->get_field_id('title'); ?>">Title</label>
 			<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>'" type="text" value="<?php echo $instance['title']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweet_number'); ?>"><?php _e('Number of tweets to display'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweet_number'); ?>" name="<?php echo $this->get_field_name('tweet_number'); ?>" type="text" value="<?php echo $instance['tweet_number']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('twitter_username'); ?>"><?php _e('Twitter username'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('twitter_username'); ?>" name="<?php echo $this->get_field_name('twitter_username'); ?>" type="text" value="<?php echo $instance['twitter_username']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('shell_bg'); ?>"><?php _e('Shell background color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('shell_bg'); ?>" name="<?php echo $this->get_field_name('shell_bg'); ?>" type="text" value="<?php echo $instance['shell_bg']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('shell_color'); ?>"><?php _e('Shell text color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('shell_color'); ?>" name="<?php echo $this->get_field_name('shell_color'); ?>" type="text" value="<?php echo $instance['shell_color']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_bg'); ?>"><?php _e('Tweets background color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_bg'); ?>" name="<?php echo $this->get_field_name('tweets_bg'); ?>" type="text" value="<?php echo $instance['tweets_bg']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_color'); ?>"><?php _e('Tweets text color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_color'); ?>" name="<?php echo $this->get_field_name('tweets_color'); ?>" type="text" value="<?php echo $instance['tweets_color']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_links'); ?>"><?php _e('Tweets links color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_links'); ?>" name="<?php echo $this->get_field_name('tweets_links'); ?>" type="text" value="<?php echo $instance['tweets_links']; ?>" />
 		</p>
		<p>
			<label for="<?php echo $this->get_field_id('hashtags'); ?>"><?php _e('Show hashtags?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['hashtags'], 'on' ); ?> id="<?php echo $this->get_field_id('hashtags'); ?>" name="<?php echo $this->get_field_name('hashtags'); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('timestamp'); ?>"><?php _e('Show timestamp?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['timestamp'], 'on' ); ?> id="<?php echo $this->get_field_id('timestamp'); ?>" name="<?php echo $this->get_field_name('timestamp'); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('avatars'); ?>"><?php _e('Show avatars?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['avatars'], 'on' ); ?> id="<?php echo $this->get_field_id('avatar'); ?>" name="<?php echo $this->get_field_name('avatars'); ?>" />
		</p>
        <?php }

}

The finishing touches

All that’s left to do is tie up the loose ends and register the widget so it can actually be used. This is the final line of code in your plugin.

// End class diww_my_recent_tweets_widget

add_action('widgets_init', create_function('', 'return register_widget("diww_my_recent_tweets_widget");'));
?>

Once you’ve done that, you should have a plugin that looks something like this:

<?php
/*
Plugin Name: Dave Recent Tweets
Plugin URI: http://www.doitwithwp.com/
Description: Displays your recent tweets in a sidebar widget
Version: 0.1
Author: Dave Clements
Author URI: http://www.theukedge.com
License: GPL2
*/

/*  Copyright 2011  Dave Clements  (email : http://www.theukedge.com/contact/)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

// Start class diww_my_recent_tweets_widget //

	class diww_my_recent_tweets_widget extends WP_Widget {

// Constructor //

	function diww_my_recent_tweets_widget() {
		$widget_ops = array( 'classname' => 'diww_my_recent_tweets_widget', 'description' => 'Displays your recent tweets using the Twitter profile tool' ); // Widget Settings
		$control_ops = array( 'id_base' => 'diww_my_recent_tweets_widget' ); // Widget Control Settings
		$this->WP_Widget( 'diww_my_recent_tweets_widget', 'Dave Recent Tweets', $widget_ops, $control_ops ); // Create the widget
	}

// Extract Args //

		function widget($args, $instance) {
			extract( $args );
			$title 		= apply_filters('widget_title', $instance['title']); // the widget title
			$tweetnumber 	= $instance['tweet_number']; // the number of tweets to show
			$twitterusername 	= $instance['twitter_username']; // the type of posts to show
			$shellbg	= $instance['shell_bg']; // Shell background color
			$shellcolor 	= $instance['shell_color']; // Shell text color
			$tweetsbg 	= $instance['tweets_bg']; // Tweets background color
			$tweetscolor 	= $instance['tweets_color']; // Tweets text color
			$tweetslinks 	= $instance['tweets_links']; // Tweets links color
			$hashtags   = isset($instance['hashtags']) ? $instance['hashtags'] : false ; // whether or not to show hashtags
			$timestamp   = isset($instance['timestamp']) ? $instance['timestamp'] : false ; // whether or not to show timestamp
			$avatars   = isset($instance['avatars']) ? $instance['avatars'] : false ; // whether or not to show avatars

// Before widget //

		echo $before_widget;

// Title of widget //

		if ( $title ) { echo $before_title . $title . $after_title; }

// Widget output //

		?>
		<script src="http://widgets.twimg.com/j/2/widget.js"></script>
			<script>
			new TWTR.Widget({
				version: 2,
				type: 'profile',
				rpp: <?php echo $tweetnumber; ?>,
				interval: 6000,
				width: 250,
				height: 300,
				theme: {
					shell: {
						background: '<?php echo $shellbg; ?>',
						color: '<?php echo $shellcolor; ?>'
					},
					tweets: {
						background: '<?php echo $tweetsbg; ?>',
						color: '<?php echo $tweetscolor; ?>',
						links: '<?php echo $tweetslinks; ?>'
					}
				},
				features: {
					scrollbar: false,
					loop: false,
					live: true,
					<?php if ($hashtags) {
						echo 'hashtags: true,';
					}
					else {
						echo 'hashtags: false,';
					}
					if ($timestamp) {
						echo 'timestamp: true,';
					}
					else {
						echo 'timestamp: false,';
					}
					if ($avatars) {
						echo 'avatars: true,';
					}
					else {
						echo 'avatars: false,';
					} ?>
					behavior: 'all'
  				}
			}).render().setUser('<?php echo $twitterusername; ?>').start();
			</script>
			<?php

// After widget //

		echo $after_widget;
		}

// Update Settings //

 		function update($new_instance, $old_instance) {
 			$instance['title'] = ($new_instance['title']);
 			$instance['tweet_number'] = ($new_instance['tweet_number']);
 			$instance['twitter_username'] = ($new_instance['twitter_username']);
 			$instance['shell_bg'] = ($new_instance['shell_bg']);
 			$instance['shell_color'] = ($new_instance['shell_color']);
 			$instance['tweets_bg'] = ($new_instance['tweets_bg']);
 			$instance['tweets_color'] = ($new_instance['tweets_color']);
 			$instance['tweets_links'] = ($new_instance['tweets_links']);
 			$instance['hashtags'] = ($new_instance['hashtags']);
 			$instance['timestamp'] = ($new_instance['timestamp']);
 			$instance['avatars'] = ($new_instance['avatars']);
 			return $instance;
 		}

// Widget Control Panel //

 		function form($instance) {

 		$defaults = array( 'title' => 'Dave Recent Tweets', 'tweet_number' => 3, 'twitter_username' => '', 'shell_bg' => '#AAE3FF', 'shell_color' => '#333', 'tweets_bg' => '#EFFFFF', 'tweets_color' => '#333', 'tweets_links' => '#716B68', 'hashtags' => 'on', 'timestamp' => 'on', 'avatars' => false );
 		$instance = wp_parse_args( (array) $instance, $defaults ); ?>

 		<p>
 			<label for="<?php echo $this->get_field_id('title'); ?>">Title</label>
 			<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>'" type="text" value="<?php echo $instance['title']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweet_number'); ?>"><?php _e('Number of tweets to display'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweet_number'); ?>" name="<?php echo $this->get_field_name('tweet_number'); ?>" type="text" value="<?php echo $instance['tweet_number']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('twitter_username'); ?>"><?php _e('Twitter username'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('twitter_username'); ?>" name="<?php echo $this->get_field_name('twitter_username'); ?>" type="text" value="<?php echo $instance['twitter_username']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('shell_bg'); ?>"><?php _e('Shell background color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('shell_bg'); ?>" name="<?php echo $this->get_field_name('shell_bg'); ?>" type="text" value="<?php echo $instance['shell_bg']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('shell_color'); ?>"><?php _e('Shell text color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('shell_color'); ?>" name="<?php echo $this->get_field_name('shell_color'); ?>" type="text" value="<?php echo $instance['shell_color']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_bg'); ?>"><?php _e('Tweets background color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_bg'); ?>" name="<?php echo $this->get_field_name('tweets_bg'); ?>" type="text" value="<?php echo $instance['tweets_bg']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_color'); ?>"><?php _e('Tweets text color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_color'); ?>" name="<?php echo $this->get_field_name('tweets_color'); ?>" type="text" value="<?php echo $instance['tweets_color']; ?>" />
 		</p>
 		<p>
 			<label for="<?php echo $this->get_field_id('tweets_links'); ?>"><?php _e('Tweets links color'); ?></label>
 			<input class="widefat" id="<?php echo $this->get_field_id('tweets_links'); ?>" name="<?php echo $this->get_field_name('tweets_links'); ?>" type="text" value="<?php echo $instance['tweets_links']; ?>" />
 		</p>
		<p>
			<label for="<?php echo $this->get_field_id('hashtags'); ?>"><?php _e('Show hashtags?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['hashtags'], 'on' ); ?> id="<?php echo $this->get_field_id('hashtags'); ?>" name="<?php echo $this->get_field_name('hashtags'); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('timestamp'); ?>"><?php _e('Show timestamp?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['timestamp'], 'on' ); ?> id="<?php echo $this->get_field_id('timestamp'); ?>" name="<?php echo $this->get_field_name('timestamp'); ?>" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('avatars'); ?>"><?php _e('Show avatars?'); ?></label>
            <input type="checkbox" class="checkbox" <?php checked( $instance['avatars'], 'on' ); ?> id="<?php echo $this->get_field_id('avatar'); ?>" name="<?php echo $this->get_field_name('avatars'); ?>" />
		</p>
        <?php }

}

// End class diww_my_recent_tweets_widget

add_action('widgets_init', create_function('', 'return register_widget("diww_my_recent_tweets_widget");'));
?>

Your thoughts?

This tutorial gives you plenty of opportunity to create a widget with a whole score of user options. Did you make it to the finish line and create a working widget? Did you have a go at modifying the code to add or remove some of the options? I’d love to hear how you got on!


Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made via the link.

Dave Clements runs Do It With WordPress and designs awesome websites and offers WordPress consulting services in his spare time, along with eating Wheat Thins, spending time with friends and family, watching Indie films and playing with his array of Apple products.

Leave Yours +

2 Comments

  1. This is awesome. I’ve been thinking of including a twitter widget with my HTML5Press theme. I’ll probably go with a slightly modified version of what you’ve got here. :) Your timing couldn’t have been better.

  2. zordan

    lots of thanks for sharing dave

  • Comments are Closed

Search

Our Sponsors