Installation & Updation Guide

How to install Cool Timeline Pro

After purchasing Cool Timeline Pro from Codecanyon download the complete zip package of our plugin & extract it. It contains plugin documentation, Licensing and files. Now you can install our plugin in 2 ways:-

1. Direct Install via WordPress Dashboard :- Open WP-admin panel and go to Plugins > Add New > and click on Upload Plugin button. Now choose file from the extracted folder and click Install Now(check screenshot below).

After completetion of installation you can activate the plugin.


2. Install via FTP:- First you need to unzip, Now open your FTP manager and go to > /wp-content/Plugin folder. Inside it you need to upload unzipped cool-timeline-pro folder. Now go to your wordpress dashboard and click Plugins, here you can activate Cool Timeline Pro.

Back To Top

How to upgrade from free version to Cool Timeline Pro?

If you are already using free version of Cool Timeline and now want to use our Pro version. First you need to uninstall and delete the free version of Cool Timeline from your installed plugins list inside WP dashboard. Now you can install and use Cool Timeline Pro (Check how to install Pro?).

Please remember to uninstall free version before using the pro otherwise you will receive some installation error.


How to update Cool Timeline Pro Version?

If you receive a notification from code canyon regarding plugin version update then you can follow below steps to update your plugin to the latest version:-
1. Download the latest version from code canyon.
2. Un-install the plugin that you are currently using and delete it, don’t worry about your settings and timeline stories,

they will always be there inside your wp-database.
3. Now install and activate the latest version of Cool Timeline Pro (Check how to install pro?)

Back To Top

Content migration from the free to the PRO version

Remember to edit and update your all timeline stories date and year after upgrading from free to pro version. And always select same story year corresponding to a story date otherwise you will see some display errors in timeline stories order.


Note:- Please select same  Story year and Story Date.


Back To Top

Create Timeline Story

How to Add Timeline Stories.

After activation of Cool Timeline Pro, you will find a Timeline Stories tab inside your WP Dashboard menu items. Go to Timeline Stories > Add New. Here you can create a story for your timeline. Please check screenshot below and follow these points while creating a story:-

  1. You can select different icons for every timeline story.
  2. Remember to select a story year and corresponding story date before publishing your story.
  3. Select any content-type – You show show image, video and slide-show inside your story.
  4. Remember to select a featured image if you want to show image as a content-type instead of video or slide-show.
  5. You can select a story category if you want to create multiple stories. You can differentiate your timelines based upon different categories.


*Story Year and Story Date must have same years otherwise there will be an timeline order error.

Updates :- Version 2.5


Q). Why story Year field is missing from stories section ?

Ans:- Actually, We have disabled story Year field from stories section in Version 2.5 . We are representing Story Year from Story Date values. So don’t worry about Story Year.

Back To Top

Display Timeline On Your Page

How to Display the Timeline

After creating all stories you can display Cool Timeline inside any post or page. Just create a short-code by using our short-code generator inside visual editor. You can display a timeline in different styles (horizontal, vertical), colors (light,  dark, multicolor) and category specific.

Here are our different short-codes (These short-codes will work after Cool Timeline 1.5 version so please update your plugin if not working)

  • Our default short-code
    [ cool-timeline layout="default" skin="default" show-posts="20" order="DESC" icons="YES" ]
  • Category specific short-code
    [ cool-timeline layout="default" skin="default" category="enter-category-id-here" show-posts="20" order="DESC" icons="NO" ]
  • Horizontal timeline short-code
    [ cool-timeline type="horizontal" category="24" skin="default" show-posts="20" order="DESC" icons="NO" ]
  • Any content-type timeline(blog post timeline) short-code
    [ cool-timeline post-type="post" layout="default" skin="default" show-posts="20" order="DESC" icons="NO" ]


Timeline Layout:-  

You can easily choose layout of timeline  using this setting. we have added 2 types of layouts

  1. Both sided (default).
  2.  Single sided









Timeline Skin :- We have added skins for timeline using these skins you can easily change colors of your timeline. we have added  3 type of skins.

  1. Multi color skin (default)
  2. Light skin
  3. Dark skin

Timeline Stories order & Icons :-

You can display icons inside your timeline view and also manage your stories order.

Back To Top

How to Display Multiple Timelines

To create multiple timelines inside your WordPress website first you need to add multiple categories.

  1. Go to Timeline Stories > Categories and add categories for your multiple timelines.
  2. Please select  particular story category  at the time of story creation.
  3. Display timeline by generating a category specific short-code, it will help to differentiate multiple timelines.


Select story category according to your timeline


Here you check different parts of a category specific timeline (Display Multiple Timelines)


Back To Top

Cool Timeline Settings


1. Timeline Title





2. Title Heading Tag



3.Title Alignment ?



4.Display Title ?



5.Number of stories to display ?.



6.Content Length

7. Timeline default Image

 8.Stories Description?

9. Display Read More 

10. Stories Order ?

Back To Top

Style Settings

1. Container Background



2. Story Background Color


The story background is the color of each of the stories containers on the front end of your site.

3.Content Font Color


The content font color setting allows you to set the font color of your stories.

4.Circle Color

cicle color

The Circle color setting allows you to adjust the Year circle color of your timeline.

5.Line Color



6.First  Color 


The first color setting allows you to set the first color of your stories title In  your timeline.

7. Second  Color


The  second color setting allows you to set the second color of your stories title In  your timeline

Back To Top

Typography Settings

Main Title


main-title main-title-typo

Story Title


Cool Timeline Just another WordPress site Cool Timeline — WordPress

Story Title Style ?


story-transCool Timeline Just another WordPress site

Story Content





Back To Top

Stories Settings

Animation Effects


Stories Images?


Stories slideshow ?


Slider animation ?


Slide Show Speed ?


Back To Top

Timeline Scrolling Navigation settings

Enable Scrolling  Navigation ?





Scrolling  Navigation  Position ?



Back To Top

Story Details settings

Disable Related Stories ?



Adjust Single page container spacing(padding).





Back To Top

Stories Date Settings

Disable Stories Months ?



Stories Date Formats ?



Custom date formats


You can set custom date format . Click here to view formats

Enable custom date styles



Stories date Font style


The Stories dates Font settings allows you to set the font size, font family  and font style of timeline Stories dates.

Stories date color


The Stories date color setting allows you to set the color of story dates in your  timeline.

Back To Top

Content Timeline

Add content timeline

Now you can convert your blog posts into timeline. Use content timeline shortcode and add any post-type inside it to create a timeline.

You can show your content in two types of views( Vertical view, Horizontal view).

You can easily add content timeline using shortcode generator.

[ cool-timeline post-type="post" layout="default" skin="default" show-posts="20" order="DESC" icons="NO" ]

Back To Top

Custom Timeline