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.
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.
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.
Create An Announcement with Timeline Express
Now, you can click “New Announcement” to create your first event or announcement.
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.
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.
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.
In the following, there is an example preview of how the announcement will look like as a stand-alone 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.
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.
Simply hit on the icon and you’ll find the timeline shortcode “[timeline-express]” is added to the post automatically.
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.