This tutorial is for those lucky users who run their sites on Wordpress using the Chris Pearson’s Thesis theme. If you haven’t learned about thesis take a few minutes to visit our review of the Thesis Wordpress theme.
If you use Twitter and run a wordpress blog, there is no doubt you have tried to find a way to integrate it into your wordpress blog. On my search to “twittify” my a couple of my wordpress sites, I didn’t really find anything I was in love with.
Twitter Solutions:
There are several solutions which will help you add twitter to your sidebar via a plugin. Of the ones I stumbled acrossed I liked Twitter Wordpress Sidebar Widget the best.
I did find some quick code Double Mule released on how to add a follow me widget to Thesis, however it didn’t quite fit what I was trying to accomplish.
Handrolled Solution:
With no ready solutions besides plugins. I decided to roll my own. Plugins are great but I hate adding more plugins than I need to, somehow they always seem to break on upgrade or not play well with others. That said, I started learning about the Twitter API. The Twitter API didn’t look to difficult to understand and after some quick searching I found a solution to add twitter via Jquery and JSON. This code looked like exactly what I needed. After some modifications and tweaking I had it working on my this blog.
This blog, along with all my other important sites are run on Wordpress and Thesis. The Thesis framework is outstanding for flexibility and all my future sites will be built upon it. That said I rolled the code into a few custom hooks and added some additional functions for ease of use.
Installation Video:
Please Note This is an old tutorial. The examples used have changed.
If you find the code below intimidating. Here is a quick video of how to install the twitter feed. I figured it would be helpful for people to see how custom functions work etc, in a video format. This video was recorded as I installed this code on my personal blog, NicholasReese.com. I hope this video helps you as you install this code on your site.
This was the first video tutorial, I’ve done. Future ones will be much better quality, figured out how to change the quality settings in Camtasia.
Thesis Code: Custom Hooks
Below you will find the code I used to add a twitter sidebar to this site. You may need to modify the placement of the box. I use a left sidebar, lots of people probably use right sidebars. When in doubt reference Thesis Hooks for placement.
Within this code there are 4 functions, the first two are the ones you need to worry about. Here you will define your twitter username and the display name you want to be used at the top of the box.
function twitterid(){
return 'nickreese'; //define twitter id
}
function twitterdisplay(){
return 'Nick'; //define display name
}
function thesis_add_twitter_header(){ ?>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> -->
<script>
$(document).ready( function() {
var url = "http://twitter.com/status/user_timeline/<?= twitterid() ?>.json?count=1&callback=?";
$.getJSON(url,
function(data){
$.each(data, function(i, item) {
$("img#profile").attr("src", item.user["profile_image_url"]);
$("#tweets ul").append("<li>" + item.text.linkify() + "<br /> <span class='created_at'>About " + relative_time(item.created_at) + "</span></li>");
});
});
});
String.prototype.linkify = function() {
return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
return m.link(m);
});
};
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
var r = '';
if (delta < 60) {
r = 'a minute ago';
} else if(delta < (45*60)) {
r = (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (90*60)) {
r = 'an hour ago';
} else if(delta < (24*60*60)) {
r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
r = '1 day ago';
} else {
r = (parseInt(delta / 86400)).toString() + ' days ago';
}
return r;
}
function twitter_callback ()
{
return true;
}
</script>
<? }
add_action('wp_head', 'thesis_add_twitter_header');
function thesis_add_twitter_sidebar(){ ?>
<li id="twitter-side" class="widget">
<h3><?= twitterdisplay();?> on Twitter</h3>
<div id="tweets">
<a href="http://www.twitter.com/<?= twitterid()?>" rel="nofollow"><img id="profile"> </a>
<ul></ul>
<p>
Follow <a href="http://www.twitter.com/<?= twitterid()?>" rel="nofollow"><?= twitterdisplay();?> on Twitter</a>.
</p>
</div>
</li>
<?
}
add_action('thesis_hook_before_sidebar_1', 'thesis_add_twitter_sidebar');Thesis Code: CSS Styling
If you are interested in using the same styling I have on this side here is the CSS:
.custom #twitter-side #tweets{padding:5px; background:#EFF3FF; border:1px dashed #BFD0FF; font-size:12px;} .custom #twitter-side #tweets img{padding:4px; background:#eee; border:1px solid #ccc; width:48px; heigth:48px; float:left;} .custom #twitter-side #tweets ul {margin-left: 63px;} .custom #twitter-side #tweets ul li {line-height:1.3em;} .custom #twitter-side #tweets .created_at{font-size:10px; line-height:1em;} .custom #twitter-side p{margin-left: 63px;font-size:10px;line-height:1em;}
As for installation it is easy. Drop the hooks in your custom_functions.php and add the CSS to your custom.css files.
I really hope you find this tutorial helpful. Let me know how you like the video format.
Article by
Nick Reese is a full time internet marketer living in Austin Texas. When Nick isn't managing web properties he enjoys biking, wakeboarding, and drinking tea. You can read more from Nick Reese on his website and follow him on Twitter @nickreese.
Nick has written 25 awesome articles for Art of Blog.
{ 6 comments… read them below or add one }
This is a great Thesis theme tutorial, I should find this very useful. Thanks
Great tutorial but am having some problems. I get the box to appear, but my Avatar doesn’t show up nor do any of my tweets. Any idea what the problem could be?
thanks for that, i was looking for this info exactly
Nick,
Thanks so much for this tutorial. It works great. The one thing I’d like to do, however, is move this down the sidebar below my widgets. Any ideas on how to do that?
Brian
Great tutorial however not working on my site. The widget displays only a small box with a “X” inside. Guess I’ve to resort to twitter.com badges again.
John
Sounds like the javascript isn’t firing. Do you have jquery installed? (did you uncomment the comment?)