How to Create a WordPress Timeline for Important Events

How to Create a WordPress Timeline for Important Events

As the name indicates, the timeline is a special visual line for the presentation of events in a chronological order. Generally, it features with the dates, images, words, videos and many other forms of contents to ensure the appealing display of some critical events.

At present, the timeline has been widely used by webmasters. For instance, the e-commerce site owners use it to display the historical information of their online business; bloggers use it to showcase some memorable events; photographers utilize it to show their interesting journey.

Generally, the timeline is showcased in a vertical manner in the About Us page of a website. If you are looking to display it, you can check the below steps about how to create a WordPress timeline with the full customization.

Create a WordPress Timeline

When it comes to the creation of WordPress timeline, we highly recommend you to utilize the Timeline Express plugin. With it, you are allowed to create the beautifully designed timeline that is vertically displayed, responsive and animated, without the need to write a single line of coding stuff. In addition, this plugin allows you to achieve the CSS animation effect when people scroll down your timeline, limit the introduction for past events and upcoming events, load the custom template for each single event with hundreds of awesome icons and many more.

Now, we’d like to introduce some steps about how to leverage this special plugin.

Finish the General Settings

After installing it, you need to click the newly added tab that is named as Timeline Express, and then, click the Settings button from the dropdown menu to make some configurations of this timeline plugin. There are several aspects for you to determine.

Timeline Express

  • Decide the Timeline title based on your needs, along with its font size and alignment among the options of Left, Center and Right.
  • Decide the time frame to query your events. Generally, the timeline is for some past events.
  • Choose the display order of each event based on a chronological order or the contrary situation.
  • Set the exact characters for the excerpt of each event. Surely, you can choose the random length.
  • Decide whether to toggle the Read More button and the event date.
  • Select the default icons for your new events.
  • Choose the proper colors for the container background, line and shadow of the timeline.

In addition, you can leave some default messages when no timeline is created and decide whether to exclude your timeline from the results of site searches.

Create Your Events

Now, you can start creating your events that can be showcased on the timeline. For this, you need to click the New Announcement button, then, enter the event title and choose the color and icon for the display of the event.

After that, you should enter the right date for your event. Note that the timeline shows all the events based on the chronological order according to the date you have offered.

In addition, we highly recommend you to upload a banner image for each event with the proper image size of 650 px in width. This simply makes your timeline visual appealing and helps people identify your events easily.

Now, you can write down some words to explain what happened for that event. If needed, you can even insert some media for further details. Here, we need to mention that if your event introduction is of the lengthy paragraph and you haven’t set any restriction on the length of the event excerpt, you’d better showcase the Read More button. This can achieve the clean looking for your timeline, especially when some of your events are of rich information while others are not.

Create Your Events

After publishing your first event, you can repeat this step for adding more events. Note that in order to maintain the consistency, you’d better choose the same color and icon as you have selected for the initial event. Also, the banner images should have the same size.

Here, we highly recommend you to click the All Announcements button. After that, you will be presented with a list of events you have added, showing the name, color, icon, date and the banner image clearly. In this case, you can find and modify some improper options easily.

All Announcements

Showcase Your Timeline on Your Page or Post

As all your events are published successfully, now, you can display your timeline that lists these events in the right order and clear display. To achieve this, you simply need to open the editing screen of a webpage that you are looking to display this timeline, then, enter the shortcode as showed in the following screen. After clicking the Publish or Update button, you can have the timeline displayed.

Timeline Express Shortcode

Looking to know how the timeline showcases on your website? Check the below example.

Timeline Sample

Alternative Option of Timeline Ultimate

It is possible that you are looking for a Facebook-style timeline for your website. In this case, you can leverage the Timeline Ultimate plugin, with which you can get the fully mobile-ready and responsive display, along with the tight connection with your social accounts on Facebook, Twitter and Google Plus. The detailed steps for using this plugin can be found in this post.

Timeline Ultimate