As of June 11, 2013, Twitter API v1 officially retired. The new version is Twitter API v1.1. Thus the code discussed in this post NO longer works. I will update this post with the new code if/when I find a solution. Thanks.
Do you want to display your latest tweets on your WordPress Website? If you are using Twitter, you may want to display your latest tweets on your blog.
In this tutorial, I will show you how to display your latest tweets from your Twitter feed without a plugin, as shown in the image below. Of course, you need to have a Twitter account first.
What About a Plugin?
There are many plugins that display the latest posts from your Twitter account, but I encourage you to read my previous post about unnecessarily adding plugins to your theme. Personally, I am not a fan of plugins, I prefer to use a Snippet of code rather than using plugins.
Display Your Latest Tweets in WordPress
First you need to choose where you want to display your tweets. Most people prefer to display the tweets in the sidebar. In this case …
Open sidebar.php file located in your theme´s folder, and add the following CODE-1. Save the file and upload it to the server. Where to specifically add the code? more on that in the next section.
On line 19 of the code: Make sure to replace my Twitter username with yours. For instance, if your twitter username is xyz then just replace abichedid with xyz.
On line 21 of the code: Change this number depending on how many tweets you want to display on your WordPress Blog.
On line 24 of the code: The number Zero indicates that your Newest tweet will be displayed first.
The posted date on line 41 of the code, is the UTC, and NOT your local time zone.
The most important part of the code are lines 14 to 45. The HTML tags can be changed or removed depending on your theme. Also CSS classes can be modified to fit your theme´s style.
CODE-1 works on WordPress 2.8 and higher. But I hope that you will upgrade to the latest version.
Where to Add CODE-1 | Real Example: Emplode Theme | sidebar.php
To give you an example. One of the themes I am using for this Blog is the Emplode Theme. Below is where I added CODE-1 in the sidebar.php file. Some sections of the file are removed for brevity.
Emplode Theme :: sidebar.php File
More of CODE-1 Notes:
Some themes have more variations of the sidebar.php file, so look at their documentation and see where best to add the code. For instance, for the “Clear Line” theme, the code can be added in the “layouts/right-sidebar.php” file.
If your theme is not widegetized, then you can add the code anywhere you like in the sidebar. However, if your theme is widget ready, meaning that your theme supports a dynamic sidebar, then there is a limitation to where you can place the code. In this case, the code is placed at the top before the start of your dynamic widgets.
Even though I gave an example about placing the code in the sidebar. However; you can add the code anywhere you like on your WordPress Blog, specifically in your header (header.php), or footer (footer.php).
Styling CODE-1 | style.css
To style CODE-1 with CSS: You could use the same styling as your sidebar´s Widgets (or your sidebar in case your theme does not support widgets). You don´t have to do anything extra here unless you want to. Style it with what´s available for your theme. Same applies to the HTML tags, use the same layout available for your sidebar.
For instance, if you are using Google Chrome browser use the “Inspect element” feature to know which CSS classes you need to use or you could view the source code. For Mozilla Firefox browser, you could either check the source code or install the Firebug Add-on. Also note that the HTML tags for CODE-1 can also be changed or removed depending on your theme.
Below is the CSS code that I used to style CODE-1 for the “Emplode Theme” as shown in the image at the top of the post.
How To Show the Posted Tweet Time Differently
You probably noticed that the Posted date of the tweet (line 41 of CODE-1), is actually the Universal Time Co-ordinated (UTC), also called GMT (Greenwich Mean Time). This is NOT your local time zone.
If you want to show the Posted date as a timeline (e.g. Posted: 5 hours ago; or Posted: 3 days ago), like in Twitter. Then…
Replace line 41 of CODE-1 with the following:
By doing so, the new Result will be shown as:
NOTE: After some testing, The timeline code above is not perfect. It is still off by 3-4 hours. I am not sure if it´s this code per se, or it has to do with the Twitter feed Caching (more on that in the next section).
One Disadvantage of CODE-1
The Code does not display the Tweets instantly on the Blog. Meaning, if you post a tweet on your twitter account on time=X. The tweet will appear on your twitter feed instantly (time=X). However; it could take several hours for the Tweet to actually appear on your Blog (time=X+Y; where Y could be several hours.)
This is probably due to the fact that Twitter limits how frequent you can request information, or browser caching issue, or some other caching issue, or I am not sure what else. This is definitely something that CODE-1 could be improved to allow almost instant display of tweets on your Blog the minute you post them on your twitter account.
If you find a solution on how to do that, and how to modify CODE-1 accordingly, I would love to hear from you.
Your Turn to Talk
In this tutorial, I showed you how to display your latest tweets from your Twitter account on your WordPress Website without a plugin. You now have a more efficient way of listing your tweets, with total control in layout and styling over the output.
If you have something to add, or anything else to say, please share it in the comment section. Your opinion matters, unless it is a Spam.