Codeable info

How To Add A Recent Tweets News Ticker

Posted on by in WordPress Tutorials

One of the best alternatives to slapping a “Twitter followers” or “Twitter subscription” button on your WordPress enabled site is to simply display a ticker which shows your most recent Tweets. This feature can also be used to simply add a slick fading ticker or fill up an empty area of a theme.

To begin we will need to download three different WordPress plugins. The first is a Twitter plugin hosted at Rick’s Hideout which can be installed by downloading the plugin via the link and uploading the file to your “wp-content/plugins” folder in your site’s directory. The second download is the latest version of Jquery which can be installed in the same way as the Twitter plugin above. The third and final download is the newsticker plugin which allows you to display- you guessed it- a slick news ticker.

Before we begin this tutorial involves downloading and installing outside WordPress plugins and add-ons, if you are not comfortable with this method this tutorial is not for you.

After you have downloaded and installed the plugins mentioned above you are ready to begin editing your WordPress source files to input the Twitter ticker (you also need to activate your Twitter plugin by choosing the “activate” option under the plugin option in the admin panel).

Next you must decide where you would like to place your Twitter ticker, for instance in your header, footer or sidebar. Once you have decided where to place the ticker you must open the related source file (header.php, footer.php etc) for editing.

In the header of the file you selected you need to place the following code which will call the jquery function:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.newsticker.js"></script>

This next bit of code, which should be placed directly underneath the code segment above, calls for WordPress to use the news ticker plugin we installed:

<script type='text/javascript'>
    $(document).ready(function(){
        $("#twitter-feed ul").newsticker();
    });
</script>

This entire code segment basically tells WordPress what to use to call up the news ticker and also tells it how to utilize the ticker. The next bit of code (below) will actually tell WordPress to display the Twitter ticker, so obviously place it where you would like the ticker to appear.

Also the code needs to be customized to your individual Twitter account but more on that after the code:

<div id="twitter-feed">
    <?php twitter_messages('username', [msgs], [list]); ?>
</div>

Change the following values to reflect your Twitter account:

“username”- Obviously change the “username” tag inside the quotes to your Twitter account.

“#posts”- Change this to reflect the amount of recent posts you would like displayed, for instance if you want 10 change the entire “#posts” to “10”.

After you have edited the above tags you may continue. The next bit of code will be amended into the final line of our “style.css” source file. Just as a reiteration scroll to the bottom of the last code segment and input this code in before the final closing tag:

#twitter-feed{
    list-style-type: none;
    border: 1px solid #3a78b8;
    background: #d7e6f5;
    padding: 3px;
    margin: 0;
    font: 12px helvetica, arial, tahoma, sans-serif;
    }

Thats it! All done. A very simple tutorial for a more advanced WordPress feature. As a general tip remember to keep your WordPress plugins updated to ensure proper site security. Any outdated plugin versions cause a security risk or vulnerability which can be exploited.

)
Codeable info

Comments (5)

Comment by Jeroen Pascal Wolterink says:

Now have tweets displayed (figured out the [ ] brackets had to be left out and [list] had to be replaced with the word “true”). Problem now: tweets are not in a news-ticker… I find it strange that the newsticker plugin, which is not a WP-plugin but just a javascript file has to be placed within the plugin folder and isn’t called to correctly in your example. If I just put in src=”jquery.newsticker.js” the source isn’t found, so I used the absolute link (http://~/wp-content/plugins/jquery.newsticker.js) instead. Still no succes. Site: http://lion-pack.nl

Comment by WP Mods says:

Yes that’s a possibility. I didn’t write this tutorial myself so I’m not 100% sure. It doesn’t look like the plugin that was necessary for this tutorial has been updated for years.

Comment by Jeroen Pascal Wolterink says:

Tried this on our wordpress site, but all it did was result in a blank page being displayed (php error?) I followed instructions and jquery was/is already installed. CAn it be conflicting with other plugins using jquery maybe (there are a few jquery scripts at work already)?

Comment by iftekhar says:

Thank you so much for this great tutorial. It worked :)

Comment by Peter Mancini says:

Great tutorial! I just wrote Rick with some ideas for his plugin. Namely incorporating a hash tag filter. If you have several blogs and one twitter account you might only want tweets with a specific hash tag showing up on certain blogs or you might want to have a running tweet that follows a specific cause. All of this can use your tutorial to get it up on the blog.

Codeable info