Skip to main content Jump to list of all articles

Jquery News Ticker – Display External RSS Feeds

In this tutorial, I will show you how to display single or multiple RSS feeds using SimplePie in your WordPress theme in a news ticker style format using the jQuery news ticker script. If you want to link to your blog content try this tutorial. If you want to add a news ticker to a website that doesn’t use WordPress primarily but features a WordPress powered blog section then try this tutorial.

Display RSS
Image provided by Shutterstock

Prerequisites

Having a basic understanding of the structure of WP themes, PHP, HTML and CSS is recommended but not essential.

Download

Updated 16th February 2016

 

Instructions

Upload the JS, Images and CSS folder to your theme directory. Add the following code to functions.php. Remember to add your URL(s). As a guide I have included comments to help you understand.

<?php
/***
*
Enqueue Scripts
Add scripts to the theme head
*
***/

function wow_jq_enews_load() {
	// use get_stylesheet_directory_uri() for child themes
	wp_enqueue_style ('ticker_style', get_template_directory_uri() .'/css/ticker-style.css' );
	wp_enqueue_script('news_ticker',  get_template_directory_uri() . '/js/jquery.ticker.js',array( 'jquery' )); //includes jquery dependencies
}

add_action( 'wp_enqueue_scripts', 'wow_jq_enews_load' );

/***
*
Adds the Javascript code to the footer automatically.  See FAQs for other options
*
***/

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

 	</script>

<?php }

add_action('wp_footer', 'wow_jq_enews_execute');

/***
*
Add News Ticker - uses built in SimplePie to cache files - call the function wow_add_jq_enews(); in your theme
*
***/

function wow_add_jq_enews()
{
	function cache_time($seconds)
	{
		// change the default feed cache recreation period to 1 hours
		return 3600;
	}

	add_filter( 'wp_feed_cache_transient_lifetime' , 'cache_time' );

	//Add your external feeds multiple
	$rsslist = array( 'https://mywebsite.com/feed',
					  'https://mywebsite2.com/feed'
	);

	$rss = fetch_feed($rsslist);

	//Add single feed - Uncomment and delete above
	/*
		$url = 'https://mywebsite.com/feed';
		$rss = fetch_feed($url);

	*/

	if (!is_wp_error($rss)) :
		$maxitems = $rss -> get_item_quantity(10); //gets latest 10 items This can be changed to suit your requirements
		$rss_items = $rss -> get_items(0, $maxitems);

	endif;

?>
		<!--start of displaying our feeds-->
			<ul id="js-news" class="js-hidden">
					<?php shuffle($rss_items);
							if ($maxitems === 0) echo '<li>No items.</li>';
								else foreach ( $rss_items as $item)  :?>

								<li class="news-item">
									<a href='<?php echo esc_url($item -> get_permalink()); ?>' 
									   title='<?php echo esc_html($item -> get_title()); ?>'> <?php echo esc_html($item -> get_title()); ?></a>
								</li>
								<?php endforeach; ?>
								</ul>

<?php }//end jquery news ticker simplepie*/ ?>

You can call the function by adding the following to your theme file, ie; index.php.

<?php wow_add_jq_enews();?>

FAQs

Can I change any of the news ticker settings?

The jQuery news ticker comes with options that you can change in the function wow_jq_enews_execute()

$(function () {
    $('#js-news').ticker(
        speed: 0.10,           // The speed of the reveal
	                       // MUST BE ON THE SAME DOMAIN AS THE TICKER
        feedType: 'xml',       // Currently only XML
        htmlFeed: true,        // Populate jQuery News Ticker via HTML
        debugMode: true,       // Show some helpful errors in the console or as alerts
  	                       // SHOULD BE SET TO FALSE FOR PRODUCTION SITES!
        controls: true,        // Whether or not to show the jQuery News Ticker controls
        titleText: 'Latest',   // To remove the title set this to an empty String
        displayType: 'reveal', // Animation type - current options are 'reveal' or 'fade'
        direction: 'ltr'       // Ticker direction - current options are 'ltr' or 'rtl'
        pauseOnItems: 2000,    // The pause on a news item before being replaced
        fadeInSpeed: 600,      // Speed of fade in animation
        fadeOutSpeed: 300      // Speed of fade out animation
    );
});

Conclusion

If you are having any problems with the script or have any questions then please feel free to contact me.

10 replies on “Jquery News Ticker – Display External RSS Feeds”

Avatar of Tracy Ridge

I forgot that SimplePie uses the object cache and not transients. I was away visiting family last week and didn’t have much time to check. Try replacing the $rsslist variable with the following. On loading in the browser do a hard refresh Windows (CTRL + R) or Mac (CMD + R)

 //Add your external feeds multiple
    $rsslist = array( 'http://feeds.foxnews.com/foxnews/latest',
                      'http://rss.cnn.com/rss/edition.xml'
    );

Out of curiosity where are you displaying the news feed?

Avatar of Cody Shadle
Cody Shadle
Cody Shadle On

Sorry for the delayed response – long month. I tried replacing the $rsslist variable with your supplied code and still no dice. The site itself is actually an internal website I’m setting up for our digital signage that is around the office.

Avatar of Cody Shadle
Cody Shadle
Cody Shadle On

Unable to get this working. When checking the console, I see “Element does not exist in DOM!” which is from line 24 of jquery.ticker.js. Any ideas?

Avatar of Qino

Whats wrong with this code?. I just copy & paste the code to my function and found this:

Warning: shuffle() expects parameter 1 to be array, null given in C:xampphtdocswordpresswp-contentthemestwentyelevenfunctions.php on line 149

Warning: Invalid argument supplied for foreach() in C:xampphtdocswordpresswp-contentthemestwentyelevenfunctions.php on line 151

Avatar of Tracy Ridge

Its seems that it cannot fetch the feed somehow. Are you fetching a single feed or multiple feeds? Can you do the following above the following lines.


<?php if (!is_wp_error($rss)) :

echo var_dump($rss);?>

Save, reload and it me know what it says.

Comments are closed.