How To Display Your Latest Tweets in WordPress Without a Plugin

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.

Result of CODE-1: Display Latest tweets on Your WordPress Blog without a plugin.

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.

CODE-1:

<?php
/****************************CODE-1**************************************
* @Author: Boutros AbiChedid 
* @Date:   May 30, 2012
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Description: Display your Latest tweets (from your Twitter account) on 
* your WordPress Blog.
* @Tested on: WordPress version 3.3.2 
*************************************************************************/
?>
<div class="box">
<div class="box_title">Latest Tweets</div>
<div class="box_content">
	<?php
    //Path to include feed.php file located in wp-includes folder.
    include_once(ABSPATH . WPINC . '/feed.php'); 
    
    //Retrieves the feed and parses it. Specify the feed URL. This is my feed, put yours.
    $rss = fetch_feed('http://twitter.com/statuses/user_timeline/abichedid.rss');
	
	$tweetnumber = 4;  /** How many tweets you want to show. Must be >= 1 **/
	$maxitems = $rss->get_item_quantity($tweetnumber);
	
	$firstitem = 0; /** Specify the first item. 0 to start from the newest tweet. **/
    $rss_items = $rss->get_items($firstitem, $maxitems); 
    ?>
    
    <div class="twitter-list">
        <ul>
        <?php 
		if ($maxitems == 0) 
				echo '<li>No Tweets Yet!</li>';
        else
        //Loop through each feed item and display it as a link.
        foreach ( $rss_items as $item ) { ?>
        	<li>
            <!-- Get the tweet item title as an external link.-->
        	<a href='<?php echo $item->get_permalink(); ?>' target="_blank" title="External Link&#8230;" rel="nofollow">
            <?php echo $item->get_title(); ?></a> <br />
            <!-- Get the tweet item date.--> 
            <span><?php echo 'Posted: ' . $item->get_date(); ?></span>
        	</li>
        <?php } ?>
        </ul> 
    </div>
</div>
</div>

CODE-1 Notes:

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

</div>
</div>
<div class="right" id="sidebar">
<div id="sidebar_content">

<!-- CODE REMOVED FOR BREVITY. -->

<!-- Latest Tweets by BOUTROS ABICHEDID.-->
<?php
/************************************CODE-1******************************
* @Author: Boutros AbiChedid 
* @Date:   May 30, 2012
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Description: Display your Latest tweets (from your Twitter account) on 
* your WordPress Blog.
* @Tested on: WordPress version 3.3.2 
* @DO NOT REMOVE this header section (see terms of use.)
*************************************************************************/
?>
<div class="box">
<div class="box_title">Latest Tweets</div>
<div class="box_content">
	<?php
    //Path to include feed.php file located in wp-includes folder.
    include_once(ABSPATH . WPINC . '/feed.php'); 
    
    //Retrieves the feed and parses it. Specify the feed URL. This is my feed, put yours.
    $rss = fetch_feed('http://twitter.com/statuses/user_timeline/abichedid.rss');
	
	$tweetnumber = 4;  /* How many tweets you want to show. Must be >= 1 */
	$maxitems = $rss->get_item_quantity($tweetnumber);
	
	$firstitem = 0; /* Specify the first item. 0 to start from the newest tweet. */
    $rss_items = $rss->get_items($firstitem, $maxitems); 
    ?>
    
    <div class="twitter-list">
        <ul>
        <?php 
		if ($maxitems == 0) 
				echo '<li>No Tweets Yet!</li>';
        else
        //Loop through each feed item and display it as a link.
        foreach ( $rss_items as $item ) { ?>
        	<li>
            <!-- Get the tweet item title as an external link.-->
        	<a href='<?php echo $item->get_permalink(); ?>' target="_blank" title="External Link&#8230;" rel="nofollow">
            <?php echo $item->get_title(); ?></a> <br />
            <!-- Get the tweet item date.--> 
            <span><?php echo 'Posted: ' . $item->get_date(); ?></span>
        	</li>
        <?php } ?>
        </ul> 
    </div>
</div>
</div>
<!-- END OF Latest Tweets by BOUTROS ABICHEDID. -->  

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<?php the_subpages(); ?>
<?php if ( $recent_posts = get_posts('numberposts=10') ) : ?>

