Jquery News Ticker - Display External RSS Feeds

Published on March 24, 2014 by Tracy Ridge in

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

WP-News-Ticker-Rss-1.0.zip

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

<?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

<?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()

JAVASCRIPT

$(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.