---
title: 'Jquery News Ticker - Display External RSS Feeds'
url: 'https://www.worldoweb.co.uk/2014/jquery-news-ticker-display-external-rss-feeds'
markdown: 'https://www.worldoweb.co.uk/2014/jquery-news-ticker-display-external-rss-feeds.md'
date: '2014-03-24'
description: 'A tutorial on how to display external RSS feeds using jQuery and SimplePie in a WordPress theme. This guide covers the process of fetching and displaying RSS feed items in a news ticker format.'
taxonomy:
  category:
    - 'Web Development'
    - WordPress
  tag:
    - Tutorial
    - jQuery
    - RSS
---

# Jquery News Ticker - Display External RSS Feeds

 Published on March 24, 2014 by Tracy Ridge in  [Web Development](https://www.worldoweb.co.uk/category/category:Web%20Development) 

 [WordPress](https://www.worldoweb.co.uk/category/category:WordPress) 

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](https://www.worldoweb.co.uk/2014/jquery-news-ticker-display-recent-blog-posts "Jquery News Ticker - Display Recent Blog Posts"). 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](https://www.worldoweb.co.uk/2012/display-wordpress-posts-as-a-news-ticker "Display WordPress Posts as a News Ticker").

![Display RSS](https://www.worldoweb.co.uk/user/data/wp-content/uploads/Display_External-RSS_Feeds.jpg)Image provided by [Shutterstock](https://www.shutterstock.com/pic-74518036/stock-photo-orange-rss-symbol-rendered-in-d-on-white-ground-front-view.html "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](https://www.worldoweb.co.uk/2014/jquery-news-ticker-display-external-rss-feeds/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.

### Share

 [X](https://x.com/intent/tweet?text=Jquery%20News%20Ticker%20-%20Display%20External%20RSS%20Feeds&url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-external-rss-feeds&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.worldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-external-rss-feeds "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-external-rss-feeds&title=Jquery%20News%20Ticker%20-%20Display%20External%20RSS%20Feeds "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-external-rss-feeds "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Jquery%20News%20Ticker%20-%20Display%20External%20RSS%20Feeds%20https%3A%2F%2Fwww.worldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-external-rss-feeds "Share on Bluesky") [Email](mailto:?subject=Jquery%20News%20Ticker%20-%20Display%20External%20RSS%20Feeds&body=https%3A%2F%2Fwww.worldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-external-rss-feeds "Share via email") 

#### Tags

 [ Tutorial](https://www.worldoweb.co.uk/tag/tag:Tutorial) [ jQuery](https://www.worldoweb.co.uk/tag/tag:jQuery) [ RSS](https://www.worldoweb.co.uk/tag/tag:RSS) 

##### Next

 [ ← Jquery News Ticker - Display Recent Blog Posts ](https://www.worldoweb.co.uk/2014/jquery-news-ticker-display-recent-blog-posts) 

OR

##### Previous

 [ Review of the Week - Airfile for Mac → ](https://www.worldoweb.co.uk/2014/review-week-airfile-mac)

---

## Navigation

- Previous: [Jquery News Ticker - Display Recent Blog Posts](https://www.worldoweb.co.uk/2014/jquery-news-ticker-display-recent-blog-posts.md)
- Next: [Review of the Week - Airfile for Mac](https://www.worldoweb.co.uk/2014/review-week-airfile-mac.md)