How To Create A Custom Twitter Feed With WordPress

One of my most popular non-WordPress related posts here at Theme Lab was about making a custom Twitter widget without a plugin.

That was over three years ago. And it doesn’t work anymore because Twitter retired the version of the API it used to pull the tweets.

This is why you may have noticed Theme Lab, as well as a number of other sites, lost functionality in their Twitter feeds. But not to worry, it can be fixed (look at my site’s footer right now if you don’t believe me).

First Steps

The bad news, the “without a plugin” thing won’t work out so well anymore. The good news, there’s an awesome WordPress plugin we can now use to display tweets. It’s called, fittingly, Display Tweets.

Grab that plugin and install it. Then you’ll need to register for a Twitter application to get the required authentication info. Don’t worry, it’s free.

I already had a Twitter application for a previous project, so I just used that instead of registering a new one.

Fatal Error?

The Display Tweets WordPress plugin requires CURL to be enabled on your server. This won’t be an issue on any decent web host, although when I was testing locally I did run into the following fatal error:

Fatal error: Call to undefined function curl_init() in path\to\wordpress\wp-content\plugins\display-tweets-php\includes\Twitter\twitteroauth\twitteroauth.php on line 199

I solved it in XAMPP by simply uncommenting the extension=php_curl.dll line in my php.ini file.

Again, you probably won’t run into this issue, but just in case… now you know.

Authenticating and Configuring

After installing the Display Tweets plugin, hopefully error free, head on over to the Settings page (Settings → Twitter Feed) and input the following information you got from your Twitter application.

• Consumer Key
• Consumer Secret
• Access Token
• Access Token Secret

Keep the ones with the word “Secret” in it, well… secret. Then you’ll have to set the following configuration options:

• Screen Name: In my case, “themelab”
• Count: How many tweets to display, up to 200 (in my case, 2).
• Include Retweets: Self-explanatory
• Exclude Replies: Again, self-explanatory.

Note: Excluding retweets and replies may affect the actual count of tweets displayed, as the “Count” setting will retrieve the number of tweets before filtering out retweets and replies.

Placing The Tweets

Now you’ll need to decide where and how to place the tweets on your WordPress site. You have a couple options here, either including them with a shortcode (useful for placing into posts) or a template tag.

In my case, I used the following template tag and put it where my old broken Twitter feed used to be.

<?php if ( function_exists( "display_tweets" ) ) { display_tweets(); } ?>

Styling the Tweets

The markup of the tweets output from the Display Tweets plugin vary from the old method of displaying tweets.

Here’s a sample of the new markup of a single tweet, lifted directly from my current site:

<p>Wrote about an issue I had with disappearing widgets after migrating WordPress to a new URL. Here's how I fixed it: <a href="http://t.co/Zl7YzkF2JD" target="_blank">http://t.co/Zl7YzkF2JD</a><br /><small class="muted">- Sunday Jul 7 - 1:00am</small></p>

Here’s a sample of the old method markup:

<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>

Basically, paragraphs versus lists. If you used the old code, some of your CSS selectors will have to be adjusted to apply to the new markup style.

It’s hard to say which is better or worse, but at least Display Tweets’ default markup doesn’t use lame inline styles like style="font-size: 85%;".

It also looks like the Display Tweets plugin has a displaytweets_tweet_template hook included in case you want to alter the tweet HTML, something you didn’t really have much control over before.

Conclusion

While it is a bit frustrating when Twitter retires old APIs and breaks a lot of stuff, hopefully this newest version will stick for a while. Since this new method uses authentication, it’s not a free-for-all, which hopefully lessens the strain on Twitter’s resources.

Finally, thanks very much to Michael Ruddy, who developed Display Tweets. It looks like a lot of thought went into the plugin, especially when it comes to future-proofing. There’s also a GitHub repo if you’d like to contribute to the project.

Also, if you’re looking for an even quicker and easier (but not quite as customizable) way to embed a timeline onto your website, it may be worth looking into Twitter’s own embedded timelines feature. Perhaps something to delve into on a future blog post.

Anyway, thanks for reading, and go fix those broken Twitter feeds if you haven’t already.

Related posts:

1. Make A Custom Twitter Widget Without A Plugin
2. How To Create a Searchable Tweet Archive with WordPress
3. Fix WordPress Fatal error: Call to undefined function

Written by - Visit Website