What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Add an Event Timeline in WordPress?

How to Add an Event Timeline in WordPress?

Interested in showing your visitors how your blog has grown over time? Then you may use a timeline which is a way of displaying a list of information or events in a chronological order. By creating a list of events and adding a timeline on your WordPress site, you are able to show those events orderly and communicate the message in a more effective and attractive manner.

In this article, we are going to show you how to create and add an event timeline in WordPress. To avoid dealing with complex coding stuffs, we simply use a plugin named Timeline Express which allows creating a vertical animated and responsive timeline of posts.

Before taking any actions, you need to login to your WordPress Dashboard, and then have the plugin installed and activated. Once done, you can find the Timeline Express is added to the list of admin menu.

Next, it’s time to follow the parts below to create and add a timeline.

Configure the Timeline Express Display Settings

Firstly, you need to configure the Timeline Express plugin the way you would like your timeline to show. To move on, click “Settings” in the menu list to open the setting page. You can do some configurations for each section on the page. Following are items that we explain for you.

  • Timeline Title: Enter the title of your timeline in the text field. The default one is “Timeline Express”, you can change it to something related to your blog. Next to it, there are 2 drop down menus. From the former one, you can select the alignment, while from the latter one you can change the front size of the header from H1 to H2, H3 and H4.
  • Time Frame: Inside the dropdown menu, there are 3 options for time frame, including Future Events, All Events and Past Events, among which you can select one to query events from.
  • Display Order: Options are Ascending and Descending. Select the order you want the announcements to display.

Timeline Express Settings Page

Scroll down and there are other sections that you need to do something with.

  • Announcement Excerpt Length: You can set the announcement length by setting the amount of characters, or checking the random length box.
  • Date Visibility: From the provided dropdown, set whether the date shown next to the icon on the announcement is visible or not.
  • Read More Visibility: There is a “read more” button available for each announcement, which allows users to view the full version of the post. If you do not want to enable this function, you can hide it by selecting “Invisible”.
  • Default Icon: From the dropdown, select the font-awesome class name that you would like to use as a default icon for new events.
  • Default Announcement Color: Select the default color for all new announcements or events.

In addition, you can also set color for the announcement container background, announcement shadow and background line.

Timeline Express Settings

After you have finished all the settings above, it’s time to set up the No Announcement message. Though there is default content shown in the media editor, you can customize the text. Once you have done with all the configurations, save the settings.

Set No Announcement Message

Create An Announcement with Timeline Express

Now, you can click “New Announcement” to create your first event or announcement.

Timeline Express

On the New Announcement page, you need to enter the title of the event or announcement and complete other information. You can customize the color, select an icon from the drop down menu, and set date.

Add New Announcement

Moving on, you can choose to add a banner image for the announcement by clicking the “Add or Upload File” button to upload one. Note that the image you use should be 650px wide or larger.

Next, there are 2 options for you as for whether you want to protect the content or not. Below there is a post editor where you can add more detailed information associated with the announcement. Besides text, you can add images, videos and links, etc.

Set Announcement Image

After completing the announcement, you can have a preview, save draft or publish it. If you want to add more announcements, just repeat the above steps.

Publish Announcement

In the following, there is an example preview of how the announcement will look like as a stand-alone announcement.

Example Announcement

Manage Announcements in Timeline Express

Once you have created a list of announcements, go to “All Announcements” and you’ll see all announcements created are listed here. From this page, you can edit, trash and view any announcement just the way you deal with WordPress posts and pages.

All Announcements

Add Your Timeline to A Page with Timeline Express

Now, you can add the timeline on your site. To do this, go to Dashboard > Pages, and click “Add New” to create a new page. First, enter a suitable title in the title field. From the editor you can find a new icon which we have pointed out here.

Add New Page

Simply hit on the icon and you’ll find the timeline shortcode “[timeline-express]” is added to the post automatically.

Timeline Express Stortcode

After finishing writing your page or post, you can publish it. By now, you have successfully created an event timeline in WordPress. If you want to expand the timeline in the future, you can do this by adding more announcements to the Timeline Express.


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.