A plugin I’m a big fan of is xHanch’s My Twitter (http://xhanch.com/wp-plugin-my-twitter/). It allows you to easily display your Twitter feed in any widget area of your site, with lots of options for layout, which info. to share (only your Tweets, re-Tweets, replies, etc.) and the latest version displays user avatars as well. Installs in seconds and works like a charm every time.

The plugin options page has a box for adding your own custom css styles which might seem a bit confusing at first. It’s actually pretty simple. The plugin generates styles on the fly and prints them to the webpage’s header, rather than including  a fixed style sheet. Any styles you create — or existing ones you override — will thus be output with your changes.

The basic layout is this:

Code block

<div id = "xmt_your-twitter-account" class = "xmt xmt_your-twitter-account">
	<ul class = "tweet-area">
		<li class="tweet-list">
		//if you're using avatars
		    <img class = "tweet_avatar">
		    The tweet message goes here
		 </li>
	</ul>
</div>

Where it says your-twitter-account in the code above, the username of your Twitter account gets placed. So to add / change /over-ride the existing styles, you can simply add new values in the box on the cofiguration page, like so:

Code block

{xmt_id}.xmt ul {font-size: 20px;}

I don’t know why you’d want a giant font size for your tweets, but there you go.

Making a Table Layout

My challenge was that I have the avatars showing. They float to the left and the Tweet goes to the right. But if the Tweet is long, it wraps underneath the avatar. I wanted a table-style layout with the avatar as one column and the Tweet as another column next to it. The solution required one mod to the plugin and some new styles, making use of the CSS display:table declaration.

First, open up xhanch_my_twitter.php and go to line 279, which reads:

Code block

<?php
echo $tmp_str;
?>

Replace it with:

Code block

<?php
echo "<div class='the_tweet'>".$tmp_str."</div>";
?>

This simply adds a separate <div> around the Tweet message and gives it a new class, .the_tweet.

Now  add the following custom styles in the plugin options page:

Code block

{xmt_id}.xmt ul {display:table;}
{xmt_id}.xmt ul li.tweet_list{padding-top:5px;padding-bottom:3px; border-bottom:1px solid #ececec;}
{xmt_id}.xmt .tweet_avatar{display:table-cell;padding-right:5px;}
{xmt_id}.xmt ul li.tweet_list .the_tweet{display:table-cell; }

One thing to note in the above styles. I set the <ul> containing the Twitter feed to display as a table and I set the avatar and the Tweet message to display as cells, but I intentionally didn’t set the <li>’s to display as rows — why not? The answer is that the <tr> is implied when you set an element to <display:table-cell> — you don’t need to expressly set it. Since table rows can’t take border styles, I left the list items (<li>’s) in their regular display state thus allowing me to add a border to the bottom.

And here’s what the final output looks like: