Documentation

Timeline and History Silder Pro

Getting started with Timeline and History Silder Pro

Timeline and History Silder Pro adds a Menu tab in WP Admin side with the name “Timeline Slider Pro” where you can add new Timeline post and etc, edit and delete.

Screen shows “Timeline Slider Pro” tab in the left side and All Timeline Post added
timeline-history-pro-listing

This plugin work same like WordPress post section where you can add title and featured image as timeline image. To add a new Timeline post in plugin just need to follow few steps.

  • Go to Timeline Slider Pro Tab and click on Add Timeline
  • Add Timeline title, Add Timeline description, Add Timeline Image, Add Timeline Title, Add Timeline description and update
  • If you want to display category wise then go to Timeline Slider Pro -> Category and create a category
  • When you create a Timeline post, select the category for that post

Bellow screen shows how to add a Timeline
timeline-history-edit-page

If you want to display category wise then go to Timeline Slider Pro -> Category and select the shortcode.

Bellow screen show category shortcode
timeline-history-pro-category

How to display and shortcode

The plugin contains two shortcode.

Here is the shortcode example
[th-slider] – Timeline Horizontal Slider
[th-history] – Timeline Vertical History

You can also use template code.
<?php echo do_shortcode('[th-slider]'); ?>
<?php echo do_shortcode('[th-history]'); ?>

Shortcode Parameters

Timeline Horizontal Slider Shortcode with all parameters

  • Limit:
    [th-slider limit="5"]
    Display 5 timeline slider on your website.

  • Display By Category:
    [th-slider category="5,10"]
    Display timeline slider by their category ID. You can pass multiple ids by comma separated.

  • Include Child Post:
    [th-slider include_cat_child="true"]
    Display Child category or not. Values are “true” OR “false”.

  • Slider Columns:
    [th-slider slidestoshow="3"]
    Display number of timeline at a time in slider.

  • Slider Dots and Arrows:
    [th-slider dots="true" arrows="true"]
    Display dots and arrows or not. Values are “true OR false”.

  • Autoplay:
    [th-slider autoplay="false"]
    Start slider automatically. Values are “true” OR “false”.

  • Slider Height:
    [th-slider adaptiveheight="true"]
    Adjust height of slider According to your content.

  • Autoplay Interval:
    [th-slider autoplay_interval="3000"]
    Delay between two slides.

  • Slider Speed:
    [th-slider speed="300"]
    Control speed of slider.

  • Slider Effect:
    [th-slider fade="false"]
    Set slider effect. Values are “slide” OR “fade”. Note use fade effect with slides_column=”1″

  • Design:
    [th-slider design="design-1"]
    Select design for vertical timeline. Designs are design-1 to design-6

  • Order By:
    [th-slider orderby="date"]
    Set orderby for timeline. You can set “date” (Timeline Date), “modified” (Timeline updated date), “title” (Timeline Title), “rand” (Random), “menu_order” (Sort Order)

  • Order:
    [th-slider order="DESC"]
    Order your timeline by “Ascending” OR “Descending”. Values are “ASC” OR “DESC”.

  • Show Full Content:
    [th-slider show_full_content="false"]
    Display full content or not. Values are “true OR false”.

  • Show Content:
    [th-slider show_content="true"]
    Show Content or not. Values are “true” OR “false”

  • Content Word Limit:
    [th-slider content_words_limit="70"]
    You can set short content limit.

  • Show Read More:
    [th-slider show_read_more="true"]
    Show read more button or not. Values are “true” OR “false”

  • Content Tail:
    [th-slider content_tail="..."]
    Display three dots after short content for continue reading.

  • Link Target:
    [th-slider link_target="self"]
    Open a link in new tab or not. Values are “self” OR “blank”

  • Read More Text:
    [th-slider read_more_text="Read More"]
    Change read more button text.You can set desired text.

  • Show Date:
    [th-slider show_date="true"]
    Whether show date or not. values are “true” or “false”.

  • Display Specific Timeline:
    [th-slider posts="501,506"]
    Display specific timeline post by their ids. You can pass multiple ids by comma separated.

  • Exclude Specific Timeline:
    [th-slider exclude_post="502,504"]
    Exclude some timeline which you do not want to display. You can pass multiple ids by comma separated.

  • Exclude Category:
    [th-slider exclude_cat="2,9"]
    Exclude specific timeline category which you do not want to display. You can pass multiple ids by comma separated.

  • Post Type:
    [th-slider post_type="post"]
    Post type support if you want to show your timeline of your WordPress posts values is “post”.

  • Image Position:
    [th-slider image_position="left"]
    Set image position in your slider. values are “left”, “right”, “top”, “bottom”

  • Background Color:
    [th-slider background_color="#333"]
    Set background color of post value must be color code

  • Font Color:
    [th-slider font_color="#000"]
    Set fonts color of post according to your needs value must be color code

  • First Slide:
    [th-slider first_slide="0"]
    Number of slide that you want to show when the slider initialize

  • Show Title:
    [th-slider show_title="true"]
    Show/hide post title. Values are “true OR false”.

  • Link:
    [th-slider link="true"]
    Show/hide post link. Values are “true OR false”.

  • Loop:
    [th-slider loop="true"]
    Create a Infinite loop sliding. Values are “true OR false”. default value is “true”

