Introduction

Thank you for your interest in this plugin. If you have any questions that are beyond the scope of this help documentation, please feel free to email us at realwebcare @ gmail dot com. We’d be happy to help you.

installation

Installing 'T4B News Ticker Pro' Plugin is as simple as installing any other WordPress Plugin. If you don't know how to install plugins, please review the two options below:

1. Install by ZIP File

1 - Go to the WordPress admin panel and then navigate to Plugins > Add New > Upload.

install plugin

2 - Choose the plugin zip file named as t4b-news-ticker-pro-v1.0.zip and click the Install Now button

select file

3 - Wait untill the installation process ends. When you will see the text, Plugin installed successfully click on Activate Plugin button.

install process

4- Congratulations! you are ready to create your news ticker. Click on Settings link to setup the global settings for the news ticker.

activate plugin

2. Install by FTP

  • Upload the t4b-news-ticker-pro folder with all the files located in it to your WordPress plugin directory (/WORDPRESS-DIRECTORY/wp-content/plugins/) [e.g. www.yourdomain.com/wp-content/plugins/]
  • From your WordPress dashboard, choose Installed Plugins option under the Plugins category
  • Locate the newly added plugin and click on the Activate link to enable its features.
  • After successfully activating the plugin, you are ready to create your news ticker. Click on Settings link to setup the global settings for the news ticker.

Quick Start

We recommend you to watch this 6 minutes getting started video, and then try to create your first news ticker using various news ticker options.

global settings

GLobal Settings are mainly to control CSS & JS files. You can also set a font family for your ticker of your choice. There are 7 options here:

global settings

Options

  • Minify News Ticker CSS & JS: To minify news ticker CSS & JS files, enbale this option.
  • Enable Font Awesome in Theme: If font awesome CSS file already enqueued in your theme or any other plugins, no need to enble this option. If no font awesome CSS file is enqueued in your theme, you have to enbale this option to show font awesome icons.
  • Enable Plugin Default Google Font: Default font of the news ticker is Roboto Condensed & Open Sans. If you want to use these fonts in the ticker enable this option.
  • Enter Google Fonts URL link: If Default Google Font option is not enabled, to use a different font find a Google font that you'd like to use on your news ticker and add an URL link without http: or https: (e.g. //fonts.googleapis.com/css?family=Roboto+Condensed:400,700) here.
  • Enter Primary Font Family: Primary font is for ticker title. So, enter a font family which you want to use for ticker title (e.g. 'Oswald', sans-serif;).
  • Enter Secondary Font Family: Secondary font is for ticker content. So, enter a font family which you want to use for ticker content (e.g. 'Open Sans', sans-serif;).
  • Add View Port Meta in the Header: The viewport is the user's visible area of a web page. Browsers on tablets and mobile phones devices, scaled down the entire web page to fit the screen. If your theme doesn't have any viewport meta tag in the <head> section, enable this option to add viewport meta.

export ticker

Export Ticker:

global settings

Click on Download Export File button to generate a JSON file for you to save in your computer. This backup file contains all the configuration and setting options of your news tickers. Note that it do NOT contain posts, pages, or any relevant data, just your all news ticker options. After exporting, you can either use the backup file to restore your settings on this site again or another WordPress site.

import ticker

Import Ticker:

global settings

Select a json file to upload that you exported before from Export Ticker tab, and click on Upload file and import. Wordpress do the rest for you.

Add New Ticker

1. Navigate to News Ticker >> All News Tickers and click on Add New button to add a new news ticker.

add new

2. Enter the news ticker name and click on Add Ticker button. A ticker will be added in the ticker list table. Mouseover on the ticker name and click on Add Ticker link to start configuring ticker.

new ticker

general settings