<div class="box">
	<div class="box_title">Recent posts</div>
	<div class="box_content">
		<ul>
	<?php foreach ( $recent_posts as $post ) : setup_postdata($post); ?>
			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	<?php endforeach; ?>								
		</ul>
	</div>
</div>
<?php endif; ?>

<div class="box">
	<div class="box_title">Categories</div>
	<div class="box_content">
		<ul>
			<?php wp_list_categories('title_li='); ?>
		</ul>
	</div>
</div>
<div class="box">
	<div class="box_title">Archives</div>
	<div class="box_content">
		<ul>
			<?php wp_get_archives('type=monthly&title_li='); ?>
		</ul>
	</div>
</div>
<div class="box">
	<div class="box_title">Search</div>
	<div class="box_content">
		<?php @include(TEMPLATEPATH . '/searchform.php'); ?>
	</div>
</div>

<?php endif; ?>
</div>
</div>

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.

/**************************************************************
* @Author: Boutros AbiChedid 
* @Date:   May 30, 2011
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Description: CSS styling for CODE-1 for the Emplode Theme.
* @Tested on: IE9, Safari 5 (for windows), Google Chrome 19, 
* Opera 11.64  and Mozilla Firefox 12
***************************************************************/ 
.box {
	margin-bottom: 1.5em;
}
.box_title {
	background: url('img/grain_dark.gif');
	color: #555;
	font-weight: bold;
	padding: 5px 8px;
	text-align: center;
	text-transform:uppercase;
}
.box_content {
	padding: 8px 0 8px;
}
.box li {
	border-top: 1px solid #DDC;
	padding: 4px 6px;
}
.box li:first-child {
	border-top: none;
}
.twitter-list ul li{
	margin: 3px 0;
	background: url('images/twitter-grey.png') no-repeat;
}
.twitter-list ul li a {
	margin-left: 25px;
}
.twitter-list ul li span {
	/* style the span if you like */
}

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:

<span>
<?php $utc_time = $item->get_date(); ?>     
<?php echo 'Posted: ' . human_time_diff( strtotime($utc_time) , current_time('timestamp') ) . ' ago'; ?>
</span>

By doing so, the new Result will be shown as:

Result of CODE-1 modified with timeline format: Display Latest tweets on Your WordPress Blog in a timeline format.

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).

References:

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.

If you found this post useful, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader, or feel free to donate. Thanks!

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

11 Responses to “How To Display Your Latest Tweets in WordPress Without a Plugin”

  1. keith says:

    Boutros,
    Any idea how to make this work with the new twitter API v1.1 using OAuth which is now required? Unfortunately, your code no longer works as of today.

    • I noticed that Keith. That’s why I removed the code and I am not using it in my Blog.
      I’ll take a look at it again and see If I can have a version 2.
      In the meantime, if you find a solution, please post it.
      Thanks.
      Boutros.

      • keith says:

        Thanks. I’ve posted the code sample I’ve been using to twitter dev boards so maybe someone there will have an idea.

  2. keith says:

    Is there any way to display your twitter avatar next to each entry using your method?

    • I am not sure. If you discover a way to do it, let me know. Thanks.

      • keith says:

        I actually did… here’s what my code looks like…

        <?php
        if ($maxitems == 0)
            echo 'No Tweets Yet!';
        else
           //Loop through each feed item and display it as a link.
            foreach ( $rss_items as $item ) { ?>
        	<!-- Get the tweet item date.--> 
                <?php get_date(); ?>
        	<!-- Get the tweet item title as an external link.-->
        	<?php <a href='get_permalink();' target="_blank" title="External Link…" rel="nofollow"> get_title(); ?>
        
        • keith says:

          sorry. that didnt seem to work out…
          Basically you just need to add this within your loop wherever you want the avatar to appear.

      • keith says:

        I actually found an easy way.
        Add this wherever you want the avatar to appear.


        <img src="http://api.twitter.com/1/users/profile_image?screen_name=twitter_username" />

        If you want the larger avatar just add &size=bigger to the end of the src.
        DO NOT FORGET to replace the ‘twitter_username’ with yours, e.g. abichedid

  3. Boutros Hi, lot of tutorials you wrote that I still apply on my site until now, including how to display the most commented post, most viewed post and wordPress pagination without plugin.

    Last I apply your tutorial how to display your latest tweet without a plugin. And it works perfectly. Thank you very much.