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

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, Content, Featured image, Link For Read More, Icon 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

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

Bellow screen show category shortcode

Shortcode Builder

Check the Result of any Shortcode with Preview using “Shortcode Builder“
Please Go To Admin Menu -> Timeline and History Silder Pro -> Shortcode Builder.

Gutenberg Blocks

Please go to page or post and add “Gutenberg Blocks“.

Timeline Post Type Slug Setting

Please go to the Timeline settings page. You can change the Timeline Post type slug and Category Slug with your desired text.

How to display and shortcode

Timeline and History Slider Pro contain three shortcodes.

Timeline Horizontal Slider

[th-slider]

Timeline Vertical History

[th-history]

Timeline Carousel

[th-carousel]

You can also use template code.

<?php echo do_shortcode('[th-slider]'); ?>
<?php echo do_shortcode('[th-history]'); ?>
<?php echo do_shortcode('[th-carousel]'); ?>

Timeline Horizontal Slider Shortcode with all Parameters

[th-slider]

Design: [th-slider design="design-1"]
Select design for vertical timeline. Designs are design-1 to design-6.
Limit: [th-slider limit="5"]
Display 5 timeline slider on your website. You can display all post to set limit=”-1″.
Link: [th-slider link="true"]
Show/hide post link. Values are “true” OR “false”.
Link Target: [th-slider link_target="self"]
Open a link in new tab or not. Values are “self” OR “blank”.
Image Size: [th-slider image_size="medium"]
Set image size. Values are ‘thumbnail’, ‘medium’, ‘large’, ‘full’.
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.
Show Title: [th-slider show_title="true"]
Show/hide post title. Values are “true” OR “false”.
Show Date: [th-slider show_date="true"]
Whether show date or not. values are “true” or “false”.
Show Content: [th-slider show_content="true"]
Show Content or not. Values are “true” OR “false”.
Show Full Content: [th-slider show_full_content="false"]
Display full content or not. Values are “true OR false”.
Content Word Limit: [th-slider content_words_limit="70"]
You can set short content limit. You can set any numeric value.
Content Tail: [th-slider content_tail="..."]
Display three dots after short content for continue reading.
Show Read More: [th-slider show_read_more="true"]
Show read more button or not. Values are “true” OR “false”.
Read More Text: [th-slider read_more_text="Read More"]
Change read more button text. You can set desired text.
First Slide: [th-slider first_slide="0"]
Number of slide that you want to show when the slider initialize.
Slider Columns: [th-slider slidestoshow="3"]
Display number of timeline at a time in slider.
Slider Dots: [th-slider dots="true"]
Display slider dots(pagination) or not. Values are “true OR false”.
Slider Arrows: [th-slider arrows="true"]
Display slider arrows or not. Values are “true OR false”.
Autoplay: [th-slider autoplay="false"]
Start slider automatically. Values are “true” OR “false”.
Adaptive Height: [th-slider adaptiveheight="true"]
Adjust height of slider According to your content. Values are “true OR false”.
Autoplay Interval: [th-slider autoplay_interval="3000"]
Delay between two slides. Enter any numeric value.
Slider Speed: [th-slider speed="300"]
Control speed of slider. Enter any numeric value.
Slider Effect: [th-slider fade="false"]
Set slider effect. Values are “slide” OR “fade”.
Note: Use fade effect with slides_column=”1″.
Loop: [th-slider loop="true"]
Create a Infinite loop sliding. Values are “true” OR “false”. default value is “true”
Pause Hover: [th-slider hover_pause="true"]
Pause slider autoplay on hover. By default value is “true”. Options are “true” OR “false”.
Pause On Focus: [th-slider focus_pause="false"]
Pause slider autoplay when slider element is focused. By default value is “false”. Options are “true” OR “false”.
RTL: [th-slider rtl=""]
Enable RTL or not. Values are “true” OR “false”.
Post Type: [th-slider post_type="post"]
Post type support if you want to show your timeline of your WordPress posts values is “post”.
Display Specific Timeline: [th-slider posts="501,506"]
Display specific timeline post by their ids. You can pass multiple ids by comma separated.
Display By Category: [th-slider category="5,10"]
Display timeline slider by their category ID. You can pass multiple ids by comma separated.
Display Child Category: [th-slider include_cat_child="true"]
Display Child category or not. Values are “true” OR “false”.
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.
Order: [th-slider order="DESC"]
Order your timeline by “Ascending” OR “Descending”. Values are “ASC” OR “DESC”.
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)
Include Author: [th-slider include_author=""]
Enter author id to display posts of particular author. You can pass multiple ids with comma seperated. You can find id at users listing page.
Exclude Author: [th-slider exclude_author=""]
Enter author id to hide post of particular author. Works only if `Include Author` field is empty. You can pass multiple ids with comma seperated. You can find id at relevant users listing page.
Slider Lazyload: [th-slider lazyload=""]
Select option to use lazy loading in slider. Values are “ondemand”, “progressive”.
Slider Draggable: [th-slider draggable="true"]
Select draggable slider for mouse effect. Values are “true”, “false”.
Query Offset: [th-slider query_offset=""]
Exclude number of posts from starting. e.g if you pass 5 then it will skip first five post.
Note: This will not work with limit=-1.
Extra Class: [th-slider extra_class=""]
You can add extra class here.
Note: Extra class added as parent so using extra class you customize your design.

