Plugin Installation

  1. Download the plugin’s zip file from the Downloads section of your Account page
  2. In your WordPress dashboard go to Plugins > Add New
  3. Select the Upload button
  4. Select Choose File and select the downloaded zip file on your computer
  5. Select Install Now
  6. When prompted, select Activate Plugin

Back To Top

Creating a Ticker

  • Navigate to News Tickers > Add New
  • Add a title for your ticker
  • Select the Ticker Type tab
  • Using the buttons directly under the tab, select the type of ticker you want to display
  • Choose the settings for your ticker type. See the ticker type settings below
  • Select the Ticker Mode tab
  • Using the buttons directly under the tab, select the ticker mode you want to use
  • Choose the settings for your ticker mode. See the ticker mode settings below
  • Select the Global Settings tab
  • Choose additional settings for your ticker
  • Publish your ticker!

Back To Top

RSS Ticker Settings

RSS Ticker Settings

RSS Ticker Settings

  • Feed URLs – Add an unlimited number of feeds to display.
    • Use the + and x buttons on the right to add and delete feeds. Drag and drop the heading for each handle to re-order your feeds.
    • RSS URL – The RSS Feed URL.
  • Item count – Set the number of feed items to display per feed.
  • Link target – Open links in a new window.
  • No follow – Add “nofollow” to links.
  • Feed item arrangement – Enable specific RSS item assets and set the order.
    • Item thumbnail – Select to display the item thumbnail.
      • Max width – Set the maximum width of the thumbnail.
      • Max height – Set the maximum height of the thumbnail.
      • Permalink – Link to the RSS item.
    • Item title – Select to display the item title.
      • Permalink – Link to the RSS item.
    • Item source – Select to display the item source.
      • Before – Prepend text before the source.
      • After – Append text after thesource.
      • Permalink – Link to the RSS item.
    • Item author – Select to display the feed item author.
      • Before – Prepend text before the author.
      • After – Append text after the author.
    • Item date – Select to display the feed item date.
      • Format – Set the date format.
      • Before – Prepend text before the date.
      • After – Append text after the date.
    • Item excerpt – Select to display the item excerpt/description.
      • Excerpt length – Set the excerpt length. Set to -1 or 0 to show the full description.
      • Excerpt more – Set the more text to display after the excerpt. Surround the text with curly brackets {more text} to set a permalink.
      • Permalink – Link to the RSS item.

Back To Top

Default Ticker Settings

Default Ticker Settings

Default Ticker Settings

  • Ticker text – The text/data you want to display. You can include image links if you want to create an image rotator as well!
  • Link – Add a link to the tick (optional)
  • Target – Set a target for the link (optional)
  • NF – Set the link to “nofollow”
  • Add new ticks by clicking the + button on the right side of the ticks.
  • Delete ticks by selecting the x button on the right side of the ticks.
  • Re-arrange ticks by selecting and dragging the hamburger icon on the left side of the ticks.

Back To Top

Mixed Ticker Settings

Mixed Ticker Settings

Mixed Ticker Settings

  • Ticker Type – Select the ticker type to pull data from
  • All Ticks – Select the “Display all ticks” checkbox to load all ticks from the selected ticker type
  • Offset – Choose a specific tick from the selected ticker type.
  • Add new ticks by clicking the + button on the right side of the ticks.
  • Delete ticks by selecting the x button on the right side of the ticks.
  • Re-arrange ticks by selecting and dragging the hamburger icon on the left side of the ticks.

Back To Top

Scroll Mode Settings

Scroll mode creates a standard news ticker that can scroll left, right, up, or down.

Scroll Settings

Scroll Settings

  • Scroll direction – Set the direction you want the ticker to scroll.
    • Show first tick on init – By default, the ticker starts off-screen, but you can enable this setting to force the content to start on-screen.
  • Tick dimensions – Set a specific width and height for the ticks. When using a vertically scrolling ticker the height will define the overall height of the ticker.
  • Scroller padding – Add custom vertical padding and margins to each of your ticks.
  • Scroll speed – Set the speed of the ticker. You may need to try different speeds to get optimum results when using different fonts.
    • Pause on mouse over – Enable the checkbox to pause the ticker when user’s have their mouse over the ticker.
  • Tick spacing – Set the amount of space that should be rendered between the ticks within your ticker.

Back To Top

Rotate Mode Settings

Rotate mode creates a data rotator similar to a standard image rotator. Ticks can fade in/out, slide left, slide right, slide up, or slide down. Customize the speed, easing and navigation to your needs.

Rotate Settings

