Cool Timeline Pro

⌘K
  2. Home
  4. Docs
  6. Cool Timeline Pro
  8. Shortcodes:

Shortcodes:

Short codes are the code snippets that you can simply copy and paste to your page/post where you want to display the timeline story. 

You can create your own custom short code from the table mentioned below or you can simply generate a shortcode using shortcode generator. 

Follow the below mentioned short code table for more details.

Vertical Timeline

[cool-timeline layout="default" designs="default" skin="default" category="timeline-stories" show-posts="10" order="DESC" icons="NO" animations="bounceInUp" date-format="default" story-content="short" based="default" compact-ele-pos="main-date" pagination="default" filters="no"]
Shortcode Attribute/Settings Default Value Available Options Description
Timeline Categories category=”timeline-stories” Dynamic Categories List Create Category Specific Timeline (By Default – All Categories)
Timeline Layouts layout=”default” Select your Vertical Timeline Layout from a dropdown.
Timeline Designs designs=”default” View Demos and Choose your timeline layout design from these design.
Timeline skins skin=”default” Create Light, Dark or Colorful Timeline
Date Formats date-format=”default”
  • F j January 1 (F j)
  • F j Y January 1 2019 (F j Y)
  • Y-m-d 2019-01-01 (Y-m-d)
  • m/d/Y 01/01/2019 (m/d/Y)
  • d/m/Y 01/01/2019 (d/m/Y)
  • F j Y g:i A January 1 2019 11:10 AM (F j Y g:i A)
  • Y 2019(Y)
  • custom Custom
 Select Timeline Stories dates custom formats.
Timeline Based On based=”default”
  • default For Date Based Timeline
  • custom For Custom Order based Timeline
 Show either Story Dates or custom label/text along with timeline stories.
Stories Per Page show-posts=”10″ 10 You Can Show Pagination After These Posts In Vertical Timeline.
Pagination Settings pagination=”default”
  • default Default Numbered
  • ajax-load-more Ajax Load More
 Choose your Vertical Timeline Layout Pagination Type.
Icons icons=”NO”
  • no
  • Yes
 Display Icons In Timeline Stories. By default Is Dot.
Stories Description story-content=”short”
  • short: Display small description of timeline Stories
  • full:- Display Full Description with HTML of timeline Stories.
 Timeline Stories content settings.If you would like to show HTML and All content on timeline.
Then just select a full option of content settings.
Stories Order order=”DESC”
  • DESC: DESC(2017-1900)
  • ASC:- ASC(1900-2017)
 Timeline Stories order like:- DESC(2017-1900) , ASC(1900-2017)
Category Filters Settings filters=”no”
  • no
  • Yes
Compact Layout Date&Title position compact-ele-pos=”main-date”
  • main-date On top date/label below title
  • main-title On top title below date/label
 This settings only work with Compact layout
Use these settings to change compact timeline layout date and title elements position
Animation animation=”none”
  • none
  • fade
  • zoom-in
  • flip-right
  • zoom-out
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left
  • flip-up
  • flip-down
  • flip-left
  • slide-up
  • slide-left
  • slide-right
  • zoom-in-up
  • zoom-in-down
  • slide-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right
 Add Animations Effect Inside Timeline. You Can Check Effects Demo From Animate.css.

Horizontal Timeline

[cool-timeline layout=”horizontal” category=”timeline-stories” skin=”default” designs=”default” show-posts=”20″ order=”DESC” items=”” icons=”NO” story-content=”short” date-format=”default” based=”default” autoplay=”false” start-on=”0″]

