How to Use the Cool Timeline Plugin in WordPress

A timeline is really useful when presenting and visualizing content. It is a simple way to gather information and present it in a nice sequence. The Cool Timeline Plugin for WordPress provides this functionality. The plugin creates vertical and horizontal timelines with a pure HTML/CSS approach. You can embed the timeline in your pages or posts by using a shortcode. 

Keep reading to learn how to use this plugin!

Step #1.- Install the Plugin

  • Click Plugins.
  • Type Cool Timeline into the search box.
  • Use your favorite method to install the plugin (I am working locally, so I’ll download and uncompress)
  • Click Plugins.
  • Click Install.

Step #2.- Create Timeline Stories

There are 2 ways of creating a timeline. One of them is through Timeline Stories. This is a custom post type. Each post represents an event.

  • Click Timeline Addons > Add New Story.
  • Add a proper title and text.
  • Set a featured image.
  • Scroll down and select a date with the date picker.
  • Select an icon for your event.
  • Click Publish.

Notice: You will not be able to see this post. It will be a part of the timeline.

  • Repeat this process for 2-3 more events.

Step #3.- The Timeline Shortcode

You can insert the shortcode on a page or in a post. Let’s add it on a page.

  • Click Pages > Add new.
  • Enter a proper title.
  • Type the “/” symbol to show the available blocks and type “cool” to filter out the ones that we need

We will concentrate on options 2 and 3 first. 

  • Insert the Cool Timeline Shortcode Generator block.
  • Insert the Cool Timeline Shortcode block.
  • Click Add Timeline Shortcode on the first block.
  • Change the skin style to Clean.
  • Change the date format.
  • Select the animation.
  • Select Icons.
  • Change the order of the stories to ASC.
  • Click Insert shortcode.


Notice that you have no configuration options on the right sidebar for this block.

  • Click the second block.

You will see the same configuration options as in the shortcode generator, but they are on the sidebar. Leave these options untouched so you can see the difference.

Both blocks generate the same shortcode. It is up to you which one you choose. 

  • Click Publish twice.
  • Click View page.

You should have 2 timelines on your page, each one presenting the same information, but with different styles.

Step #4. The Cool Timeline Block

  • Click Posts > Add New.
  • Enter a proper title.
  • Insert the Cool Timeline Block.

This is a Gutenberg-ready block for your posts or pages. You can then select each one of the sub-blocks in the timeline and edit them directly, or you can use the options menu on the right sidebar. 

Play a little bit with these settings. Change the title and add an icon for example. 

  • Click Publish twice 
  • Click View Post.

This block allows you to insert a timeline anywhere you want without the need of using Timeline Stories.

Step #5.- The Timeline Settings

  • Click Cool Timeline > Settings.
  • There are 4 tabs on top.

The system will prompt you to save your changes, each time you change one of these settings. 

  • Change the Content length to 20.
  • Click Style settings.
  • Change the colors according to your preference.
  • Do the same with the font family within the Typography Settings.
  • Click Save.

Now you can check the timelines in your Front-end. 

Summary

The Cool Timeline Plugin for WordPress creates timelines quickly and comfortably. I hope you liked this tutorial. Thanks for reading!

Author

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

5 1 vote
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x