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 cool-timeline-pro.zip 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 cool-timeline-pro.zip file from the extracted folder and click Install Now(check screenshot below).

After completetion of installation you can activate the plugin.

installation-1

2. Install via FTP:- First you need to unzip cool-timeline-pro.zip, 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.

uninstall-plugin

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.

edit-story

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

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.

add-story

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

 

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" ]

shortcode-creator


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.

categories-cool-timeline-showcase-your-story-wordpress

Select story category according to your timeline

select-cat

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

category-sections

Back To Top

Cool Timeline Settings

GENERAL SETTINGS

1. Timeline Title

titlet-title

 

 

 


2. Title Heading Tag

tag

 


3.Title Alignment ?

alignment

 


4.Display Title ?

display-title

 


5.Number of stories to display ?.

story-display

 


6.Content Length

content-lengh
7. Timeline default Image
timeline-default-img


 8.Stories Description?
story-desc


9. Display Read More 
display-read-more


10. Stories Order ?
story-order
 

Back To Top

Style Settings

1. Container Background

 

content-bg-color


2. Story Background Color

post-bg-color

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


3.Content Font Color

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

line-color

 


6.First  Color 

first-color

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


7. Second  Color

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

 

content-font-s

 

content-font

Back To Top

Stories Settings

Animation Effects

ani


Stories Images?

inpopup


Stories slideshow ?

enable-slideshow


Slider animation ?

slide-animation


Slide Show Speed ?

slide-show-speed

Back To Top

Timeline Scrolling Navigation settings

Enable Scrolling  Navigation ?

enable-nav

nav-left 

 


 

Scrolling  Navigation  Position ?

nav-pos

scroll-right-nav

Back To Top

Story Details settings

Disable Related Stories ?

rel-settings

single-rel-content


Adjust Single page container spacing(padding).

single-padding-set

single-padding

 


 

Back To Top

Stories Date Settings

Disable Stories Months ?

story-months-vi

 


Stories Date Formats ?

date-format

 


Custom date formats

custom-date

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


Enable custom date styles

date-styles

 


Stories date Font style

content-font-s

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


Stories date color

date-color

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

Back To Top

Single Story Settings

Single Story Settings

Single Stories Custom Template ?

 

Cool Timeline Pro ‹ Cool Timeline Showcase Your Story — WordPress

No ( Default single page layout)

 

Facebook Hosts Seventh F8 in San Francisco Cool Timeline Showcase Your Story

Yes (Custom timeline page template)

custom-details

Back To Top

Customize single story template?

This article will help you customize the appearance of the single story template.

 

new-folder

Now that the directory is created, you’ll want to copy over the template file from the plugin root , contained in the ‘templates’ named single-cool-timeline.php which contains all of our helper functions to generate the necessary markup.

plugins > cool-timeline-pro > templates > single-cool-timeline.php

 

themes > {your theme name} >  cool-timeline

 

<?php /**  * The template for displaying all single stories via cool timeline  *  * To customize this template, copy it into a directory 'cool-timeline' in your theme root  *  * If default story template does not match to your theme.  * You have to change the div according to your theme single.php file.  */ get_header(); ?>
<!-- Change these div according to your theme single.php file -->


<div id="container" class="container">

<div id="content" role="main">
   <!---end-------> 
   
   

<div class="cool_timeline_single">

<div class="ctl-story-detials ctl-left">
            <?php             // Start the loop.             while (have_posts()) : the_post();                 ?>

<div class="ctl-story-type-cont ">
                    <?php                       /*                        * Story Content Type                        *                        * Image/Video/Slideshow                        */                       get_cool_timeline_template('single-story-content');                     ?>
                </div>



<header class="ctl-header-entry">
                    <?php the_title('
<h1 class="entry-title">', '</h1>

'); ?>
                </header>

<!-- .entry-header -->

<div class="story-date-cont">

<ul class="ctl-related-stories">

<li>

<div class="ctl-related-stories-badge info-even story_date"><i class="fa fa-circle"></i></div>


<div class="ctl-related-stories-panel">

<div class="ctl-related-stories-heading">

<h4 class="story-date"> 
                                    <?php                                        /*                                         * Story Date helper function                                         */                                                                         echo  ctl_get_story_date(get_the_ID());                                      ?></h4>


                                </div>

                            </div>

                        </li>

  
                    </ul>

 

                </div>


<div class="entry-content">
                    <?php                     /*                      * Story Content                      */                     the_content();                     ?>
                </div>


                <?php             endwhile;             wp_reset_query();             ?> 
        </div>


<div class="ctl-stories-links ctl-right">


<div class="related-posts wrapper clearfix">
            <?php                  /*                  * Related stories to custom function                  */                     get_related_stories(get_the_ID());                 ?> 
            </div>


        </div>

    </div>

  
   
<!---end------->   
    </div>

</div>

<!---------->   
<?php get_footer(); ?>

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