Shortcode Attribute/Settings Default Value Available Options Description
Timeline Categories category=”timeline-stories” Dynamic Categories List Create Category Specific Timeline (By Default – All Categories)
Timeline Designs designs=”default” View Demos and Choose your timeline layout design from these design.
Timeline skins skin=”default” Create Light, Dark or Colorful Timeline
Date Formats date-format=”default”
  • F j January 1 (F j)
  • F j Y January 1 2019 (F j Y)
  • Y-m-d 2019-01-01 (Y-m-d)
  • m/d/Y 01/01/2019 (m/d/Y)
  • d/m/Y 01/01/2019 (d/m/Y)
  • F j Y g:i A January 1 2019 11:10 AM (F j Y g:i A)
  • Y 2019(Y)
  • custom Custom
 Select Timeline Stories dates custom formats.
Timeline Based On based=”default”
  • default For Date Based Timeline
  • custom For Custom Order based Timeline
 Show either Story Dates or custom label/text along with timeline stories.
Story Per View show-posts=”3″ 3 You Can Show Pagination After These Posts In Vertical Timeline.
Autoplay Settings autoplay=”false”
  • false
  • true
 Enables Autoplay slide show on your timeline stories
Timeline Starting from Story e.g(2) start-on=”0″ 0
Icons icons=”NO”
  • no
  • Yes
 Display Icons In Timeline Stories. By default Is Dot.
Stories Description story-content=”short”
  • short: Display a small description of timeline Stories
  • full:- Display Full Description with HTML of timeline Stories.
 Timeline Stories content settings.If you would like to show HTML and All content on the timeline.
Then just select a full option of content settings.
Stories Order order=”DESC”
  • DESC: DESC(2017-1900)
  • ASC:- ASC(1900-2017)
 Timeline Stories order like:- DESC(2017-1900) , ASC(1900-2017)

Vertical content Timeline(Blog)

[cool-content-timeline post-type=”post” post-category=”” tags=”” story-content=”short” taxonomy=”category” layout=”default” designs=”default” skin=”default” show-posts=”10″ order=”DESC” icons=”NO” animations=”bounceInUp” date-format=”default” pagination=”default” filters=”no”]

Shortcode Attribute/Settings Default Value Available Options Description
Content Post Type post-type=”post” post Don’t Change This If You Are Creating Blog Posts Timeline or Define Content Type Of Your Timeline Like:- Posts
Taxonomy Name taxonomy=”category” category Don’t Change This If You Are Creating Blog Posts Timeline or Define Content Type Taxonomy.
Specific category(s) (Add category(s) slug – comma separated) post-category=”” Add Dynamic category Slug Show Category Specific Blog Posts. Like For cooltimeline.com/category/fb-history/, it will be fb-history
Specific tags(add tags slug) tags=”” Add Dynamic tag Slug Show Tag Specific Blog Posts. Like For cooltimeline.com/tag/fb-history/, it will be fb-history.
Timeline Layouts layout=”default” Select your Vertical Timeline Layout from a dropdown.
Timeline Designs designs=”default” View Demos and Choose your timeline layout design from these design.
Timeline skins skin=”default” Create Light, Dark or Colorful Timeline
Date Formats date-format=”default”
  • F j January 1 (F j)
  • F j Y January 1 2019 (F j Y)
  • Y-m-d 2019-01-01 (Y-m-d)
  • m/d/Y 01/01/2019 (m/d/Y)
  • d/m/Y 01/01/2019 (d/m/Y)
  • F j Y g:i A January 1 2019 11:10 AM (F j Y g:i A)
  • Y 2019(Y)
  • custom Custom
 Select Timeline Stories dates custom formats.
Timeline Based On based=”default”
  • default For Date Based Timeline
  • custom For Custom Order based Timeline
 Show either Story Dates or custom label/text along with timeline stories.
Stories Per Page show-posts=”10″ 10 You Can Show Pagination After These Posts In Vertical Timeline.
Pagination Settings pagination=”default”
  • default Default Numbered
  • ajax-load-more Ajax Load More
 Choose your Vertical Timeline Layout Pagination Type.
Icons icons=”NO”
  • no
  • Yes
 Display Icons In Timeline Stories. By default Is Dot.
