Custom Twitter Widget For the Thesis Wordpress Theme

If your like me and tried several Twitter plugins and seem to always be dissatisfied because of the lack of customization or the constant disconnection from Twitter and losing your feed.

Thanks to the help of Kristarella and her tutorial Display your tweets without a plugin I was able to create a Twitter feed and customize it to fit my needs.

However, I ran in to a problem. What is I wanted to put my Twitter feed in the middle of my sidebar instead of just above or below??

Therefore I managed to create this PHP code to give birth to a custom twitter widget!

Here’s the Java Script you’ll need – add this to your custom PHP file

Thank Kristarella for this code

function footer_scripts() { ?>
          <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
          <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=10"></script>
      <?php }
add_action('thesis_hook_after_html', 'footer_scripts');

Obviously you’ll need to change the USERNAME to your twitter username. (You can also modify the callback count, it is set to 10 as is).

Here’s the Widget Code – - add this to your custom PHP file

I hope you find it useful!

class twitter_widget extends WP_Widget {
	function twitter_widget() {
		$widget_ops = array('classname' => 'widget_twitter', 'description' => 'This is @USERNAME twitter widget' );
		$this->WP_Widget('twitter_widget', 'Twitter Widget - USERNAME', $widget_ops);
	}
	function widget($args, $instance) {
		extract($args, EXTR_SKIP);

		echo $before_widget;
                $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
                if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
?>
	<li class="widgets">
     <div id="twitter_div">
      <ul id="twitter_update_list"><li> </li></ul>
          <a href="http://www.twitter.com/USERNAME"> <img src="****THE-LINK-TO-THE-TWITTER-IMAGE-YOU-WANT-TO-DISPLAY-HERE****" /> </a>
    </div>
     </li>
<?php
		echo $after_widget;
	}
 	function update($new_instance, $old_instance) {
		$instance = $old_instance;
                $instance['title'] = strip_tags($new_instance['title']);
		return $instance;
	}
 	function form($instance) {
                $instance = wp_parse_args( (array) $instance, array( 'title' => '') );
		$title = strip_tags($instance['title']);

?>
                <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
			<p>Nothing you need to do now but add a little styling in your custom CSS Page</p>
<?php }
}
register_widget('twitter_widget');

Obviously, once again, you’ll need to change the USERNAME to your twitter username.

Here’s the CSS I use for my widget

.custom #twitter_div { background: none;}
.custom #twitter_div a { font-size: 16px;  }
     .custom #twitter_div a:hover { text-decoration: none; color: #ffffff;  }
.custom #twitter_div img { float: right; margin-top: -20px; margin-right: -60px; }
.custom #twitter_div li { border-bottom: 1px solid #616161; padding: 10px 0 10px 0; font-size: 15px; }

I hope you have found this tutorial helpful, feel free to ask me any questions.