Create a jQuery Ticker Showing Latest Feed Items on WordPress

In this post I will show how you can create a jQuery Ticker displaying latest posts from a website feed on WordPress. We are going to use Yahoo! Query Language (YQL) and jQuery News Ticker plugin to set this up. Here’s how the end result will appear:

Step 1: Download and Install jQuery News Ticker plugin on WordPress

Get jQuery News Ticker plugin from its homepage. Inside the ZIP file you will find the plugin, an example, and the documentaion.

Replace code with actual StyleSheet and JavaScript file paths on your web server. If you’re already using jQuery, you can remove the second line. Also, update path of controls.png image in the StyleSheet file.

To bring the ticker to life, you’ll also need to add this code to the page:

In the next steps we will grab a RSS feed and parse it to get result as the above HTML.

Step 2: Prepare RSS Feed Data For Use

As you can see in the first image, the ticker displays the latest post titles. When a user clicks on it, he is taken to the post on the original website. To retrieve each feed item’s title and links we will use YQL.

This function will grab the XML data, read and parse the XML into a PHP variable, and display it in a loop.

Finally, place this code where you’d like to display the ticker in your theme:

<?php echo news_ticker_html(); ?>

When viewed in HTML, you will see an unordered list of post items exactly the way we want for the jQuery plugin.

That’s all! You can customize the ticker any way you want using YQL, CSS and jQuery. If you’d like to see how the ticker works, click on the below link. Do note that its not rendered using PHP; it’s plain HTML.