How to Create News Tickers in WordPress
Tags: wordpress, newstickers, plugin
Published: 2021-04-26 03:03:01

If you already have a WordPress website for magazines, newspapers, or reading blogs..., you may have difficulty in drawing visitors' attention to outstanding posts because your site is crammed with too much information. To solve this, news tickers are definitely a perfect feature to make your reading site more readable, informative and outstanding!

In this post, we will show you <strong>what news tickers are, why we should use them</strong>, and <strong>how to create an impressive news ticker</strong> with only a few simple quick steps.

Let's get started!

<h2>What are News Tickers?</h2>

On some types of websites like online magazines, online newspapers, you may see some news slides scrolling at the bottom or the header, footer or sidebar. These news slides look like those in TV news programs.

By glancing at the news ticker on a TV news program or a magazine website, viewers can get the hottest and most noticeable information. There are usually many pieces of information, which are called <strong>ticks</strong>, in one news ticker.

As in the gif below, do you see the headline news running? That is how a news ticker works.

<img src="https://i.imgur.com/qvyDLkC.gif" alt="The news ticker runs in the heading WordPress website." width="1888" height="856" />

<h2>Why Should We Use News Tickers?</h2>

News tickers have various benefits for different types of website:

<ul>

   <li>For <a href="https://gretathemes.com/minimalist-magazine-wordpress-themes/">magazines</a>, news tickers help you highlight what information and posts to be noticed.</li>

   <li>For <a href="https://gretathemes.com/minimalistic-portfolio-wordpress-theme/">portfolios</a>, they draw recruiters' attention to noticeable work experience and rewards of yours.</li>

   <li>For other kinds of websites, news tickers themselves will become a highlight of the sites, to <a href="https://gretathemes.com/create-a-website-wordpress/">make your blogs</a>, for example, more attractive and professional.</li>

</ul>

Thus, news tickers are clearly a useful tool for websites' owners. More than that, it's very easy to add news tickers to your WordPress website. Let's move to the next part and get one for yourself!

<h2>How to Add News Tickers in WordPress?</h2>

There are many ways to add a news ticker.

You can use a <strong>theme pre-built with news tickers</strong> in the beginning; that would be the easiest. Just read the theme's documentation carefully.

However, not every theme has a pre-made news ticker like that. So in these cases, you can think about using <a href="https://gretathemes.com/free-website-builders-for-beginners/">page builders</a> or plugins.

In this post, we will use a free plugin called<strong> Ditty News Ticker plugin</strong>. It is <strong>free, very easy to use</strong> and <strong>highly customizable</strong>. You just need to download and activate it on Dashboard.

You can read more about how to install a plugin <a href="https://gretathemes.com/install-wordpress-plugin/">here</a>.

<img class="aligncenter" src="https://i.imgur.com/HEUsktY.png" alt="Ditty News Ticker is a free plugin that helps you make news tickers." width="1894" height="862" />

Now, let's hesitate no more and follow our 3 steps to have an amazing news ticker on your site:

<h3>Step 1: Add a New News Ticker</h3>

First, go to <strong>News Ticker</strong> &gt; <strong>Add New</strong>.

<img class="aligncenter" src="https://i.imgur.com/a23LpJE.png" alt="Add a new news ticker" width="1894" height="863" />

On the next screen, you will see 5 tabs below:<strong> Add Title, Shortcode, Ticker Mode, Ticker Type and Global Settings</strong>. These tabs are used to configure and display your news tickers.

<img class="aligncenter" src="https://i.imgur.com/XOAlxjf.png" alt="These tabs are used to configure and display your news tickers in your WordPress website." width="1891" height="860" />

Do you think there are too many things to keep in mind? Don't worry, we will make it short and clear for you:

First, give your ticker a name. Type the name in the <strong>Add Title</strong> tab. The title is usually displayed on the top of the ticker, so try to come up with an attractive name to draw visitors' attention.

<img class="aligncenter" src="https://i.imgur.com/6F7nPNK.png" alt="Name your news tickers" width="1890" height="859" />

After that, click <strong>Ticker Type</strong>, then add the content to display in the news ticker (with a link if necessary) in the <strong>Ticker Text</strong> section.

As I mentioned above, your news ticker may contain many <strong>ticks</strong>. Just click the (<strong>+</strong>) button to add one, and click the (<strong>x</strong>) button to delete.

<img class="aligncenter" src="https://i.imgur.com/JqDT7ks.png" alt="Customize quantity of ticks in your news tickers." width="1890" height="860" />

<h3>Step 2: Configure News Ticker</h3>

After having a new news ticker, you need to make it more eye-catching by configuring it.