Stories Description story-content=”short”
  • short: Display a small description of timeline Stories
  • full:- Display Full Description with HTML of timeline Stories.
 Timeline Stories content settings.If you would like to show HTML and All content on the timeline.
Then just select a full option of content settings.
Stories Order order=”DESC”
  • DESC: DESC(2017-1900)
  • ASC:- ASC(1900-2017)
 Timeline Stories order like:- DESC(2017-1900) , ASC(1900-2017)
Category Filters Settings filters=”no”
  • no
  • Yes
Compact Layout Date&Title positon compact-ele-pos=”main-date”
  • main-date On top date/label below the title
  • main-title top title below date/label
 This settings only work with Compact layout
Use this setting to change a compact timeline layout date and title elements position
Animation animation=”none”
  • bounceInUp
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • slideInDown
  • slideInUp
  • bounceIn
  • slideInLeft
  • slideInRight
  • shake
  • wobble
  • swing
  • jello
  • flip
  • fadein
  • rotatein
  • zoomIn
 Add Animations Effect Inside Timeline. You Can Check Effects Demo From Animate.css.

Horizontal Content Timeline(Blog)

[cool-content-timeline post-type=”post” post-category=”” tags=”” autoplay=”false” story-content=”short” taxonomy=”category” layout=”horizontal” designs=”default” skin=”default” show-posts=”10″ order=”DESC” start-on=”0″ icons=”NO” items=”” date-format=”default”]

Shortcode Attribute/Settings Default Value Available Options Description
Content Post Type post-type=”post” post Don’t Change This If You Are Creating Blog Posts Timeline or Define Content Type Of Your Timeline Like:- Posts
Taxonomy Name taxonomy=”category” category Don’t Change This If You Are Creating Blog Posts Timeline or Define Content Type Taxonomy.
Specific category(s) (Add category(s) slug – comma separated) post-category=”” Add Dynamic category Slug Show Category Specific Blog Posts. Like For cooltimeline.com/category/fb-history/, it will be fb-history
Specific tags(add tags slug) tags=”” Add Dynamic tag Slug Show Tag Specific Blog Posts. Like For cooltimeline.com/tag/fb-history/, it will be FB-history.
Timeline Categories category=”timeline-stories” Dynamic Categories List Create Category Specific Timeline (By Default – All Categories)
Timeline Designs designs=”default” View Demos and Choose your timeline layout design from these design.
Timeline skins skin=”default” Create Light, Dark or Colorful Timeline
Date Formats date-format=”default”
  • F j January 1 (F j)
  • F j Y January 1 2019 (F j Y)
  • Y-m-d 2019-01-01 (Y-m-d)
  • m/d/Y 01/01/2019 (m/d/Y)
  • d/m/Y 01/01/2019 (d/m/Y)
  • F j Y g:i A January 1 2019 11:10 AM (F j Y g:i A)
  • Y 2019(Y)
  • custom Custom
 Select Timeline Stories dates custom formats.
Timeline Based On based=”default”
  • default For Date Based Timeline
  • custom For Custom Order based Timeline
 Show either Story Dates or custom label/text along with timeline stories.
Story Per View show-posts=”3″ 3 You Can Show Pagination After These Posts In Vertical Timeline.
Autoplay Settings autoplay=”false”
  • false
  • true
 Enables Autoplay slide show on your timeline stories
Timeline Starting from Story e.g(2) start-on=”0″ 0
Icons icons=”NO”
  • no
  • Yes
 Display Icons In Timeline Stories. By default Is Dot.
Stories Description story-content=”short”
  • short: Display a small description of timeline Stories
  • full:- Display Full Description with HTML of timeline Stories.
 Timeline Stories content settings.If you would like to show HTML and All content on the timeline.
Then just select the full option of content settings.
Stories Order order=”DESC”
  • DESC: DESC(2017-1900)
  • ASC:- ASC(1900-2017)
 Timeline Stories order like:- DESC(2017-1900) , ASC(1900-2017)

How can we help?