{"id":17485,"date":"2020-12-12T15:00:29","date_gmt":"2020-12-12T14:00:29","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=17485"},"modified":"2020-12-17T11:44:01","modified_gmt":"2020-12-17T10:44:01","slug":"how-to-add-news-ticker-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-news-ticker-wordpress\/","title":{"rendered":"How to Add a News Ticker to Your WordPress Website"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]You know those slides that appear at the bottom of television stations that serve to put emphasis on breaking news, recent trends, or any major happenings? Otherwise known as news tickers, these useful elements can also be a great addition to any WordPress-powered website out there.
\n[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Newsflash <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In case you\u2019re not using one of the blog & magazine WordPress themes<\/a> that already come with the ability to add this feature to your website, we will show you how you can add a news ticker in WordPress with the help of a plugin. But first, let\u2019s take a quick look into why you should consider adding one to your website in the first place.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

The Benefits of Using a News Ticker on Your Website<\/h2>\n

[\/vc_column_text][vc_column_text]Thanks to their dynamicity and the ability to quickly display any text you want, news tickers are a rather convenient way of sharing fresh, relevant, and important bits of information with your website visitors.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Not only can you use a news ticker to list your most popular articles<\/strong> (or the latest news, if you\u2019re a newspaper-based website), you can also use it to highlight any major happenings that revolve around your company or brand<\/strong>, emphasize any special offers, discounts and other major deals related to your products and services, and any other type of information your visitors can find valuable. Since these tickers make the text move on your page, they are great for attracting the attention of users and helping them obtain information in an efficient and practical manner.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Without further ado, here is how to add a news ticker into your WordPress site.
\n[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”blog-magazine-banner”][vc_empty_space height=”81px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Adding a News Ticker in WordPress Using a Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]First things first, go ahead and install a WordPress plugin<\/a> named Ditty News Ticker<\/a> and then activate it.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Ditty <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This is a multi-functional data display plugin that allows for easy insertion of custom news tickers to your WordPress site. You can use it to add a news ticker to your WordPress site anywhere you want \u2013 be it a bottom of the page or the sidebar area. Ditty News Ticker will allow you to add this useful element with a WordPress shortcode<\/a>, a widget, or function (which you should insert directly into your WordPress theme files).[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]After the plugin activation, you will notice a new menu item in your WordPress admin dashboard called News Tickers<\/em>.<\/strong> You should hover over it with your mouse and click on Add New<\/em><\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Once there, you will be able to assign a name to your ticker, as well as add a ticker text and a link (which is optional).
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”60px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you want, you can add an unlimited number of ticks to your ticker.<\/strong> You just have to click on the + button located in the upper right corner of each ticker item field.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]When you\u2019re done, you can select the Ticker Mode<\/em> tab. Here, you will be able to see three different modes \u2013 Scroll<\/em><\/strong> (the default one which is mostly used by television networks), Rotate<\/em>, and List<\/em>.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ticker <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In the Scroll<\/em> section, you will find some additional options to further adjust this mode according to your preferences. You have Scroll Direction<\/em>, which will set the direction at which you want your ticker to scroll. You can set the direction to left, right, up, down, and mark the option that allows content to start on-screen, called \u201cShow first tick on init\u201d (the ticker starts off-screen by default).[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ticker <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Also, there\u2019s the option to set the Tick Dimensions<\/em>, aka the specific width and height of your tick, Scroller Padding<\/em> (used to set the vertical padding of the scrolling data), Scroll Speed<\/em>, and Tick Spacing<\/em>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ticker <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The Rotate<\/em> mode section comes with a similar option like Scroll Direction, called Rotation Type<\/em>, where you can choose fade, slide left, right, up, down, and can have the option to mark the Dynamic slide direction.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You can also set your tick to Auto Rotate, insert your preferred Tick Dimensions, as well as the Rotator Padding and Speed.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ticker <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you want, you can also enable the Directional Navigation<\/em> options, Control Navigation<\/em> options, and Disable Touchswipe<\/em> navigation on touch devices.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ticker <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Finally, the List<\/em> mode section comes with three different options \u2013 List Padding<\/em><\/strong> (which brings the ability to add custom vertical padding and margins to your ticks), Tick Spacing, and List Paging<\/strong><\/em> (which allows you to break your list up into pages by adding navigation and setting the number of ticks to show per page).[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ticker <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In the Global Settings<\/em> tab, you also get access to some general ticker options. For example, you can enable the display of the ticker title and set its position, static width of your ticker, set the offset ticks, and so on. In addition, in the Ticker Options panel, you can choose whether to hide a ticker if no ticks exist, randomly shuffle your ticks, reverse their order, etc.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ticker <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once you are done with customizing your ticker, you will also have different options at your disposal when it comes to inserting the ticker into your page, post, or anywhere else on your website.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Above all the ticker settings, you will notice the option that allows you to copy the shortcode<\/strong> (you can either copy it manually or hit the Select Shortcode button), which you can later paste anywhere in your page or post.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Alternatively, you can copy the code of the PHP function in the same manner and insert it in one of your theme files<\/strong> (Appearance >> Theme Editor<\/em>).[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ticker <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]There\u2019s also the option to use a Ditty News Ticker widget (by heading to Appearance >> Widgets<\/em>) and add it into any sidebar area on your website.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"News <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you have multiple tickers, simply select the ticker you wish to display within the widget itself and hit the Save<\/em> button.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"News <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Here\u2019s what our news ticker looks like once we inserted it into one of the widget areas:
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Bridge <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Wrapping Up<\/h2>\n

[\/vc_column_text][vc_column_text]News tickers are great additions to any website as they\u2019re capable of highlighting any major news or latest happenings related to your business<\/strong>. By incorporating this handy feature into your WordPress website, you can make your pages look more dynamic and engaging, simultaneously creating a website that appears more informative and user-friendly as a whole. If you use the Ditty News Ticker plugin to add this element to your site, you have plenty of options at your disposal \u2013 you can place it anywhere you want on your page, post, or add a widget<\/a> called Ditty News TIcker into your sidebar. You can choose whether you want your tickers to scroll, rotate, or appear in the form of a list. Moreover, you can further customize each ticker to completely fit your preferences as well as the general vibe of your website. And one of the best things about it is that it\u2019s all quite easy to do if you follow this guide.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

News tickers are a convenient way of sharing relevant bits of information with your site visitors. Here is how to add a news ticker in WordPress with a plugin.<\/p>\n","protected":false},"author":2,"featured_media":17601,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,15,4,13],"class_list":["post-17485","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/17485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=17485"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/17485\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/17601"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=17485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=17485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=17485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}