Cool Timeline


Cool Timeline – WordPress #1 Timeline Plugin

Cool Timeline is a responsive WordPress pure HTML & CSS timeline plugin that allows you to create beautiful horizontal and vertical history timeline. You simply create posts, set images and date then Cool Timeline will automatically populate these posts in chronological order(ASC or DESC), based on the year and date of stories. You can easily show timeline on any page of your website using shortcode – [cool-timeline]

Check Cool Timeline Demos

Cool Timeline Pro Demo | Cool Timeline Free Demo

You can show your stories, events, appointments, concerts, future & history happenings by using Cool Timeline plugin on your website.

Cool Timeline Shortcode

[cool-timeline layout=”default” skin=”default” date-format=”F j” icons=”YES” show-posts=”20″ order=”DESC” story-content=”full”]

Gutenberg Friendly – Instant Timeline Builder

Cool Timeline (version 1.8+) now also provides instant timeline builder for Gutenberg lovers. You can easily create timeline in a real time using Gutenberg blocks and settings.

Learn More About Shortcode | Check Timeline Installation Guide

Elementor Timeline Widget Addon For Elementor Lovers

Check it:- Timeline Widget For Elementor

Features Of Cool Timeline

  • Gutenberg block Timeline:- Since version 1.8 users can create instant timeline with the help of Gutenberg instant timeline builder block. Check Demo Here >>
  • Compact Timeline:- Now our free users can also create a compact timeline, means a timeline without a lot of space between stories. Check Demo Here >>
  • Clean Layout:- If you love clean and clear look without a lot of colors then you can showcase your story via our clean layout. Check Demo Here >>
  • Horizontal Roadmap Timeline:- With help of Roadmap desgin, you can represent your Project/Company Plans and Phases. Check Demo Here >>
  • 高级设计和优化代码:-我们还使其对开发人员友好,您可以轻松自定义时间线故事默认查询。
  • Create both-sided or one-sided vertical timeline.
  • Show timeline images in pop-up or link to full story.
  • Choose cool icons along with stories.
  • Specify story background custom colors.
  • Specify year circle custom color.
  • You can specify different colors for story posts title.
  • Show read more button for full story page.
  • Show stories in DESC or ASC order.
  • Easy to use shortcode to place the cool timeline wherever your heart desires – [cool-timeline].
  • Translation ready and translated in 4 languages (German, French, Indonesian & Italian).
  • TinyMCE button to generate the timeline shortcode or easily add shortcode on any page using Gutenberg ready blocks.
  • Responsive and mobile ready timeline.

Cool Timeline Pro Features

To make it more cool we have enhanced our plugin by adding many advanced design features in pro version – multiple design options, animation effects, advanced horizontal timeline support, create multiple timelines and more. Here you can check our pro features:-

  • 40+ Timeline Designs
    Cool Timeline Pro Provides 4 Timeline Layouts:-

    • Vertical Timeline
    • Vertical Compact Timeline
    • Vertical One-Side Timeline
    • Horizontal Timeline

    Every Timeline Layout Supports 5+ Design Options & 2 Skins(light, dark):-

    • Default Design
    • Flat Design
    • Elegant Design
    • Clean Design
    • Classic Design
    • Modern Design

    Check All Demos…

  • Timeline Settings, Colors & Typography:-
    Cool Timeline Pro provides advanced setting panel to easily manage timeline visibility settings, background / timeline elements colors and fonts / typography styles and color options.
  • Video, Images & Slider:-
    You can easily display small and big images, YouTube / Vimeo videos and images slide-show inside Cool Timeline Pro. You can add them easily while adding a timeline story.
  • Custom Color Option For Every Story:-
    While adding stories in Cool Timeline Pro, you can provide different colors for different stories, means you can easily create a multi-color timeline by using this advanced custom color feature provided by Cool Timeline Pro.
  • Multiple Timelines:-
    You can create multiple timelines in one website based on different categories by using Cool Timeline Pro WordPress plugin. You can display these timelines in any layout(vertical / horizontal) or design.
  • Easily Add Shortcode Using Smart Generator:-
    If you are using classic code editor inside WordPress while adding new page or post then you can easily add shortcode inside any page by using smart shortcode generator tool inside your code editor.
  • Gutenberg / Elementor / WPBakery:-
    First publish stories one by one then you can show these stories in a timeline layout easily inside any page builder :- Gutenberg blocks, Elementor or WPBakery.
  • Show Custom Label Instead Of Date:-
    Cool Timeline Pro provides a features to show custom text in-place of date/time in timeline. You can add custom text and custom story order easily via simple settings while adding a timeline story.
  • Timeline In Any Order ASC / DESC:-
    Timeline shortcode provides an option to show timeline in any order, you can show either ascending or descending order according to your needs.
  • Show Filters In Timeline:-
    You can show category based filters above a timeline and user can see different category based timelines on one page by selecting a filter/category.
  • Blog Posts Timeline:-
    You can show your website blog posts on any page in a timeline layout using Cool Timeline Pro. Also you can represent any post-type in timeline layout by simply adding post-type slug in timeline shortcode.
  • Ajax Load More And Pagination Support:-
    Cool Timeline Pro provides both features – pagination and load more. If you have a lot of stories inside your timeline then you can add pagination or load more button after a particular number of stories in your timeline.
  • Scrolling Navigation:-
    You can show a small scrolling navigation in your timeline page for quick timeline navigation. A user can quickly and easily reach to a particular year story by this small timeline navigation.
  • FontAwesome or Custom Image Icons:-
    You can show fontawesome or custom image icon along with every story inside your timeline.
  • Show HTML or Read More Inside Timeline:-
    You can show links, bold text or any custom HTML tag inside timeline stories or you can also show a read more link to full story page or any custom url.
  • Add Any Date Format Inside Timeline:-
    You can represent timeline dates inside any date format, just add a date format inside your shortcode and it will show date/year in your desired format. Check this url:-
  • 15+ Animation Effects:-
    Cool Timeline Pro provides 15+ cool animation effects for a premium timeline design experience.
  • Premium Support For Pro Users:-
    We provide premium support service to our Pro users. If you face any issue while creating your dream timeline inside your website, just drop us a mail at here – and we will provide a solution in 24 hours.

