How to Add a WordPress News Ticker to Live Up Your Site?

How to Add a WordPress News Ticker to Live Up Your Site?

News tickers, referred to news scrolling modules, can be seen on the magazines and news publishing websites. They are usually used to highlight latest updates so that visitors can get the most recent news without opening up individual posts/pages.

There are multiple ways to add a WordPress news ticker, and we prefer to use a plugin named as Ditty News Ticker to get the job done. Meanwhile, you can know the detailed steps on how to display such a ticker within post content and widget-ready area.

How to Add a WordPress News Ticker via this Plugin?

As a handy data display plugin, “Ditty News Ticker” displays the breaking news related to your website in a stylish way that will draw visitors’ attentions. It’s at your option to embed custom news tickers via short codes, direct functions or a custom widget of this plguin. Till present, it has over 20,000 active installs and is available for free download through the following URL.

Download URL: https://wordpress.org/plugins/ditty-news-ticker/

About Ditty News Ticker

To install this plugin, log into the WordPress dashboard and search “Ditty News Ticker” within the “Add New” page. Just follow the pop-up prompts and you will find the plugin amongst the currently “Installed Plugins”. Alternatively, you can upload its downloaded package to the WordPress backend. For more details, refer to this plugin installation tutorial.

Add News Ticker to Dashboard

How to Set Up Your News Ticker in WordPress?

As shown, a new tab labelled as “News Ticker” has been added to the sidebar menu. Move your mouse over it and choose “Add New” to create a new ticker.

specify ticker name & type
First of all, you need to enter a preferred ticker name within the blank text field. By clicking this “View All Types” link, you can choose to use more “Ticker Type” than the default one. As you can see, there are up to 9 ticker types, and each of them comes with explanatory instructions.

Specify Ticker Name & Type

choose between different ticker types
As for “Ticker Mode”, you can choose between three options that include “Scroll”, “Rotate” and “List”. For illustration purpose, we will explain them one by one in below.

  • Scroll Mode.
    This allows you to add as many news tickers as possible within this “Ticker Items” section. Note that, the ticker “Text” and “URL” are required. If needed, you can decide whether “Target” will open in the same or new window and meanwhile add another item via this green “+” button.
  • Ticker Scroll Mode

    In the “Scroll Settings” section, you have the ability to set the scroll direction to “Left”, “Right” and “UP”. Plus, the ticket dimensions, scroller padding, scroll speed as well as tick spacing can also be edited. If needed, the news items can be paused.

    Make Scroll Settings

  • Rotate Mode.
    Inside this “Rotate Settings” section, you can firstly set the type of rotation to “Fade”, “Slide right”,” Slide left”, “Slide Down” and “Dynamic slide direction”. Below are the “Tick dimensions” and “Rotator padding” where some specific variables can be entered. It’s also possible to “Enable” auto rotate, directional navigation and control navigation, and the “Rotate speed” is set to 3 by default.
  • Set Rotate Mode

  • List Mode.
    Under the “List” mode, you are permitted to set the vertical “Padding” and “Margin” of the list container. To change the default spacing between ticks, simply enter the needed number there. There is an option to break the list up to pages by enabling the “Previous and Next Links” option.

    Set List Mode

set global settings
From the left-hand “Global Settings” bar, you’ll be able to enable “Title”, “Inline Title” and “Random Shuffle” with optional ticker width. At the same time, these ticks can be displayed in a grid, and you can choose to render “Empty Rows” and force “Equal Column Width” freely.

Set Global Settings

From this “Settings” page of Ditty News Ticker, you can use the “Visual Editor” to create tick contents, but this editor will disappear once your tickers are re-arranged. This “Quick Edit Links” can be enabled to edit your news tickers right from the frontend of the website. And the “Custom CSS” is where to add personalized styles for your tickers.

Make Ditty News Ticker Settings

Display News Ticker in a Post/Page

To do so, simply copy and paste the [ditty_news_ticker id=”227″] shortcode to the post/page content area. Note that, each ticker has its own ID, and in our case it’s “227”.

Display Ticker in Post

If you’d like to display news tickers on every post and page, just paste the shortcode from the “Direct Function” area to the theme files, such as single.php, index.php and page.php.

Display News Ticker in Widget Areas

As usual, go to “Appearance” > “Widgets” and drag this “Ditty News Ticker” widget to your needed area on the right side.

Display Ticker in Widget Area