Timeline Vertical shortcode with all parameters

  • Limit:
    [th-history limit="5"]
    Display 5 timeline slider on your website. default value is -1

  • Display By Category:
    [th-history category="5,10"]
    Display timeline by their category ID. You can pass multiple ids by comma separated.

  • Child Category:
    [th-history include_cat_child="true"]
    Display child category or not. Values are “true” OR “false”.

  • Background Color:
    [th-history background_color="#ddd"]
    Set background color of post value must be color code.

  • Font Color:
    [th-history font_color="#fff"]
    Set fonts color of post according to your needs value must be color code.

  • Design:
    [th-history design="design-1"]
    Select design for vertical timeline. Designs are design-1 to design-8

  • Order By:
    th-history orderby="date"]
    Set order by for timeline. You can set “date” (Timeline Date), “modified” (Timeline updated date), “title” (Timeline Title), “rand” (Random), “menu_order” (Sort Order)

  • Order:
    [th-history order="DESC"]
    Display timeline history by order. Values are “ASC or DESC”.

  • Show Full Content:
    [th-history show_full_content="true"]
    Display full content or not. Values are “true OR false”.

  • Show Content:
    [th-history show_content="true"]
    Show Content or not. Values are “true” OR “false”

  • Content Word Limit:
    [th-history content_words_limit="70"]
    Set short content word limit.

  • Show Read More:
    [th-history show_read_more="true"]
    Show read more button or not. Values are “true” OR “false”

  • Content Tail:
    [th-history content_tail="..."]
    Display three dots after short content for continue reading.

  • Link Target:
    [th-history link_target="self"]
    Open a link in new tab or not. Values are “self” OR “blank”.

  • Read More Text:
    [th-history read_more_text="Read More"]
    Change read more button text. You can set desired text.

  • Show Date:
    [th-history show_date="true"]
    Whether show date or not. values are “true” or “false”

  • Display Specific Timeline:
    [th-history posts="501,506"]
    Display specific timeline post. You can pass multiple ids by comma separated.

  • Exclude Specific Timeline:
    [th-history exclude_post="502,504"]
    Exclude some timeline which you do not want to display. You can pass multiple ids by comma separated.

  • Exclude Category:
    [th-history exclude_cat="2,9"]
    Exclude specific timeline category which you do not want to display. You can pass multiple ids by comma separated.

  • Post Type:
    [th-history post_type="post"]
    post type support if you want to show your timeline of your WordPress posts values is “post”.

  • Fa Icon Color:
    [th-history fa_icon_color="#333"]
    if you want to set fa icon color different from post color. value must be color code.

  • Add Animation to your Vertical timeline:
    [th-history animation="zoomIn"]
    Values are “bounce-in”, “bounceInUp”, “bounceInDown”, “fadeInDown”, “fadeInUp”, “flipInX”, “flipInY”, “zoomIn”.

  • Show Title:
    [th-history show_title="true"]
    Show/hide post title. Values are “true OR false”.

  • Link:
    [th-history link="true"]
    Show/hide post link. Values are “true OR false.

Timeline with Custom Order

You can display Timeline in custom order with Drag & Drop interface.
Click on Sort Timeline link on Timeline listing page, Drag timeline row and click the ‘Save Sort Order’ button to save.timeline-slider-orderNote: Put orderby='menu_order' order="ASC" and set order parameter in plugin shortcode for custom ordering.