Hosting Tutorial & Guide

How to Add an Event Timeline in WordPress

updated on Aug 17, 2017
How to Add an Event Timeline in WordPress Do you want to tell a better story of how your WordPress site has covered over the years? Then you are advised to add an event timeline which is a linear representation of important events in the order when they occurred. HostGator is a typical example who displays a list of important events in an ascending order for the better interaction with readers.

At this moment, it is natural for you to question that how to add an event timeline on your WordPress site. If you are not knowledgeable enough about code, we will recommend the Timeline Express plugin which enables you to create a vertical timeline in a much easier way. After installation and activation, you can make your own configuration under the Timeline Express menu item.

HostGator Timeline

Configure the Plugin's Settings

On the Timeline Express > Settings page are many options with regards to display order, time frame, etc. If you have no idea on how to configure Timeline Express, we’d like to offer some suggestions for the important items. In the end, make sure that your settings are saved successfully.

Settings Page
  • Time Frame: By default, Timeline Express will only display the future events. Here you can replace "Future" with "All (Past & Future)" in order to better show your journey.
  • Display Order: You are free to choose Ascending (chronological order) or Descending (reverse chronical order) according to your requirement.
  • Announcement Excerpt Length: You can either specify the length for each announcement or check the random length box. For a better design, we advise you to enter a certain number more than 25.
  • Read More Visibility: There is no need for you to enable Read More option if you can well control the characters.

Create a New Announcement

At this moment, you need to learn how to create an announcement. On the result page of Timeline Express > New Announcement, you are free to enter the title, select the color, choose the icon, set the date, upload the banner image, and add rich media for the announcement (event). Below are some tips for your announcements.

New Announcement
  • In order to create a beautiful timeline, you should take the overall color tone into consideration.
  • The announcements will be displayed in chronological order according to the date you enter.
  • The images used for each announcement need to be 650px in width or larger.
  • It is a better way for you to interact with your readers through the combination of texts, images, and some more media.

Having each announcement finished, do not forget to publish it. If you want to further control your announcements, you can navigate to the All Announcements page under the Timeline Express menu item.

Add an Event Timeline in WordPress

It is time for you to add an event timeline on your WordPress site. Create a new page and then insert the Timeline Express shortcode [timeline-express] into it.

Insert Code

Note: Whenever you have the desire, you are free to add more announcements namely expand your timeline on your WordPress site.