How to add a news ticker on a WordPress Page

Hello friends, Today I am going to tell you how to add a nice running text or news headlines (news ticker) in WordPress pages. In this tutorial, I am using the Divi theme. But I am sure this will work on any kind of theme without issues.

Here we are using a plugging called Ditty News Ticker which you can download from the WordPress plugin repository. Yes, it’s a free plugin :).

ditty news ticker

Step One: Install the plugin

Go to Plugins > Add New and search for Ditty News Ticker. Once you found, install it and activate it. Then you will get the News Tickers menu item in the dashboard.

First, to the News Tickers > Setting page. Put a tick on ‘Use the visual editor for ticks’ save settings. So, you can edit your text and style it. Otherwise, it will show you just a text input field and you have to style it with CSS.

ditty news ticker settings

Now go to News Tickers > Add New and give a title to your ticker. You can add your titles (news headlines) and links here. I am using the Default ticker type and as we have already activated the visual builder, we can visually style our text without much effort. I am adding some blog posts and links. You can have as many items as you want. Just create it the way you want it.

ditty news ticker

Once you add your items go to Ticker Mode Settings. I set the scroll direction to left and add a tick to ‘Show first tick on init’ so the section will not start empty. Otherwise, the section starts empty and ticks will start to come from the right edge.

ditty news ticker mode

Once all done Click on Publish.

Step Two: let’s add the news ticker to the page.

Select the shortcode and copy it.

ditty news ticker shotcode

Now go to the page you want to show the news ticker. Add a new code module and paste the shortcode. That will simply display a nice running text/ news headline section in your website.

divi code module

If you are not using Divi, don’t worry. There are many ways to add a shortcode to your page in every theme. It’s really easy with Gutenberg too.

Simply add a Shortcode block and paste the code there.

Gutenberg shortcode block

That’s it. This is the easiest way I found to add news tickers on the website. Hope this will help you guys. Thanks.

Leave a Comment