Jquery News Ticker – Display Recent Blog Posts

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

Instructions

Upload the JS, Images and CSS folder to your theme directory. Add the following code to functions.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 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.

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

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