Where can you use Cool Timeline plugin?

You can show history/future stories, events, appointments and many other cool things using our Cool Timeline plugin. Here are all areas where you can use this plugin:-

  • Represent your company story.
  • Showcase tutorial/process steps in timeline format.
  • Create a program timeline.
  • Timeline is best way to represent history.
  • Create events / appointments timeline.
  • Job stories / achievements timeline.
  • Personal story timeline.

We have tried our best to create an awesome timeline plugin but still if you face any installation, coding or design error, you can contact us anytime. Also remember to try our Cool Timeline Pro version for extra cool features and design options.

Buy Cool Timeline Pro | Check Timeline Pro Documentation


  • WordPress Timeline plugin frontend view.
  • Cool Timeline story creation screen with instructions.
  • WordPress Cool Timeline general settings.
  • Cool Timeline PRO features.
  • Cool Timeline PRO Single Sided.
  • Cool Timeline PRO Horizontal view.
  • 使用Cool timeline Pro创建任意类型的时间线



  • Cool Timeline


3 Ways To Install Cool Timeline

  1. Automatically install our plugin via WordPress admin panel:- Open your WordPress website admin panel and go to Plugins > Click Add New & search ‘Cool Timeline‘ at here > Here you will find our plugin > Now click on install button > After this you will see a activate button > Just activate it to use Cool Timeline inside your website.
  2. Install via Zip file:- In this method first you need to download our plugin from wordpress plugins directory. Go to & Download Cool Timeline. After this inside your WP-admin panel, click on Plugins > Add New > Upload Button. Now choose the plugin zip file that you just downloaded from wordpress plugins directory & activate it.
  3. Install plugin via FTP:- In this method you also first need to download plugin zip file from wordpress plugins directory. After this open your FTP manager and Go to > wp-content/plugins folder. Here you need to upload extracted version of Cool Timeline (please remember don’t upload zip file directly at here). After this you can activate plugin from wp-admin panel plugins page.

Create Timeline

  • After installation and plugin activation, you will find 2 extra tabs in Wp-admin panel sidebar – Timeline Stories and Cool Timeline.
  • Under “Cool Timeline” tab, you can select different colors, fonts and other design options of timeline according to your website style.
  • Under “Timeline Stories” tab, You can add all of your stories by selecting appropriate date and year.
  • After adding all of your stories, Go to Pages > Add New, Here you can create a timeline by using our in-build short-code generator or simply place this short-code – [cool-timeline].

Final Words!

If you are facing any difficulty in Cool Timeline plugin installation then you can contact our support at here –


How to install Cool Timeline plugin & create timeline?

Please check – plugin installation guide or Cool Timeline Pro documentation

Can I choose any historical date/year?

