Installation

Installation of Timeline and History Silder Pro requires a few small clicks. To install the plugin, please use the following steps:

  • Buy Timeline and History Silder Pro and Upload the ‘timeline-and-history-slider-pro’ folder to the ‘/wp-content/plugins/’ directory
  • Upload the ‘timeline-and-history-slider-pro’ folder to the ‘/wp-content/plugins/’ directory.
  • Activate the Timeline and History Silder Pro plugin through the ‘Plugins’ menu in WordPress.
  • Enter the Plugin License

Timeline and History Silder Pro should now be installed successfully!

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

You can also use template code.

Shortcode Parameters

Timeline Horizontal Slider Shortcode with all parameters
Where parameters are:

  • 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.)
  • Include Child Post or not: [th-slider include_cat_child="true"](If you are using parent category timeline then whether to display child category timeline or not. Values are “true” OR “false”)
  • Slider Columns: [th-slider slidestoshow="3"] (Display number of timeline at a time in slider.)
  • Slider Pagination and Arrows: [th-slider dots="true" arrows="true"]
  • 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-5)
  • 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"] (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"] (Limit the Content.)
  • Show Read More: [th-slider show_read_more="true"] (Show read more button or not. values are “true” OR “false”)
  • Content Tail (Continue Reading): [th-slider content_tail="..."] (Display three dots as a continuous reading.)
  • Link Behaviour: [th-slider link_target="self"] (Choose link behaviour. Values are “self” OR “blank”)
  • Read More Text: [th-slider read_more_text="Read More"] ( Text to show instead of Read More.)
  • 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.)
  • Exclude Specific Timeline: [th-slider exclude_post="502,504"] (exclude some timeline which you do not want to display.)
  • Exclude Category: [th-slider exclude_cat="2,9"] (Exclude specific timeline category which you do not want to display.)
  • 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/false)
  • Link: [th-slider link="true"] (show/hide post link. Values are true/false.)

Timeline Vertical shortcode with all parameters
Where parameters are:

  • 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.)
  • Include Child Post or not: [th-history include_cat_child="true"] (If you are using parent category timeline then whether to display child category timeline 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-6)
  • 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"]
  • Show Full Content: [th-history show_full_content="true"] (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"] (Limit the Content.)
  • Show Read More: [th-history show_read_more="true"] (Show read more button or not. values are “true” OR “false”)
  • Content Tail (Continue Reading): [th-history content_tail="..."] (Display three dots as a continuous reading.)
  • Link Behaviour: [th-history link_target="self"] (Choose link behaviour. Values are “self” OR “blank”)
  • Read More Text: [th-history read_more_text="Read More"] ( Text to show instead of Read More.)
  • 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.
  • Exclude Specific Timeline: [th-history exclude_post="502,504"] (exclude some timeline which you do not want to display.)
  • Exclude Category: [th-history exclude_cat="2,9"] (Exclude specific timeline category which you do not want to display.)
  • 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/false)
  • Link: [th-history link="true"] (show/hide post link. Values are true/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.