You have probably seen animated timelines on websites and how they show events, announcements, and blog posts? They look great.
I have never created a timeline on WordPress before. Therefore, it was time for me to tackle something new.
Choose a WordPress Plugin
Where do you begin? With a WordPress plugin of course! The first search in the WordPress plugin repository presented me with lots of plugins to choose from.
The plugin that had the most active installations was Timeline Express from Code Parrots. So it is my pick for this tutorial.
Timeline Express is a plugin that is recently updated and tested with the latest version of WordPress. So everything looks ok.
According to the description. You should be able to create a nice animated vertical timeline on your WordPress website.
My idea is to create a timeline with announcements and events. With Timeline Express it should be possible to create an animated vertical timeline. Then just place a shortcode or code snippet on a page or post to display the timeline!
Timeline Express Features
Before we start, I want to present some of the features included in the free version of the Timeline Express plugin. (More features in the Pro version).
- Easy-to-use shortcode to place the timeline anywhere on your WordPress site.
- Responsive timelines.
- Cross-browser tested, and mobile friendly.
- Hundreds of Font Awesome icons included.
- Beautiful CSS3 animations.
- Specify the timeline announcement excerpt length.
- Specify a custom image to display for each announcement on the timeline.
- Powerful extensions (both free and paid).
- i18n ready – Translated for international users.
Let’s get started, shall we?
Install & Activate the Timeline Express Plugin
Install Timeline Express -> Go to Plugins -> Add New -> Search for Timeline Express -> Click Install Now -> Click Activate.
Timeline Express Welcome Screen – Welcome to Timeline Express. Here you get useful information about the plugin. Also how to setup Timeline Express. How to create your first announcement and view customization articles. Furthermore, you also find more documentation, help and helpful code snippets.
Under the new Timeline Express menu, you can see more underlying tabs.
– All Announcements – Here you can see all the Timeline Express announcements you create.
– New Announcement – Under this tab, you create new announcements.
– Settings – Here you can customize and adjust visual settings such as:
– Set Time Frame.
– Display Order.
– Announcement Excerpt Length.
– Date Visibility.
– Read More Visibility.
– Default Icon.
– Default Announcement Color.
– Announcement Container Background Color.
– Announcement Shadow Color.
– Timeline Background Line Color.
– No Announcements Message.
– Exclude Announcements from Site Searches.
– Disable Timeline Animations.
– Delete Announcements On Uninstall.
– Add-Ons – If you want to extend the Timeline Express functionality there are a couple of free add-ons you can use. However, if you go premium there are considerably more add-ons to choose from. But in this tutorial, we only use the free Timeline Express plugin.
Create a Timeline
Go to the New Announcement tab.
Here you can add an announcement or events. I choose to present WordPress news.
Give the announcement a title, choose color, icon, date, add a banner or image, and add your text. Click Publish.
Create several announcements by repeating the above points until you have three or four announcements so you can create your timeline.
How to Display Announcements on a Timeline?
Create a New Page for Your Timeline – Go to Pages -> Add New – Give your page a title.
Paste the shortcode – [timeline-express] into a new block (I am using Gutenberg for this tutorial. But it works with the classic editor as well).
Gutenberg Block Editor
Classic Editor
To display and link my timeline page from the Home Page I add a page as Event in the menu displayed in the image.
You can see the end result of my animated vertical timeline on the picture below. Looks awesome, right?
In Conclusion
Timeline Express is a relatively easy-to-use WordPress plugin. Easy to install and configure. The animated vertical timeline looks great.
But I lack more options on how to display the timelines. For instance, I think there should be more options to adjust features such as the gap between the events.
In addition, I think that it is a WordPress plugin worth testing if you want to create animated vertical timelines for presenting announcements and events.