Timeline Vertical History shortcode with all parameters

[th-history]

Design: [th-history design="design-1"]
Select design for vertical timeline. Designs are design – 1 to design – 8.
Limit: [th-history limit="5"]
Display 5 timeline slider on your website. You can display all post to set limit=”-1″.
Link: [th-history link="true"]
Show/hide post link. Values are “true” OR “false.
Link Target: [th-history link_target="self"]
Open a link in new tab or not. Values are “self” OR “blank”.
Image Size: [th-history image_size="medium"]
Set image size. Values are ‘thumbnail’, ‘medium’, ‘large’, ‘full’.
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.
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”.
Show Date: [th-history show_date="true"]
Whether show date or not. values are “true” or “false”
Show Content: [th-history show_content="true"]
Show Content or not. Values are “true” OR “false”.
Show Full Content: [th-history show_full_content="true"]
Display full content or not. Values are “true” OR “false”.
Content Tail: [th-history content_tail="..."]
Display three dots after short content for continue reading.
Content Word Limit: [th-history content_words_limit="70"]
Set short content word limit. You can set any numeric value.
Show Read More: [th-history show_read_more="true"]
Show read more button or not. Values are “true” OR “false”.
Read More Text: [th-history read_more_text="Read More"]
Change read more button text. You can set desired text.
Post Type: [th-history post_type="post"]
post type support if you want to show your timeline of your WordPress posts values is “post”.
Display Specific Timeline: [th-history posts="501,506"]
Display specific timeline post. You can pass multiple ids by comma separated.
Display By Category: [th-history category="5,10"]
Display timeline by their category ID. You can pass multiple ids by comma separated.
Display Child Category: [th-history include_cat_child="true"]
Display child category or not. Values are “true” OR “false”.
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.
Order: [th-history order="DESC"]
Display timeline history by order. Values are “ASC” or “DESC”.
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)..
Pagination: [th-history pagination="true"]
Show/Hide pagination links. By default value is “true”. Values are “true” and “false”.
Pagination Type: [th-history pagination_type="numeric"]
Pagination type works when pagination set to true.Two types can be used for pagination “numeric” and “prev-next”.
Include Author: [th-history include_author=""]
Enter author id to display posts of particular author. You can pass multiple ids with comma seperated. You can find id at users listing page.
Exclude Author: [th-history exclude_author=""]
Enter author id to hide post of particular author. Works only if `Include Author` field is empty. You can pass multiple ids with comma seperated. You can find id at relevant users listing page.
Query Offset [th-history query_offset=""]
Exclude number of posts from starting. e.g if you pass 5 then it will skip first five post.
Note: This will not work with limit=-1.
Extra Class: [th-history extra_class=""]
You can add extra class here.
Note: Extra class added as parent so using extra class you customize your design.

Timeline Carousel

[th-carousel]

