Here is an easy way to create a fairly customisable Twitter Widget for your WordPress blog. For the following, we need to add the code to the functions.php file within the root of your theme’s file.

1. The Widget

Firstly, you need to create the function for the actual widget. The function here uses a Twitter Widget to display the latest tweets from your account. You can change certain variables in here as you wish, such as the background colour and the text colour.

<?php

function twitter_widget()
{
    $settings = get_option("widget_twitter");

    $twitter_id = $settings['twitter_id'];
    $twitter_width = $settings['twitter_width'];
    $twitter_height = $settings['twitter_height'];

    echo "<div class="widget">
    <h1 class="side_nav_title">Follow us on Twitter</h1>
	<script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
	<script type="text/javascript">
	new TWTR.Widget({
	version: 2,
	type: 'profile',
	rpp: 3,
	interval: 6000,
	width: ".$twitter_width.",
	height: ".$twitter_height.",
	theme: {
	shell: {
	background: '#F3F3F3',
	color: '#232323'
	},
	tweets: {
	background: '#F3F3F3',
	color: '#232323',
	links: '#f9a424'
	}
	},
	features: {
	scrollbar: false,
	loop: false,
	live: false,
	hashtags: true,
	timestamp: true,
	avatars: false,
	behavior: 'all'
	}
	}).render().setUser('".$twitter_id."').start();
	</script>
	</div>";
}

?>

2. The Twitter Widget admin

Next, we create the admin for the widget; this is what appears once we drag the widget into a sidebar and WordPress gives us a list of options for it.
Here we are creating options for the Twitter username, width and height of the box. You could also add in the colours for the background and text if you wish, just add in extra ones like in the example below.

<?php

function twitter_widget_admin() {

	$settings = get_option("widget_twitter");
	
	// update options
	if (isset($_POST['update_twitter'])) {
	
		$settings['twitter_id'] = strip_tags(stripslashes($_POST['twitter_id']));
		$settings['twitter_width'] = strip_tags(stripslashes($_POST['twitter_width']));
		$settings['twitter_height'] = strip_tags(stripslashes($_POST['twitter_height']));
		
		update_option("widget_twitter",$settings);
	}

	echo '<p>
	<label for="twitter_id">Twitter Name:
	<input id="twitter_id" name="twitter_id" type="text" class="widefat" value="'.$settings['twitter_id'].'" /></label></p>';
	echo '<p>
	<label for="twitter_width">Width:
	<input id="twitter_width" name="twitter_width" type="text" class="widefat" value="'.$settings['twitter_width'].'" /></label></p>';
	echo '<p>
	<label for="twitter_height">Height:
	<input id="twitter_height" name="twitter_height" type="text" class="widefat" value="'.$settings['twitter_height'].'" /></label></p>';
	echo '<input type="hidden" id="update_twitter" name="update_twitter" value="1" />';

}

?>

3. Registering the Widget

Now all that is left to do is to register the widget this is done with the following 2 lines of code.

<?php

register_sidebar_widget('Twitter Widget', 'twitter_widget');
register_widget_control('Twitter Widget', 'twitter_widget_admin');

?>

4. Using the Widget

Now to use this widget and add it to one of your sidebar menus go to Appearance -> Widgets in your WordPress admin and it will be available to add to your sidebars with the title ‘Twitter Widget’. Once you drag it to your sidebar, it will give the options which you can manage. Simply add your Twitter username, the width it should be and the height the box should be. Now the widget should appear on the front end of your site in the sidebar you put it in.

5. Full code

Below is the full code for creating the Twitter Widget. Simply add it to your functions.php file in your theme folder.

<?php

function twitter_widget()
{
    $settings = get_option("widget_twitter");

    $twitter_id = $settings['twitter_id'];
    $twitter_width = $settings['twitter_width'];
    $twitter_height = $settings['twitter_height'];

    echo "<div class="widget">
    <h1 class="side_nav_title">Follow us on Twitter</h1>
	<script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
	<script type="text/javascript">
	new TWTR.Widget({
	version: 2,
	type: 'profile',
	rpp: 3,
	interval: 6000,
	width: ".$twitter_width.",
	height: ".$twitter_height.",
	theme: {
	shell: {
	background: '#F3F3F3',
	color: '#232323'
	},
	tweets: {
	background: '#F3F3F3',
	color: '#232323',
	links: '#f9a424'
	}
	},
	features: {
	scrollbar: false,
	loop: false,
	live: false,
	hashtags: true,
	timestamp: true,
	avatars: false,
	behavior: 'all'
	}
	}).render().setUser('".$twitter_id."').start();
	</script>
	</div>";
}

function twitter_widget_admin() {

	$settings = get_option("widget_twitter");
	
	// update options
	if (isset($_POST['update_twitter'])) {
	
		$settings['twitter_id'] = strip_tags(stripslashes($_POST['twitter_id']));
		$settings['twitter_width'] = strip_tags(stripslashes($_POST['twitter_width']));
		$settings['twitter_height'] = strip_tags(stripslashes($_POST['twitter_height']));
		
		update_option("widget_twitter",$settings);
	}

	echo '<p>
	<label for="twitter_id">Twitter Name:
	<input id="twitter_id" name="twitter_id" type="text" class="widefat" value="'.$settings['twitter_id'].'" /></label></p>';
	echo '<p>
	<label for="twitter_width">Width:
	<input id="twitter_width" name="twitter_width" type="text" class="widefat" value="'.$settings['twitter_width'].'" /></label></p>';
	echo '<p>
	<label for="twitter_height">Height:
	<input id="twitter_height" name="twitter_height" type="text" class="widefat" value="'.$settings['twitter_height'].'" /></label></p>';
	echo '<input type="hidden" id="update_twitter" name="update_twitter" value="1" />';

}

register_sidebar_widget('Twitter Widget', 'twitter_widget');
register_widget_control('Twitter Widget', 'twitter_widget_admin');

?>

Depending upon your styling and the CSS you use on your site, it should create a widget in your sidebar like this.