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

Connecting to Facebook

  • Before you can use Ditty Facebook Ticker to display Facebook data you need to connect to Facebook's API.
  • Go to News Tickers > Settings > Facebook and follow the instructions to connect.

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

Facebook Posts Settings

[caption id="attachment_1753" align="alignnone" width="964"]Facebook Posts Settings Facebook Posts Settings[/caption]
  • Handles – Add handles of the page feeds you would like to display.
    • Use the + and x buttons on the right to add and delete handles. Drag and drop the heading for each handle to re-order your handles.
    • Handle – Add the Facebook handle. Make sure the handle type you have selected in the drop down is correct.
    • Type - Select the type of feed the handle relates to.
  • Feed options – Set the number of posts to show per feed and add links.
    • Posts per handle – Set the number of posts to display for each handle.
    • Post types – Select the post types to display
    • Date format – Format the posted date of the posts
    • Default style - Apply the default css included with the plugin

Back To Top

Facebook Images Settings

[caption id="attachment_1754" align="alignnone" width="770"]Facebook Images Settings Facebook Images Settings[/caption]
  • Facebook images – Add handles of the albums you would like to display.
    • Use the + and x buttons on the right to add and delete handles. Drag and drop the heading for each handle to re-order your handles.
    • Handle – Add the Facebook handle. Make sure the handle type you have selected in the drop down is correct.
    • Type - Select the type of album the handle relates to.
  • Image options – Set the number of images to show per feed and the size of the images.
    • Images per handle – Set the number of images to display for each handle.
    • Image permalink – Add permalinks to the images
    • Default style - Apply the default css included with the plugin
  • Image caption options - Set the display options of image captions
    • Caption position - Set the position of the captions
    • Caption elements and order - Toggle the display of image element. Drag & drop to re-order.
      • Date - Display the date of images.
        • Format - Set the date format.
      • Caption - Display the caption for images.
      • Album title - Display the album title for images.

Back To Top

Default Ticker Settings

[caption id="attachment_1790" align="alignnone" width="817"]Default Ticker Settings Default Ticker Settings[/caption]
  • 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

[caption id="attachment_1791" align="alignnone" width="816"]Mixed Ticker Settings Mixed Ticker Settings[/caption]
  • 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. [caption id="attachment_1734" align="alignnone" width="745"]Scroll Settings Scroll Settings[/caption]
  • 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. [caption id="attachment_1735" align="alignnone" width="593"]Rotate Settings Rotate Settings[/caption]
  • 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. [caption id="attachment_1736" align="alignnone" width="745"]List Settings List Settings[/caption]
  • 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. [caption id="attachment_1737" align="alignnone" width="723"]Global Settings Global Settings[/caption]
  • 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

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?

[gravityform id="4" title="false" description="true"]

Back To Top