Design: [th-carousel design="design-1"]
Select design for carousel timeline. Designs are design – 1 to design – 6.
Limit: [th-carousel limit="20"]
Display 20 timeline carousel on your website. You can display all post to set limit=”-1″.
Link: [th-carousel link="true"]
Show/hide post link. Values are “true” OR “false.
Link Target: [th-carousel link_target="self"]
Open a link in new tab or not. Values are “self” OR “blank”.
Image Size: [th-carousel image_size="medium"]
Entered WordPress registered image size. e.g thumbnail, medium, large OR full.
Background Color: [th-carousel background_color="#ddd"]
Set background color of post value must be color code.
Font Color: [th-carousel font_color="#fff"]
Set fonts color of post according to your needs value must be color code.
Show Title: [th-carousel show_title="true"]
Show/hide post title. Values are “true” OR “false”.
Show Date: [th-carousel show_date="true"]
Whether show date or not. values are “true” or “false”
Show Content: [th-carousel show_content="true"]
Show Content or not. Values are “true” OR “false”.
Show Full Content: [th-carousel show_full_content="false"]
Display full content or not. Values are “true” OR “false”.
Content Tail: [th-carousel content_tail="..."]
Display three dots after short content for continue reading.
Content Word Limit: [th-carousel content_words_limit="70"]
Set short content word limit. You can set any numeric value.
Show Read More: [th-carousel show_read_more="true"]
Show read more button or not. Values are “true” OR “false”.
Read More Text: [th-carousel read_more_text="Read More"]
Change read more button text. You can set desired text.
Post Type: [th-carousel post_type="post"]
post type support if you want to show your timeline of your WordPress posts values is “post”.
Display Specific Posts: [th-carousel posts=""]
Enter id of the post which you want to display.
Draggable: [th-carousel draggable="true"]
Choose draggable slider for mouse effect.
Carousel Lazyload: [th-carousel lazyload=""]
Select option to use lazy loading in carousel.
Display By Category: [th-carousel category="5,10"]
Display timeline by their category ID. You can pass multiple ids by comma separated.
Display Child Category: [th-carousel include_cat_child="true"]
Display child category or not. Values are “true” OR “false”.
Exclude Specific Timeline: [th-carousel 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-carousel exclude_cat="2,9"]
Exclude specific timeline category which you do not want to display. You can pass multiple ids by comma separated.
Display slides to show: [th-carousel slidestoshow="3"]
Display number of timeline at a time in slider.
Display slides to scroll: [th-carousel slidestoscroll="1"]
Enter number of slide scroll.
Display First Slide: [th-carousel first_slide="0"]
Enter number of slide that you want to display first. Slider will initialize from that slide.
Show Dots: [th-carousel dots="true"]
Show slider dots pagination.
Show Arrows: [th-carousel arrows="true"]
Show slider prev – next arrows.
Autoplay: [th-carousel autoplay="false"]
Enable slider autoplay.
Autoplay Interval: [th-carousel autoplay_interval="3000"]
Enter slider autoplay speed.
Slider Adaptive Height: [th-carousel adaptiveheight="true"]
Auto slider height. `False` will set default slider height.
speed: [th-carousel speed="300"]
Enter slide speed.
Centermode: [th-carousel centermode="false"]
Enable slider centermode.
Loop: [th-carousel loop="true"]
Enable slider loop.
Pause On Hover: [th-carousel hover_pause="true"]
Pause slider autoplay on hover.
Pause On Focus: [th-carousel focus_pause="false"]
Pause slider autoplay when slider element is focused. By default value is “false”. Options are “true” OR “false”.
Order: [th-carousel order="DESC"]
Display timeline carousel by order. Values are “ASC” or “DESC”.
Order By: [th-carousel 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)..
Include Author: [th-carousel include_author=""]
Enter author id to display posts of particular author. You can pass multiple ids with comma seperated. You can find id at users listing page.
Exclude Author: [th-carousel exclude_author=""]
Enter author id to hide post of particular author. Works only if `Include Author` field is empty. You can pass multiple ids with comma seperated. You can find id at relevant users listing page.
Query Offset [th-carousel query_offset=""]
Exclude number of posts from starting. e.g if you pass 5 then it will skip first five post.
Note: This will not work with limit=-1.
Extra Class: [th-carousel extra_class=""]
You can add extra class here.
Note: Extra class added as parent so using extra class you customize your design.

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.

Note: Put orderby='menu_order' order="ASC" and set order parameter in plugin shortcode for custom ordering.

Template Structure + Overriding templates via a theme

The template files of timeline and history contain the markup and template structure for the front-end of your site. If you open these files you’ll notice they all contain many hooks which will allow you to add / move content without having to edit the template files themselves. This method protects even further against any upgrade issues as the template files can be left completely untouched.

Alternatively, you can edit these files in an upgrade safe way through overrides. Simply copy it into a directory within your theme named /timeline-and-history-slider-pro, keeping the same file structure.

Example : To override the timeline and history slider pro design file simply copy file from timeline-and-history-slider-pro/templates/history/design-1.php to yourtheme/timeline-and-history-slider-pro/history/design-1.php

The copied file will now override the timeline and history default template file. Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost.

The following template files can be found within the /timeline-and-history-slider-pro/templates/ directory:

Click Here To See Template Hierarchy
- design-1.php to design-8.php
- loop-start.php
- loop-end.php
- design-1.php to design-6.php
- loop-start.php
- loop-end.php
- design-1.php to design-6.php
- loop-start.php
- loop-end.php