The following tutorial will display your latest posts in a news ticker format. The code is basically the same as my popular post Display Your Latest Posts on a Static Page except that the output is in a unordered list for the jQuery news ticker to work. This tutorial is meant for non WordPress websites to access their WordPress powered blog although it can be easily adapted to work in WordPress pages and posts.
Prerequisites
A PHP web server or hosting, preferably a Linux server running WordPress, although this works with other servers. Please Note: This will not work if your blog is on a different server. A little knowledge of PHP, HTML and CSS is recommended but not required. We will be using the jQuery News Ticker script.
Download Source Files
Retrieving the WordPress Posts
In order to retrieve our blog posts we require to link to the WordPress blog header. At the very top of your page add the following above the doctype.
1 | <?php require('wp-blog-header.php');?> |
Please Note: The path has to be relative so you can’t link to the file directly using http://
Now in the body (<body></body>) section you need to add the following snippet of code to retrieve the posts.
1 2 3 4 5 6 7 8 9 10 | <?php $args = array( 'numberposts' => 10, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date"); $postslist = get_posts( $args );?> <ul id="events" class="js-hidden"> <?php foreach ($postslist as $post) : setup_postdata($post); ?> <li class="news-item"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endforeach; ?> </ul> |
Adding the jQuery News Ticker
Upload ticker-style.css and news_ticker.min.js to your server. Add the following in-between the opening and closing head tags (<head></head>) in your page.
1 2 3 | <link href="ticker-style.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="news_ticker.min.js"></script> |
Underneath, still in-between the opening and closing the head tags, you want to add a little bit of jQuery to initialize the news ticker script
1 2 3 4 5 | <script type="text/javascript"> $(function () { $('#events').ticker(); }); </script> |
The news ticker script comes with various settings, if needed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $(function () { $('#events').ticker( speed: 0.10, // The speed of the reveal ajaxFeed: false, // Populate jQuery News Ticker via a feed feedUrl: false, // The URL of the feed // 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 ); }); |
You can style the CSS to suit your needs.
Conclusion
For a more in-depth detail please read index.php in the zip file. If you are having any trouble please feel free to leave a comment or email me. I would like to thank the Rhodri George for creating the jQuery News Ticker script.