First of all, choose how your news tickers will be displayed. Click <strong>Ticker Mode</strong>, you will see 3 options: <strong>Scroll, Rotate</strong>, and <strong>List</strong>. In fact, <strong>Scroll</strong> is the most common option, but you can decide what is the most suitable one for your site.

<img class="aligncenter" src="https://i.imgur.com/B19Rc16.png" alt="Choose how your news tickers will be displayed" width="1893" height="865" />

Once choosing one of the three options above, you can adjust the behaviour of the tickers by various tabs below.

Personally, I chose <strong>Scroll</strong> mode, so I will adjust the scrolling action. There are two important things to notice: <strong>Scroll Speed</strong> and <strong>Tick Space</strong>. Actually, you have to try many times to find out the most suitable parameters. For me, I prefer the scroll speed of 8 and the tick space of 10 pixels.

Besides, I also tick <strong>Pause on mouse over</strong> option, so that the news ticker will stop moving when I want to click on a tick.

<img class="aligncenter" src="https://i.imgur.com/9MlbjBy.png" alt=" The ticker will stop moving on clicking." width="1880" height="860" />

In addition, when clicking <strong>Global Settings</strong>, you will see some other options to customize the tickers. For example, if you want tickers' title to be on the top of them, tick on <strong>Display title</strong>. Or if you want to hide the tickers when there are no ticks, tick on the option like in the picture below.

<img class="aligncenter" src="https://i.imgur.com/trfXGKI.png" alt="When clicking Global Settings, you will see some other options to customize the tickers" width="1892" height="865" />

Now your news ticker is ready to be displayed!

<h3>Step 3: Display News Tickers</h3>

Let's come back to the <strong>Shortcode</strong> tab at the top of the screen:

<img class="aligncenter" src="https://i.imgur.com/sOG5vvf.png" alt=" The Shortcode tab is at the top of the screen" width="1893" height="862" />

The news ticker will be displayed at where you insert this shortcode. You can add it to any position: homepage's footer, post, sidebar widget,...

Normally, we do not use news tickers for the content of a post. It would be better if you place news tickers on the header, footer or sidebar. I can give you an example of a sidebar's news ticker. First, I choose a random page, go to its <strong>Preview</strong> &gt; <strong>Customize</strong> &gt; <strong>Widget</strong>.

<img class="aligncenter" src="https://i.imgur.com/M2xBWPO.png" alt="Go to Widget" width="1889" height="865" />

Then, go to <strong>Sidebar</strong> &gt; <strong>Add a Widget</strong>. You will see a lot of options for additional sidebars like Audio, Calendar,... Choose <strong>Text,</strong> then you will see a small box to add the sidebar's name and paste your shortcode:

<img class="aligncenter" src="https://i.imgur.com/1tK8gMT.png" alt="Paste your short code in Text box." width="1886" height="864" />

You have done many steps, right? But if you want to make your news tickers more beautiful, with custom colors, font size, opacity,..., you still have a little work to do. The free version of this plugin does not support users to adjust those parameters. So we only have result like the gif below:

<img class="aligncenter" src="https://i.imgur.com/I7gLHMp.gif" alt="Here is the news tickers display." width="1885" height="862" />

The news tickers don't look so beautiful, so I styled it a bit with CSS. Go to <strong>Customize</strong> &gt; <strong>Additional CSS</strong>.

<img class="aligncenter" src="https://i.imgur.com/D3n2FOb.png" alt="Style news tickers by CSS" width="1884" height="858" />

There you will see a small box to add code. These codes will change the appearance of your news tickers.

I'm using <a href="https://gretathemes.com/wordpress-themes/memory/">Memory</a> theme with the main palette of blue and white. Therefore, I added this CSS to have a news ticker of blue color:

<pre>.mtphr-dnt-tick-contents a {

color: var(--main-color);

}

.mtphr-dnt-tick-contents a:hover {

color: #000;

}

</pre>

Click <strong>Publish</strong>, and see what we've got:

<img class="aligncenter" src="https://i.imgur.com/AmUyXyF.gif" alt="Result of styling it." width="1886" height="861" />

Here is just a simple example for you. I'm sure that you can make a much more stunning news ticker by yourself. Let's give it a try!

<h2>Last Words</h2>

So that's all about <strong>adding a news ticker to your WordPress website by Ditty News Ticker plugin</strong>. We have tried our best to make it short and clear, so we hope that this post is useful for you.

Maybe you might have some wonders or questions about our tutorial, so feel free to tell us in the comment section. We are willing to show you a more detailed tutorial about advanced options in this plugin, or other methods to add news tickers without using plugins. Thus, don't forget to connect us!