Rotate Settings

  • Rotation type – Select the rotation type.
    • Dynamic slide direction – Enable this checkbox to reverse the slide direction when previous items are selected.
  • Tick dimensions – Set a specific height for the ticks.
  • Rotator padding – Add custom vertical padding and margins to each of your ticks.
  • Auto rotate – Enable auto rotation of your ticks
    • Seconds delay – Set the amount of time each tick should display.
    • Pause on mouse over – Force the rotator to pause when the user hovers over the ticker.
  • Rotate speed – Set the speed of the rotation based on tenths of a second.
    • Rotate easing – Choose the type of easing you want to use when the ticks rotate.
  • Directional navigation – Enable the directional navigation.
    • Autohide navigation – Set the navigation to auto-hide when the user is not hovering over the ticker.
  • Control navigation – Enable the control navigation and choose the type of display.
  • Disable touchswipe – Disable touchswipe navigation on touch devices.

Back To Top

List Mode Settings

List mode allows you to create a static list for your ticks.

List Settings

List Settings

  • List padding – Add custom vertical padding and margins to each of your ticks.
  • Tick spacing – Set the amount of space that should be added between the ticks.
  • List paging – Break your list up into pages with navigation.
    • Ticks per page – Set the number of ticks to show per page.
    • Enable previous & next links – Enable previous and next links to go along with the pagination links
    • Previous – Customize the previous link text.
    • Next – Customize the next link text.

Back To Top

Global Ticker Settings

These settings will be used no matter which ticker type or ticker mode you use.

Global Settings

Global Settings

  • Display title – Show or hide the title.
  • Inline title – Float the title to the left. Only use this in scroll mode.
  • Randomly shuffle the ticks – Shuffle the ticks that are set to display.
  • Remove margin and padding from all tick contents – Force all margins and paddings of tick contents to “0”.
  • Add a play/pause button to scrolling and auto-rotating tickers – Allow user’s to start/stop scrolling and auto-rotating tickers.
  • Ticker width – Set the width of the ticker. This usually isn’t needed as the ticker will auto-size, but may be necessary in certain situations.
    • Leave blank or set to “0” if you want the ticker width to be responsive.
  • Offset ticks – Set the amount of pixels ticks should start and end off the screen. Used for scrolling and rotating tickers.
  • Display ticks in a grid – Choose to display the ticks in a grid for any mode.
  • Render empty rows – Choose to render empty table rows.
  • Force equal column width – Force the columns of your grid to be equal widths.
  • Columns – Set the number of columns for the grid.
  • Rows – Set the number of rows for the grid.
  • Cell padding – Set the padding for each grid cell.
  • Remove padding on table edges – Remove padding on the edges of the grid.

Back To Top

Settings Overrides

For the most part the settings you set for your ticker will be all you need. But, suppose you would like to use the same ticker in multiple parts of you site with minor differences. Most settings include attribute overrides that you can add to shortcodes or direct functions to modify the settings of a ticker.

Shortcode attribute overrides

Add the an attribute with the override name and value to your shortcode.

Example: The following sets the rotate delay to 4 seconds, hides the ticker title, adds some custom classes, and adds a unique ID.

[ditty_news_ticker id="15" rotate_delay="4" title="0" class="blue-tickers, custom-class" unique_id="56"]

Direct function attribute overrides

Create an attributes array to pass with your function. Add key/value pairs to override any settings.

Example: The following sets the scroll direction, scroll speed, tick spacing, and a unique ID.
*Note: Custom classes are not added to the attributes. They are passed separately as the second argument.

<?php
$atts = array(
  'scroll_direction' => 'right',
  'scroll_speed' => 7,
  'scroll_tick_spacing' => 30,
  'unique_id' => 10023
);
ditty_news_ticker( 15, 'my-custom-class, your-custom-class', $atts );
?>

Custom Classes

You can also add custom classes to your ticker by adding a class attribute to your shortcode or direct function. Add classes just like you normally would to an html element (comma separated).

Unique ID’s

If you do have the same ticker used more than once on a single page you need to set a unique_id to the duplicate tickers. This is required… or else your site will blow up! Just kidding, but it is necessary if you don’t want your tickers to act funky (add techy, jQuery description here). Unique ID’s can be anything you want, but the easiest thing to do is add a unique number.

Back To Top

RSS Ticker Overrides

