Bloggy Thursdays: Customizing the Twitter Widget Pro Plugin

Welcome to this installment of Bloggy Thursdays, where I share with my fellow bloggers tips and tutorials to maximize and better your blog. While I do not consider myself an expert, I do like to think that after 10+ years of blogging — in addition to my technical knowledge — I know more than the average blogger when it comes to making your blog more appealing to readers.

Do you have any comments, questions, or topics you’d like to see covered here? Please send me a message via my contact form. Enjoy!

A couple of weeks ago, Rachael, Really commented on my WordPress plugins post and asked me to detail how I got my Twitter widget to look the way it does. As I am always looking for new ideas and topics to cover in Bloggy Thursdays — as well as Cool Tool Tuesdays and Reverent Sundays — I couldn’t help but oblige. 🙂

(Before I go on any further, I should mention that this is another WordPress-specific tutorial. Sorry to all my non-WordPress blogger readers!)

First, download the Twitter Widget Pro plugin. What I like about this plugin is that it is a Twitter widget that is meant to be customized — this is apparent by its default, bare-bones look. However, with some creativity, you can get it to look practically any way you want.

Another great thing about Twitter Widget Pro is that it gives you tons of options as a widget even before you get into the CSS. This is how I set up the widget in the “Widgets” section of my WordPress admin:

Now, let’s get to the nitty gritty part!

When you download the Twitter Widget Pro plugin, you will notice that the plugin package comes with several files. You want to locate the file called wp-twitter-widget.php and open it in your favorite text/code editor.

Now this is the important part. You want to REPLACE lines 561-680 with the following: (Note: these lines are consistent with the most current version of Twitter Widget Pro, which is version 2.3.8. If you are working with another version, the line numbers may be different.)

if ( empty( $args['title'] ) )
			$args['title'] = "Twitter: {$args['username']}";

		$args['title'] = apply_filters( 'twitter-widget-title', $args['title'], $args );
		$args['title'] = "{$args['title']}";
		$widgetContent .= $args['before_title'] . $args['title'] . $args['after_title'];
		$widgetContent .= '
';
		if ( count( $tweets ) == 0 ) {
			$widgetContent .= '
' . __( 'No Tweets Available', $this->_slug ) . '

';
		} else {
			$count = 0;
			foreach ( $tweets as $tweet ) {
				// Set our "ago" string which converts the date to "# ___(s) ago"
				$tweet->ago = $this->_timeSince( strtotime( $tweet->created_at ), $args['showts'], $args['dateFormat'] );
				$entryContent = apply_filters( 'widget_twitter_content', $tweet->text );
				$widgetContent .= '
';
				$widgetContent .= "
{$entryContent}
";

 				if ( !empty( $tweets[0] ) && !empty( $args['avatar'] ) ) {
				$widgetContent .= '
';
				$widgetContent .= $this->_getProfileImage( $tweets[0]->user, $args );
				$widgetContent .= '

';
				}

				$widgetContent .= "
@{$tweet->user->screen_name}";
				$widgetContent .= "";
				$linkAttrs = array(
					'href'	=> "http://twitter.com/{$tweet->user->screen_name}/statuses/{$tweet->id_str}"
				);
				$widgetContent .= $this->_buildLink( $tweet->ago, $linkAttrs );
				$widgetContent .= '';

				if ( !empty( $tweet->in_reply_to_screen_name ) ) {
					$rtLinkText = sprintf( __( 'in reply to %s', $this->_slug ), $tweet->in_reply_to_screen_name );
					$widgetContent .=  ' ';
					$linkAttrs = array(
						'href'	=> "http://twitter.com/{$tweet->in_reply_to_screen_name}/statuses/{$tweet->in_reply_to_status_id_str}",
						'class'	=> 'reply-to'
					);
					$widgetContent .= $this->_buildLink( $rtLinkText, $linkAttrs );
					$widgetContent .= '

';
				}

				if ( 'true' == $args['showintents'] ) {
					$widgetContent .= ' ';
					$lang = $this->_getTwitterLang();
					if ( !empty( $lang ) )
						$linkAttrs['data-lang'] = $lang;

					$linkText = __( '@ ', $this->_slug );
					$linkAttrs['href'] = "http://twitter.com/intent/tweet?in_reply_to={$tweet->id_str}";
					$linkAttrs['class'] = 'in-reply-to';
					$linkAttrs['title'] = 'Reply';
					$widgetContent .= $this->_buildLink( $linkText, $linkAttrs );

					$linkText = __( 'rt ', $this->_slug );
					$linkAttrs['href'] = "http://twitter.com/intent/retweet?tweet_id={$tweet->id_str}";
					$linkAttrs['class'] = 'retweet';
					$linkAttrs['title'] = 'Retweet';
					$widgetContent .= $this->_buildLink( $linkText, $linkAttrs );

					$linkText = __( '♥', $this->_slug );
					$linkAttrs['href'] = "http://twitter.com/intent/favorite?tweet_id={$tweet->id_str}";
					$linkAttrs['class'] = 'favorite';
					$linkAttrs['title'] = 'Favorite';
					$widgetContent .= $this->_buildLink( $linkText, $linkAttrs );
					$widgetContent .= '';
				}
 				$widgetContent .= '';
				$widgetContent .= '


';

				if ( ++$count >= $args['items'] )
					break;
			}
		}

		$widgetContent .= '

';

		if ( 'true' == $args['showfollow'] ) {
			$widgetContent .= '
';
			$linkText = "@{$args['username']}";
			$linkAttrs = array(
				'href'	=> "http://twitter.com/{$args['username']}",
				'class'	=> 'twitter-follow-button',
				'title'	=> sprintf( __( 'Follow %s', $this->_slug ), "@{$args['username']}" ),
			);
			$lang = $this->_getTwitterLang();
			if ( !empty( $lang ) )
				$linkAttrs['data-lang'] = $lang;

			$widgetContent .= $this->_buildLink( $linkText, $linkAttrs );
			$widgetContent .= '

';
		}

		if ( 'true' == $args['showXavisysLink'] ) {
			$widgetContent .= '
';
			$linkAttrs = array(
				'href'	=> 'http://xavisys.com/wordpress-plugins/wordpress-twitter-widget/',
				'title'	=> __( 'Brought to you by Xavisys - A WordPress development company', $this->_slug )
			);
			$widgetContent .= __( 'Powered by', $this->_slug );
			$widgetContent .= $this->_buildLink( 'WordPress Twitter Widget Pro', $linkAttrs );
			$widgetContent .= '

';
		}
		$widgetContent .= '