---
title: 'Jquery News Ticker - Display Recent Blog Posts'
url: 'https://worldoweb.co.uk/2014/jquery-news-ticker-display-recent-blog-posts'
markdown: 'https://worldoweb.co.uk/2014/jquery-news-ticker-display-recent-blog-posts.md'
date: '2014-03-24'
description: 'A tutorial on how to display recent blog posts in a WordPress theme using jQuery and a news ticker script. This guide covers the process of fetching recent posts and displaying them in a news ticker format.'
taxonomy:
  category:
    - 'Web Development'
    - WordPress
  tag:
    - Script
    - Tutorial
    - jQuery
---

# Jquery News Ticker - Display Recent Blog Posts

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

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

In this tutorial, I will show you how to display your recent blog posts in your WordPress theme in a news ticker style format using the jQuery news ticker script. If you want to link to the external RSS feed(s) try this [tutorial](https://www.worldoweb.co.uk/2014/jquery-news-ticker-display-external-rss-feeds "Jquery News Ticker - Display External RSS Feeds"). 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").

### Prerequisites

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

### Download

Updated 15th February 2016 [WP-News-Ticker-Blog-1.0.zip](https://worldoweb.co.uk/2014/jquery-news-ticker-display-recent-blog-posts/WP-News-Ticker-Blog-1.0.zip)

## Instructions

Upload the JS, Images and CSS folder to your theme directory. Add the following code to functions.php.

```php
<?php //start jquery news ticker blog posts

/***
*
Enqueue Scripts
Add scripts to the theme head
*
***/
function wow_jq_inews_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_inews_load' );

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

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

    </script>

<?php }

add_action('wp_footer', 'wow_jq_inews_execute');

/***
*
Add News Ticker  - call the function wow_add_jq_inews(); in your theme
*
***/

function wow_add_jq_inews()
{
  $recent_posts = wp_get_recent_posts();?>

    <ul id="js-news" class="js-hidden">
        <?php foreach( $recent_posts as $recent ){
        echo '<li class="news-item"><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' .$recent["post_title"].'</a> </li> ';
    }
?>
</ul>
<?php } ?>

```

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

```php
<?php wow_add_jq_inews();?>
```

## FAQs

#### How many posts does it fetch?

wp\_get\_recent\_posts() fetches the latest 10 posts by default but does accept arguments.

```php
$args = array( 'numberposts' => '5' );//displays 5 posts
$recent_posts = wp_get_recent_posts( $args );
```

Check out the [WordPress Codex](https://codex.wordpress.org/Function_Reference/wp_get_recent_posts) for a more comprehensive list of arguments

#### Can I change any of the news ticker settings?

The jQuery news ticker comes with options that you can change in function wow\_jq\_inews\_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%20Recent%20Blog%20Posts&url=https%3A%2F%2Fworldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-recent-blog-posts&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fworldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-recent-blog-posts "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fworldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-recent-blog-posts&title=Jquery%20News%20Ticker%20-%20Display%20Recent%20Blog%20Posts "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fworldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-recent-blog-posts "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Jquery%20News%20Ticker%20-%20Display%20Recent%20Blog%20Posts%20https%3A%2F%2Fworldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-recent-blog-posts "Share on Bluesky") [Email](mailto:?subject=Jquery%20News%20Ticker%20-%20Display%20Recent%20Blog%20Posts&body=https%3A%2F%2Fworldoweb.co.uk%2F2014%2Fjquery-news-ticker-display-recent-blog-posts "Share via email") 

#### Tags

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

##### Next

 [ ← Review of the Week - Infinite Slider WP Plugin ](https://worldoweb.co.uk/2014/review-week-infinite-slider-wp-plugin) 

OR

##### Previous

 [ Jquery News Ticker - Display External RSS Feeds → ](https://worldoweb.co.uk/2014/jquery-news-ticker-display-external-rss-feeds)

---

## Navigation

- Previous: [Review of the Week - Infinite Slider WP Plugin](https://worldoweb.co.uk/2014/review-week-infinite-slider-wp-plugin.md)
- Next: [Jquery News Ticker - Display External RSS Feeds](https://worldoweb.co.uk/2014/jquery-news-ticker-display-external-rss-feeds.md)