Add the following attributes to your shortcode or direct function to modify your tickers settings (Reference the RSS Ticker Settings sections for descriptions of each setting):

  • rss_limit – Integer.
  • rss_target – Use “1” for true, “0” for false.
  • rss_nofollow – Use “1” for true, “0” for false.
  • rss_thumbnail_width – Integer.
  • rss_thumbnail_height – Integer.
  • rss_thumbnail_link – Use “1” for true, “0” for false.
  • rss_title_link – Use “1” for true, “0” for false.
  • rss_source_before – String.
  • rss_source_after – String.
  • rss_source_link – Use “1” for true, “0” for false.
  • rss_author_before – String.
  • rss_author_after – String.
  • rss_date_format – String.
  • rss_date_before – String.
  • rss_date_after – String.
  • rss_excerpt_length – Integer.
  • rss_excerpt_more – String.
  • rss_excerpt_link – Use “1” for true, “0” for false.

Back To Top

Scroll Mode Overrides

Add the following attributes to your shortcode or direct function to modify your tickers settings (Reference the Scroll Mode Settings sections for descriptions of each setting):

  • scroll_direction – String. Options include:
    • left
    • right
    • up
    • down
  • scroll_width –  Integer. Leave blank or “0” for auto width.
  • scroll_height – Integer. Leave blank or “0” for auto height.
  • scroll_padding – Integer.
  • scroll_margin – Integer.
  • scroll_speed – Integer.
  • scroll_pause – Use “1” for true, “0” for false.
  • scroll_tick_spacing – Integer

Back To Top

Rotate Mode Overrides

Add the following attributes to your shortcode or direct function to modify your tickers settings (Reference the Rotate Mode Settings sections for descriptions of each setting):

  • rotate_type – String. Options include:
    • fade
    • slide_left
    • slide_right
    • slide_up
    • slide_down
  • rotate_directional_nav_reverse – Use “1” for true, “0” for false.
  • rotate_height – Integer.
  • rotate_padding – Integer.
  • rotate_margin – Integer.
  • auto_rotate: Use “1” for true, “0” for false.
  • rotate_delay – Integer.
  • rotate_pause: Use “1” for true, “0” for false.
  • rotate_speed – Integer.
  • rotate_ease – String. Options include:
    • linear
    • swing
    • jswing
    • easeInQuad
    • easeInCubic
    • easeInQuart
    • easeInQuint
    • easeInSine
    • easeInExpo
    • easeInCirc
    • easeInElastic
    • easeInBack
    • easeInBounce
    • easeOutQuad
    • easeOutCubic
    • easeOutQuart
    • easeOutQuint
    • easeOutSine
    • easeOutExpo
    • easeOutCirc
    • easeOutElastic
    • easeOutBack
    • easeOutBounce
    • easeInOutQuad
    • easeInOutCubic
    • easeInOutQuart
    • easeInOutQuint
    • easeInOutSine
    • easeInOutExpo
    • easeInOutCirc
    • easeInOutElastic
    • easeInOutBack
    • easeInOutBounce
  • rotate_directional_nav – Use “1” for true, “0” for false.
  • rotate_directional_nav_hide – Use “1” for true, “0” for false.
  • rotate_control_nav – Use “1” for true, “0” for false.
  • rotate_control_nav_type – String. Options include:
    • number
    • button
  • rotate_disable_touchswipe – Use “1” for true, “0” for false.

Back To Top

List Mode Overrides

Add the following attributes to your shortcode or direct function to modify your tickers settings (Reference the List Mode Settings sections for descriptions of each setting):

  • list_padding – Integer.
  • list_margin – Integer.
  • list_tick_spacing – Integer.
  • list_tick_paging – Use “1” for true, “0” for false.
  • list_tick_count – Integer.
  • list_tick_prev_next – Use “1” for true, “0” for false.
  • list_tick_prev_text – String.
  • list_tick_next_text – String.

Back To Top

Global Ticker Overrides

Add the following attributes to your shortcode or direct function to modify your tickers settings (Reference the Global Ticker Settings sections for descriptions of each setting):

  • title – Use “1” for true, “0” for false.
  • inline_title – Use “1” for true, “0” for false.
  • shuffle – Use “1” for true, “0” for false.
  • trim_ticks – Use “1” for true, “0” for false.
  • pause_button – Use “1” for true, “0” for false.
  • ticker_width – Integer.
  • offset – Integer.
  • grid – Use “1” for true, “0” for false.
  • grid_empty_rows – Use “1” for true, “0” for false.
  • grid_equal_width – Use “1” for true, “0” for false.
  • grid_cols – Integer.
  • grid_rows – Integer.
  • grid_padding – Integer.
  • grid_remove_padding – Use “1” for true, “0” for false.

Back To Top

Suggestions?

Let us know if you have any suggestions to improve our documentation.
  • Which section(s) do you have suggestions for?
  • Please be as descriptive as possible with your suggestion. Thank you for the input!

Back To Top