How to add a Good looking timeline page to wordpress

Sometimes You have wanted to display a series of events or story in form of a vertical display with dates mentioned in front of each event or story piece. This type of display is called as time line display to achieve this you would need to install the plugin called as cool timeline plugin

After you have installed this plugin you will see the two new items appear in the left hand side vertical menu

  1. Timeline Stories
  2. Cool Timeline

1) Timeline Stories: This is the part where you can add stories to your time line, Under the menu item Timeline Stories there are further two items a) All stories b) Add New

a) All Stories: As the Name Says it contains all the stories on your timeline,  similar to all posts/all pages option you can edit each story.

b) Add New: This option gives the option to add new story to the time line provides similar interface to add post option. Whenver you click on add new a screen opens similar to the add post/page option with additional option which allows to add an icon. that you can add from the already provided icon.

This icon will appear in the timeline page as you configure the display of the timeline.

Now check the option that says Cool Timeline . When you open this option, you will see all the settings that effect your time line page looks, here is a screenshot, you can experiment with this option and see.

Once you are done adding stories, to your time line like i have added using add new some random text your all stories will look similar to this

I have made sure that i add different dates on each story so that to check the functionality of the timeline plugin and how it displays the timeline. To show the timeline page what we have to do is create a page or post and in that page or post you will find that in the visual mode of editor there is a new icon that has appeared on the editor, after you click on that, it will say Add cool timeline shortcode-> select it and you will a box that appears to show the fast timeline config screen to insert into the page, below screenshot will clarify lot of things, Please check

As you can see in the above screenshot i have highlighted the icon that represents the timeline shortcode and then in this screenshot you can also see the box which allows you to configure the shortcode thats going to be displayed. You can experiment with the options and then click ok and the short code will appear in the editor screen. I have copy pasted the short code text below. Now you are at liberty to modify the values in this config box and experiment with the basic settings. This insert shortcode option gives you the liberty to display your timeline inbetween content, after content below content, the timeline will be displayed wherever the short code appears. PS: whenever you click on the icon to add timeline on the editor screen one more short code similar to the one below will be added so you have to delete the old shortcode that was already present in the editor to avoid multiple timeline displays

[cool-timeline layout=”default” animation=”none” date-format=”F j” icons=”NO” show-posts=”20″]

Now since i have displayed the short code in between text here is how my timeline looks

 

 

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

(Visited 115 times, 1 visits today)

More from my site

wavatar

Posted by deepak.kapoor

An Active Youtuber, Blogger, Traveller, Programmer, Wordpress developer. Likes to spend his free time Motorcycling through the hills.

Leave a Reply

Your email address will not be published. Required fields are marked *