---
title: 'Display WordPress Posts as a News Ticker'
url: 'https://worldoweb.co.uk/2012/display-wordpress-posts-as-a-news-ticker'
markdown: 'https://worldoweb.co.uk/2012/display-wordpress-posts-as-a-news-ticker.md'
date: '2012-11-16'
description: 'Learn how to display your latest WordPress posts in a news ticker format using jQuery.'
taxonomy:
  category:
    - 'Web Development'
    - WordPress
  tag:
    - PHP
    - Script
    - Tutorial
    - jQuery
---

# Display WordPress Posts as a News Ticker

 Published on November 16, 2012 by Tracy Ridge in  [Web Development](https://worldoweb.co.uk/category/category:Web%20Development) 

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

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](https://www.worldoweb.co.uk/2012/display-your-wordpress-recent-posts-on-a-static-page "Display Your WordPress Recent 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](https://www.worldoweb.co.uk/2014/jquery-news-ticker-display-recent-blog-posts "Jquery News Ticker – Display Recent Blog Posts"). To add a news ticker to your WordPress blog with external RSS feeds try this [tutorial](https://www.worldoweb.co.uk/2014/jquery-news-ticker-display-external-rss-feeds "Jquery News Ticker – Display External RSS Feeds").

![News Ticker-WordPress Posts](https://worldoweb.co.uk/user/data/wp-content/uploads/news-ticker.png "WordPress jQuery News Ticker")

## 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](https://www.jquerynewsticker.com/ "jQuery News Ticker") script.

## Download

Updated 24th March 2014

[News Ticker Script](https://www.worldoweb.co.uk/user/pages/downloads/WOW-News-Ticker-1.0.zip)

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

) in your page. ```html
<!--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.

```javascript
<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.

```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

For a more in-depth detail please read index.php in the zip file. If you are having any trouble please feel free to get in touch. I would like to thank Rhodri George for creating the jQuery News Ticker script.

### Share

 [X](https://x.com/intent/tweet?text=Display%20WordPress%20Posts%20as%20a%20News%20Ticker&url=https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fdisplay-wordpress-posts-as-a-news-ticker&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fdisplay-wordpress-posts-as-a-news-ticker "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fdisplay-wordpress-posts-as-a-news-ticker&title=Display%20WordPress%20Posts%20as%20a%20News%20Ticker "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fdisplay-wordpress-posts-as-a-news-ticker "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Display%20WordPress%20Posts%20as%20a%20News%20Ticker%20https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fdisplay-wordpress-posts-as-a-news-ticker "Share on Bluesky") [Email](mailto:?subject=Display%20WordPress%20Posts%20as%20a%20News%20Ticker&body=https%3A%2F%2Fworldoweb.co.uk%2F2012%2Fdisplay-wordpress-posts-as-a-news-ticker "Share via email") 

#### Tags

 [ PHP](https://worldoweb.co.uk/tag/tag:PHP) [ 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 - Visopix Ultra Mini Keyboard ](https://worldoweb.co.uk/2012/review-visopix-ultra-mini-keyboard) 

OR

##### Previous

 [ Steps to Consider Before Becoming a Web Designer → ](https://worldoweb.co.uk/2012/steps-to-consider-before-becoming-a-web-designer)

---

## Navigation

- Previous: [Review - Visopix Ultra Mini Keyboard](https://worldoweb.co.uk/2012/review-visopix-ultra-mini-keyboard.md)
- Next: [Steps to Consider Before Becoming a Web Designer](https://worldoweb.co.uk/2012/steps-to-consider-before-becoming-a-web-designer.md)