Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Add a Scrolling News Ticker in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add a scrolling news ticker to your WordPress site?

Television networks often use news tickers to highlight important stories. This is a great way to get the visitor’s attention, so you might want to add a news ticker to your website and then highlight special deals, popular posts, and other important content.

In this article, we will show you how to add a scrolling news ticker in WordPress.

How to Add a Scrolling News Ticker in WordPress

What Is a Scrolling News Ticker?

A news ticker is a single line of text that scrolls continuously across the screen. It typically shows current news items, sporting results, live financial and currency information, and weather information.

This is similar to how you might use a sticky floating footer bar.

Tickers are a great way to display small snippets of information in an eye-catching way. Since the content is always scrolling, you can also use tickers to show lots of information in a limited space.

For example, you might use a news ticker to display your best-performing posts, announce an upcoming sale, or share other useful information.

With that being said, let’s look at how to add a scrolling news ticker to your WordPress blog or website.

How to Add a Scrolling News Ticker in WordPress

The best way to add a scrolling news ticker to your website is by using Ditty, one of the best WordPress news plugins. This plugin allows you to add moving, scrolling, and sliding content to your website and then change the animation’s direction, spacing, speed, and styling.

The first thing you need to do is install and activate the Ditty plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to go to Ditty » Add New in the WordPress dashboard and then click the ‘Add Default’ button.

Adding a ticker to your WordPress website

You can now create the first item in the ticker. In the ‘Content’ box, simply type in the text that you want to show on the scrolling ticker.

Here, you might make an announcement or share some useful information, similar to a website banner. For example, you could let shoppers know about a scheduled sale or recent posts.

Adding content to an online ticker

You can also add links to the news item so that people can easily visit the page or post featured in the ticker.

To do this, just add a URL to the ‘Link’ field.

Adding links to a website ticker

You can also add a link title, mark the URL as nofollow, and more.

To make the most out of the ticker, you may want to add multiple news items by clicking on the ‘Update Item Settings’ button.

Adding a scrolling news ticker to WordPress

The preview will now update to show the item you just created.

To go ahead and add another item to the ticker, click on the ‘Add Item’ button.

Adding items to a scrolling news ticker

You can now click ‘Add Default’ and create the item by following the process described above.

Simply repeat these steps to add more items to the ticker.

When you are happy with your items, you may want to change the order in which they appear in the ticker. To do so, simply grab the item you want to change and drag and drop it into a new position.

Changing the order of ticker items in a scrolling newsfeed

By default, Ditty shows your items in a list.

Since you want to create a scrolling ticker, click on the ‘Display’ tab.

Creating an animated ticker in WordPress

On this screen, click the ‘Change Type’ link.

In the popup that appears, select ‘Ticker’ and then click ‘Update Type’.

How to create a scrolling ticker in WordPress

You can now change how the ticker looks and acts on your WordPress website.

This includes changing the scroll direction, speed, and spacing between ticker items.

Customizing an animated ticker

You can also choose between different styles for the ticker container, items, titles, and more. Most of these settings are self-explanatory, so it’s worth going through them to see what changes you want to make.

When you are happy with how the ticker is set up, click on the ‘Save Ditty’ button.

Saving the ticker settings in WordPress

After that, you are ready to add the ticker to your site using a shortcode. To get this shortcode, go ahead and click on the ‘Settings’ tab.

Now, copy the value in the ‘Shortcode’ field.

Adding a ticker to a website using shortcode

With that done, you can add the shortcode to any page, post, or widget-ready area. For more information on how to place the shortcode, please see our guide on how to add a shortcode.

Once you have done that, just update or publish your changes to make the ticker live on your WordPress website.

News Ticker Preview

We hope this tutorial helped you learn how to add a scrolling news ticker in WordPress. You may also want to learn how to highlight new posts for returning visitors or see our expert pick of the best WordPress sidebar tricks to get maximum results.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

17 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. kzain says

    ‘ve been wanting to tweak the look of my links and this post made it super easy. The customizer option was perfect for my basic needs, but I’ll definitely keep the CSS method in mind for more advanced changes.

    Consider using a color palette tool to ensure your link color contrasts well with the rest of your website’s design.

    • WPBeginner Support says

      While the ticker would not transmit the information to your other site, you can certainly add the same information in the ticker.


  3. karbhari says

    How do i add the Latest News: title to the scrolling news, after header in main page it shows on my site.

  4. Anna Sue says

    Where do you enter the text for your ticker? My install doesn’t show some of the items you have in your screenshots.

  5. Anna Sue says

    I this may be the ticker I want but, as in many online videos about plugins, you talked and moved so fast I could get the instructions.

  6. felix says

    How do i add the Latest News: title to the scrolling news, it shows on my site, but i didnt see where to add if its lastest news or latest update etc

  7. hosam abdallah says

    very good plugin but i have aquestion
    i use artisteer to make my themes can you tell me where can i add php function to widget
    in this or from where can i add to my themes

  8. Abdulmumin says

    Hello, Please how can I add the direct function, kindly provide the ste by step instruction in adding the direct funtction.

    I added the shortcode in my about page and it worked but i added it on my home page but it didnt work…..kindly advice

    • WPBeginner Support says

      Simply copy the Direct function as shown in the last screenshot of the article and paste in your theme’s home.php or header.php. Paste it at the location where you would like your news ticker to appear.


  9. Sujani says

    thanks for giving the instructions clearly.. i had a a question where should we put the shortcode and direct function?
    do we place it in the post/page?


  10. Peter Johnson says

    It seems a great theme, as I am not a PHP developer but I want to use this theme and integrate this theme on my wordpress blog. I just want you to describe ho can I use this theme in my Blog so my latest news can be shown on top of my menu or below my main menu like a slide shown on Television. Please I need a procedure.


Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.