Skip to main content Jump to list of all articles
Worldoweb Logo

Display WordPress Posts as a News Ticker

The following tutorial will display your latest WordPress 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 an unordered list for the jQuery news ticker to work. This tutorial is meant for non WordPress websites to access their WordPress powered blog. To add a news ticker to your WordPress powered blog to display your latest posts try this tutorial. To add a news ticker to your WordPress blog with external RSS feeds try this tutorial.

News Ticker-WordPress 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

Updated 24th March 2014

Download WordPress News Ticker
2446 downloads

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.

<php require('wp-blog-header.php');//link to your blog-header.php using relative path
	/*if you are getting 404 errors uncomment the next 2 lines*/
	//status_header(200);
	//nocache_headers();
?>

Please Note: The path has to be relative so you can’t link to the file directly using https://

Now in the body (<body></body>) section you need to add the following snippet of code to retrieve the posts.

<?php
	/*Code to fetch our WP Posts. Arguments (numberposts etc)) can be changed*/
    		$args = array( 'numberposts' => 6, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
    		$postslist = get_posts( $args );?>
			<ul id="events" class="js-hidden">
				<?php /*Outputs our posts in a unordered list required for the jQuery script to run*/
    	 				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 the folders CSS, Images and JS folders to your server. Add the following in-between the opening and closing head tags (<head></head>) in your page.

<!--Links to CSS and JS files-->
<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/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

<script type="text/javascript">
    	$(function () {
        	$('#events').ticker();
    	});
</script>

FAQs

Can I change any of the news ticker settings?

The jQuery news ticker comes with options that you can change.

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

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.

Discover more from WorldOWeb

Subscribe to get the latest posts sent to your email.

Topics:

Next Article

OR

Previous Article

18 replies on “Display WordPress Posts as a News Ticker”

maintenance dentaire
maintenance dentaire On

thanks for the step by step explanations, i will try it on my blog.
I hope i will not made mistakes.

Pamplemousse
Pamplemousse On

Hello, the_permalink(); do not return friendly URL, how can i do to display them ?

Pamplemousse
Pamplemousse On

Ok it’s working. I was testing displaying draft post only. they appear not friendly. but published article appear friendly, so it’s good for me! 🙂
Thanks for helping me!

troy
troy On

Actually Tracy, I think I’m looking for something different.
I would like to add my posts on my front page of my wordpress website, without changing my default settings to posts only on the home page, As I have it set up purposly to only show my static page.
I would like it to work like this.

Page structure below:
Static home page
————————-
posts that go in order here and get updated anytime i post in my blog area.
End of page

I know some things are not taking your time to help so that understandable.
Sorry i hate time suckers who want everything for free, lol
peace.

Tracy Ridge
Tracy Ridge On

So you don’t need the ticker then? There are a couple of ways of doing it. The best way would be to create a new PHP page in your theme folder and copy the contents of page.php on to it. This saves page.php for using with future static pages.
Add the following to it at the top to give the page a name:

Personally I would remove the loop from it and add the code to it directly instead of editing it through WordPress pages as you would have to install a plugin that executes PHP.

Create a new page inside the wp-admin then change the Page Attributes to the new page template.

Change the WP settings to use this page as a front page, I would recommend doing this last as you do not want to mess up a production site. You can always preview the page until you get it right.

This may be tricky at first to do as all themes have different structures and CSS. I have used an example from the TwentyEleven theme for you to have a look at.
Checkout: https://pastebin.com/SuHEi6pQ

If you get stuck give me a shout or email me your URL and I will check it out.

Troy
Troy On

Tracy, Thank you! I tweeted this out for you. I also followed you on Twitter.
This is so valuable. I’ll read the directions and well see how it goes. I’m going to stumble this page for you as this is a real benefit for everyone. Your awesome! & you know it:)

troy
troy On

Tracy, I looked at the source files there was nothing in there to open for instructions.. please let me know, thanks.

Vicky
Vicky On

Hi Tracy

Amazingly detailed and helpful tutorial I would like to attempt this on my WordPress powered site to display posts (from another page within my website) in the news ticker on my homepage (static) . You mentioned in your opening paragraph that this tutorial can be easily adapted to do so – please could you explain how?

Thanks,
Vicky

Comments are closed.

© 2024 WorldOWeb. All rights reserved