Year starts from 1970 in free version but in pro version you can choose any historical year from 1000 to 2050 for creating a story inside Cool Timeline or you can also add custom text instead of date/year.

What is plugin shortcode & how can we use it?

Here is full short-code of Cool Timeline plugin:-

[cool-timeline layout=”default” skin=”default” date-format=”F j” icons=”YES” show-posts=”20″ animation=”FadeInOut” order=”DESC” story-content=”full”]

  • [cool-timeline] = It is our default short-code syntax.
  • layout = We have five layout options (default, horizontal, one-side, simple, compact). In simple timeline you can create a timeline without bigger year circle in between the stories.
  • skin = 2 skins available (default, clean)
  • date-format = You can choose any date-format to show with the stories according to your language and requirements.
  • icons = You can show(YES/NO) cool icons along with timeline stories.
  • show-posts = If you have a large timeline with a lot of stories then you can use this option to show pagination option after a number of stories.
  • animation = We have only 1 animation effect (FadeInOut) in Cool Timeline free version. You can purchase pro for more effects.
  • order = Now easily manage timeline stories order(ASC/DESC) from shortcode.
  • story-content = (short/full) Now show full HTML content or short description with read-more inside timeline stories.

Can I see online demo?

Yes, Check free version demo at –
For Pro demo please check –

Can I convert my blog posts into timeline?

No, This facility is only available in Cool Timeline PRO version. You can only create a blog/content timeline using Cool Timeline Pro

Can I create multiple timelines based on different categories?

Timeline category option is only available in our Pro version so you need to purchase pro if you want to create category specific multiple timelines.

Can I choose custom colors and fonts?

Yes, You can choose 2 custom colors and any font-family from our font-list according to your website style. These colors will automatically apply on all of your timeline stories in an alternative way.

Can I hide bigger circular year circle?

是的,你需要选择“simple”布局当添加短代码的时候。在这个段代码中,你可以创建一个时间线 通过隐藏更大的年圈。

Is it possible to create both horizontal & vertical timeline?

You can only create vertical timeline in our free version. But We have cool design options to create both vertical and horizontal timeline in our Pro version.

Do you have any support email for extra questions?

Yes, You can contact us anytime at here – We will try to provide an answer with in 24 hours.



