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.

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.