SumTips
SumTips
How To?

Create a jQuery Ticker Showing Latest Feed Items on WordPress

Print View Mobile View

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:

jQuery Ticker

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.

Upload controls.png (inside “images” folder), ticker-style.css (inside “styles” folder ), and jquery.ticker.js (inside “includes” folder) to appropriate directories on your server.

Then add these three lines to the theme’s header.php file:

<link rel="stylesheet" href="http://your-site.com/css/ticker-style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://your-site.com/scripts/jquery.ticker.js"></script>

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:

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

That’s it with the plugin installation part.

The plugin needs simple HTML to display the ticker:
Example:

<ul id="js-news">
    <li class="news-item"><a href="#">First latest news item.</a></li>
    <li class="news-item"><a href="#">Second latest news item.</a></li>
</ul>

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.

Grab the desired site’s feed ( I’ll use SumTips’ feed: http://feeds.feedburner.com/Sumtips ) and visit the YQL Console. Paste in the following query statement, un-check “Diagnostics”, and hit “Test”.

select title,link from rss where url="http://feeds.feedburner.com/Sumtips"

YQL Statment

In the below panel, you will get the site feed rendered in XML format:

You will also get a URL (REST query) like this:

http://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%20from%20rss%20where%20url%3D%22http%3A%2F%2Ffeeds.feedburner.com%2FSumtips%22

We will use this URL to run our ticker. Everytime you load the page, our ticker retrives latest posts by making an HTTP GET call to the YQL Web Service.

Step 3: Parse XML Data

PHP v5+ has a built-in XML reader, called SimpleXML. We will use that to parse the URL that YQL Console gave us.

Drop the following code into your theme’s functions.php file:

function jquery_feed_ticker() {
	$requestAddress = "http://query.yahooapis.com/v1/public/yql?q=select%20title%2Clink%20from%20rss%20where%20url%3D%22http%3A%2F%2Ffeeds.feedburner.com%2FSumtips%22";
	$xml_str = file_get_contents($requestAddress,0);
	$xml = new SimplexmlElement($xml_str);
	echo "<ul id='js-news'>";
	foreach ($xml->results->item as $items)
	{
		echo "<li class='news-item'><a href=".$items->link[0].">".$items->title[0]."</a></li>";
	}
	echo "</ul>";
}

Replace $requestAddress URL with your own.

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.

View Demo

Related tips: