Jquery News Ticker - Display Recent Blog Posts

Published on March 24, 2014 by Tracy Ridge in

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. 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 are recommended but not essential.

Download

Updated 15th February 2016 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 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.