// customize Stories dates format
function ctl_story_date_filter($format) {
    // you can find complete list of date formats from:-
    return $format;

function ctl_story_content_filter($content) {
    return $content;

// changes stories images size
function ctl_story_image_size_filter($img_size) {
    // thumbnail:- Thumbnail (150 x 150 hard cropped)
    // medium :- Medium resolution (300 x 300 max height 300px)
    //'medium_large' :- Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
    //'large':- Large resolution (1024 x 1024 max height 1024px)
    //'full':- Full resolution (original size uploaded)
    // array(200,200): custom size
    return $img_size;

// change read-more text
function ctl_stories_readmore($read_more_text) {
    return $read_more_text;


Worked very well for my needs and support is great.


“Cool Timeline” 是开源软件。 以下人员对此插件做出了贡献。


“Cool Timeline”插件已被翻译至2种本地话语言。 感谢所有译者为本插件所做的贡献。

将“Cool Timeline”翻译成您的语言。




Version 2.1 | 13 July 2021

  • Added: Story Ordering/sorting feature in Instant timeline builder block
  • Added: Extended support for an older Years from 1800 to 1970 years and dates
  • Added:- Alt tag in Instant Timeline Builder images
  • Fixed: VC addon integration not working
  • Fixed: story wrong order bug
  • Fixed:- Timeline Year issue in Spanish language
  • Updated: Gutenberg Timeline block code and libararies
  • Updated: Deprecated libararies from timeline block
  • Updated: tested upto 5.8

Version 2.0.7 | 09 March 2021

  • Fixed :-Minor localize script issue

Version 2.0.6 | 12 JAN 2021

  • Fixed :-story date picker not working issue
  • Fixed :-Date picker conflict

Version 2.0.5 | 15 Dec 2020

  • Fixed :-Deprecated functions issues with latest jQuery
  • Fixed: minor compatibility issue with WordPress 5.6

Version 2.0.4 | 28 Aug 2020

  • Added: dismiss notice button in Elementor addon notice
  • Fixed:Conflict with ACF Pro plugin
  • Fixed:minor conflict with woocommerce
  • improved:removed body class

Version 2.0.3 | 25 Aug 2020

  • Fixed:nonce verification security error

Version 2.0.2 | 10 Aug 2020

  • Fixed:Re-rendering issue mentioned by user
  • Fixed:compatibility issue with WordPress 5.5
  • Fixed:Fixed custom styling default settings issues
  • Fixed:Story popup small images issue

Version 2.0.1 | 10 July 2020

  • Updated:Wrong links

Version 2.0 | 08 May 2020

  • Added: Integrated Visual Composer builder support
  • Added: Added notice for Elementor widget addon
  • Added: Added Icon support in Horizontal Timeline
  • Updated: Updated Cool Timeline Settings
  • Fixed: Story small image blur issue
  • Fixed: Custom CSS before/after CSS not working issues
  • Fixed: Popup responsive issues
  • Fixed: text overlapping issues
  • Fixed: title alignments issues
  • Imporved: Review notices and messages

Version 1.9.4 |13 FEB 2020

  • Improved:Minor Textual changes

Version 1.9.3 |13 DEC 2019

  • Added:security checks
  • Added:Added esc_attr and esc_html in the shortcode HTML
  • Added: Loaded assets based upon conditions
  • Fixed: Story date AM/PM issues
  • Improved: Improved plugin security
  • Improved: Default case checks

Version 1.9.2 |22 Nov 2019

  • Added:Integrated preloader in horizontal timeline
  • Fixed: Horizontal timeline popup image link issue
  • Improved:Improved featured image code
  • Improved:Excerpt length functions
  • Improved: user review class code

Version 1.9.1 | Oct 23, 2019

  • Fixed: story icon not displaying issue
  • Fixed: undefined notice in horizontal timeline
  • Fixed: Timeline overlapping sidebar
  • Imporved: Improved wrong translated

Version 1.9 | Aug 21, 2019

  • Added: Integrated new AOS animation effects
  • Added: feedback on plugin deactivation
  • Improved: Plugin folder structure
  • Improved: overall code optimization
  • Fixed: Story image settings bug
  • Fixed: Horizontal timeline story wrong year
  • Imporved: JS and CSS improvements.
  • Removed: animate.css and viewport.js

Version 1.8 | June 27, 2019

  • Added: Integrated new Gutenberg based instant timeline builder

Version 1.7 | April 27, 2019

  • Added: Integrated standalone story date picker.
  • Added: Integrated fontawesome 5 font and added search icon feature
  • Added: Timeline sorting settings in the shortcode
  • Added: Added story content settings in shortcode
  • Fixed: Wrong time based sorting bug

Version 1.6.3 | Feb 19, 2019

  • Fixed:gutenberg-block/ctl-block.php syntax error .
  • Improvment:compatibility checks with WordPress 5.1

Version 1.6.1 | JAN 01, 2019

Version 1.6.2 | Feb 19, 2019

  • Fixed: 404 Stories not found bug.
  • Fixed: Read more button don’t appear first time.

Version 1.6.1 | JAN 01, 2019

  • Improvment: loaded all block assets in enqueue_block_editor_assets hook
  • Fixed:- Fixed compatibility issues with autooptimize.
  • Improvment:- Added setting descriptions
  • Improvment:- Minor Block improvements

Version 1.6 | DEC 24, 2018

  • Added:- Integrated Timeline Shortcode Block for Gutenberg
  • Fixed:- Fixed compatibility issues with Gutenberg.
  • Improvments:- Minor Style improvements

Version 1.5 | OCT 26, 2018

  • Added:- Integrated brand new layout for Horizontal Timeline
  • Added:- Integarted Horizontal Timeline next/previous navigation buttons.
  • Added:- Added Story date format settings in horizontal timeline
  • Added:- Create any date/time based RoadMap
  • Added:- Integrated filters:-
  • Fixed: Compact timeline stories positioning bug
  • Fixed: Compact timeline icon wrong position problem
  • Fixed: In stories content HTML not working problem
  • Fixed: In Safari stories Blur issue
  • Improvements: Compact timeline JS

Version 1.4 | APR 17, 2018

  • Added:- Integrated Horizontal Timeline layout,Using this layout you can easily create Roadmap and small Horizontal timeline.We have represented story full content in popup
  • Added:- Introducted Elementor Page Builder support
  • Improvements: Minor Code Improvements

Version 1.3.2 | SEPT 13, 2017

  • Fixed:- Fixed animation effect compatibility issue with new version of google chrome(Version 61.0.3163.79)
  • Improvements:- added timeline styles in header and scripts in footer

Version 1.3.1 | SEPT 5, 2017

  • Fixed: Fixed Minor Clean Timeline styling issues.

Version 1.3 | SEPT 4, 2017

  • Added:- Added new skins options in shortcode generator.Now user can easily create simple and clean timeline without background colors.
  • Added:- Added new setting panel for story image size
  • Added:- Integrated Hooks.User can easily customize timeline stories query arguments using add_filter(‘ctl_stories_query’,’callback_function’); filter hook.
  • Added:- Added ctl_story_clasess filter hook.Using this hook users can easily add your own custom classes in timeline stories
  • Improvements:- Improved All stories section added story dates and story icons sections
  • Added:- Integrated new font awesome icons Version 4.7
  • Improvements:- Improved overall code.included files based upon conditions
  • Improvements:- Created function for story images and story date
  • Improvements:- Optimized timeline loading speed. Minified all CSS and JS files.

Version 1.2 | MAY 8, 2017

  • Added:- Added brand new compact timeline layout.Using this layout you can easily show your stories in compact mode like(facebook timeline)
  • Added:- Added shortcode generator in all type of posts and pages.
  • Fixed:- Google fonts loading problem of all pages
  • Improvements:- Minor Textual changes
  • Fixed:- Minor CSS and js Fixes

Version 1.1.8 | JAN 12, 2017

  • Added:- Added brand new designs for default timeline
  • Added:- Translation ready and translated in 4 languages(German,French,Indonesian ,Italian)
  • Added:- Added one sided timeline
  • Added:- Show timeline images in pop-up or link to full story
  • Added:- Cool Animation effects
  • Added:- Simple timeline without year circle
  • Added:- You can easily set icons in your stories.
  • Added:- Pagination to limit the number of stories displayed for a large timeline
  • Added:- Custom stories date format feature in shortcode generator
  • Imporved:- Improved over all CSS of timeline
  • Fixed:- Minor bug fixings
  • Improved:- Improved frontend script
  • compatibility:- compatibility with WordPress 4.7.1 and twenty seventeen theme

Version 1.1.7 | JAN 12, 2017

  • Fixed:- Fixed fatal errors.

Version 1.1.6

  • Enhancement: IE imageproblem fixed
  • Fixed : Minor styling fixes.

Version 1.1.5

  • Enhancement: Minor bug fixings

Version 1.1.4

  • Enhancement: Added new shortcode generator.

Version 1.1.3

  • Enhancement: Plugin documentation, demo and screenshots.

Version 1.1.2

  • Fixed: Cannot load cool_timeline_page.
  • Fixed: Unable to access plugin settings page when you have mentioned define(‘DISALLOW_FILE_MODS’,true); contant in wp-config file.
  • Fixed: IE-11 images issue.
  • Enhancement: Migrates google fonts from http to https.

Version 1.1.1

  • Fixed: Minor bug fixings.

Version 1.1

  • Enhancement: Responsive styles
  • Fixed: Read more priority issue
  • Removed: background image options.
  • Fixed: Options panel color options default value issue.
  • Enhancement: Enhancement of all labels.
  • Fixed: Minor bug fixings.

Version 1.0.9

  • Removed: bootstrap.css styles.
  • Added: Independent styles.
  • Added: future Posts feature.
  • Fixed: Fixed css overriding issues.
  • Enhancement: removed extra div’s.

Version 1.0.8

  • Added: Added options in settings panel to Enable/Disable stories date.
  • Added: Main title alignments options in option panel.
  • Fixed: Fixed read more overriding issue.
  • Enhancement: included ctl_styles and bootstrap styles only on timeline page.

Version 1.0.7

  • Fixed: Minor Fixes.

Version 1.0.6

  • Fixed: Date issues
  • Fixed: styles settings issue
  • Fixed: Minor css issues.
  • Enhancement: included styles only on timeline page.

Version 1.0.5

  • Removed: Removed bootflat.css file.
  • Fixed: css issue resolved.

Version 1.0.4

  • Added: Stoires description type short/Full(with HTML) in option panel.
  • Fixed: Typography issues.
  • Fixed: Minor css issues.
  • Fixed: Minor images size issues.

Version 1.0.3

  • Fixed: stories date issue resolved.
  • Fixed: background color issue resolved.
  • Fixed: minor javascript bug removed.

Version 1.0.2

  • Minor bug fixes.

Version 1.0.1

  • Added Stories order option in settings panel for post order by(Ascending ,Descending)
  • improved short description content.
  • updated icons.

Version 1.0

  • Initial Release.