general settings
  • Enable Ticker: Enable the news ticker to display by marking the checkbox.
  • Show in Homepage Only: If you want to show the news ticker only in homepage, mark the checkbox.
  • News Ticker Title: You can change the title of the ticker here. There are two titles filed here. One is for your regular ticker title. Another one is for regional title. If you want to show title in your regional language, simply enter your regional title in your own language in the Region Title field. Otherwise keep it blank.
  • Title Font Size: Enter the font size of ticker title.
  • Content Font Size: Enter the font size of ticker content.
  • Ticker Height: Enter height of the ticker.
  • Ticker Border Width: Enter border width of the ticker.
  • Ticker Border Radius: Enter border radius of the ticker.
  • News Ticker Type: Select what type of content you want to show in your ticker. There are five types available:
    • Categories: You can display content of your ticker from one or more categories of post. In this way, you can show multiple tickers differently by categories or you can show content of your ticker from some selected categories. If select this type, you will get the following option:
      • News Ticker Categories: Select the categories you want show on your ticker. You can select more than one category at a time.
    • Tags: You can use tags same as categories. Just you have to select content tags instead of categories to show on your ticker. If select this type, you will get the following option:
      • Select News Ticker Tags: Click on the Plus icon and you will get the lists of all tags. Select the tags you want to show on your ticker.
    • Custom Text: By selecting this type, you will get WordPress default post editor to enter custom text. Enter one sentence with or without link per line. If select this type, you will get the following options:
      • News Ticker Custom Text: Enter custom text for your news ticker. One sentence with or without link per line.
    • RSS: For RSS type, open an account in rss2json and create an API Key there. Enter that API Key in Api Key field. After that enter your rss feed URL in URL filed. If select this type, you will get the following options:
      • Enter Using Api: Enter what type of api you want to use. You can enter rss2json if your api is from rss2joson.
      • Enter Api Key: Enter api key for rss data (e.g. rss to json api key).
      • Enter URL: Enter the feed URL here (e.g. http://rss.cnn.com/rss/edition.rss).
    • JSON: You can show ticker content from any JSON file. You just have to enter the path to JSON in the URL field. If select this type, you will get the following option:
      • Enter URL: Enter path to json file.
    • Common Options in Categories and Tags: Below are the options which are common for all types:
      • Number of post: Define how many posts/news you want to show in your ticker.
      • Select Post Order: Designates the ascending or descending order of the orderby parameter. Ascending order from lowest to highest values (1, 2, 3; a, b, c). Descending order from highest to lowest values (3, 2, 1; c, b, a).
      • Select Post Order By: Sort retrieved posts by parameter. Defaults to Post Date
    • Common Options in RSS and JSON: Below are the options which are common for all types:
      • Number of post: Define how many posts/news you want to show in your ticker.
      • Select Showing Field: Select which part of the feed to show in your ticker.
      • Enable Link: Select weather you want to enable link or not.
      • Open Link in New Tab: Mark the checkbox if you want to show link in new tab.
      • Error Message: Enter an error message if rss feed or json file not loaded.

advance settings

font settings
  • Ticker Animation Type: Select ticker animation type here. There are 7 types of animation available:
    • Scroll:
    • Typography:
    • Fade:
    • Slide: There are 4 types of slide:
      • Slide Right
      • Slide Left
      • Slide Up
      • Slide Down
    • Animation Options:
      • Speed of Scrolling: You can control the spped of scrolling here. The more you increase the value, the more ticker will run faster.
      • Speed of Typography: Control the speed of typography. Increasing the value will make the ticker faster.
      • Fade In Animation Speed: Speed of fade In animation (Only for "fade" effect).
      • Ticker Delay Timer: Time between the news in milliseconds (Default: '4000')
      • Show Ticker Control: Select True if you want to show ticker control icons.
      • Auto Play Ticker: If select true, ticker will start automatically on page load.
      • Stop Ticker on Hover: Select True if you want to stop ticker on mouseover.
      • Direction of Ticker: Select in which direction you want to move ticker content.
      • Position of Ticker: Set the position of the ticker.
      • Icons for Ticker: Enter Unicode of fontawesome icon respectively for previous, next, pause, play & Bullet icon (e.g. f053 for previous icon).

color settings

Advanced Color Settings
  • Ticker Background Color: Set background color or theme color for the ticker.
  • Content Background Color: Set background color for the ticker content.
  • Control Background Color: Set background color for the ticker control.
  • Title Font Color: Set font color for the ticker title.
  • Content Font Color: Set font color for the ticker content.
  • Content Font Hover: Set font hover color for the ticker content.
  • Control Icon Color: Set icon color for the ticker control.

Shortcode

5. After configuring all the necessary fields for your news ticker click on Add Ticker Options button. Then you will get a SHORTCODE of newly created news ticker with an unique ID, which will be generated automatically. Now, paste the shortcode in your posts or pages where you would like to show news ticker and publish. Visit the newly created post/page to see the magic! :).

You can also put the below shortcode in your blog posts/pages, where you want to show News Ticker (change the "id" by news ticker):

<?php echo do_shortcode('[t4b-ticker id="1"]'); ?> ticker lists

Sources & Credits

I've used the following fonts, icons or other files as listed.