Have you ever wanted to add an event timeline on your site? Recently, one of our users wanted to display a vertical timeline of events that has an interactive experience. In this article, we will show you how to add beautiful event timeline in WordPress without changing your theme.
When and Who Needs Timeline Posts in WordPress
As the name suggests, a timeline is a visual representation of time as a line.
In web design, it is often used to display a timeline of events with images, text, video and other form of content to provide a visually appealing and highly interactive user experience.
Companies use timeline to display their historical information. Personal site owners can use it on their about pages or even for their blog page. If you run a travel or photography website, then you can display your photographs in a nice vertical timeline that shows your journey.
If you run an event website, then you can use the timeline to live blog your event or add posts about past events.
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
How To Add a Timeline in WordPress
First thing you need to do is install and activate the Timeline Express plugin. Upon activation, you need to visit Timeline Express » Add New Announcement to add your first announcement or event.
Simply provide a title for the announcement or event, then select color, date and icon. Timeline express comes with beautiful Font Awesome icon font built-in.
Next, you can provide an announcement image which will be used as the banner. This image should be at least 650px wide or larger. Below that you will find the post editor where you can enter further details about the announcement. You can add images and videos as well.
Once you finish adding your announcement, you can publish it. Repeat the process to add a few more announcements.
Displaying Timeline on Your Website
After you have created a few announcements, it is time to display them on your website. Simply create a new page in WordPress and give it a suitable title. Add the shortcode [timeline-express] in the post editor and click on the publish button.
That’s all you can now visit the page to see the timeline in action.
We hope this article helped you add events timeline in WordPress. You may also want to see our guide on how to add Google calendar in WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Is there a similar plugin that can provide a sites member activity information as a timeline? I mean, to the member themselves, in their personal dashboard for example?
I cannot download it. I went through all of the steps, but I cant find the add plugin section. So I need a different version of wordpress?
Hi Bob,
You are probably using WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Having trouble with the icons because every time I add a new post they don’t correspond to the post and go the opposite way. Is there anyway to make icons change respectively to the post? For example, if on one post there is an arrow to the right, as soon as I publish a new post the post moves to the left but the corresponding arrow stays to the right. How do I fix that?
Sorry doesnt work
a) cant put a date further back than 2007 – it’s a timeline !
b) dropdown for icon annoucement doesnt drop down
Waste of time
Sucks! Wasted time installing. Instructions are poor. Announcements? How about posts?
Sir
I want to Create a website for an Research Department and its layout is as follow :
1)They are having main slider which goes across the home page.
3)After slider they are having about us section
2)after about us they are having two section basically they are News and Events in the Same Row with Scrolling Effects.
Im , finding very hard to create these two section at homepage do you have any suggestion’s for doing so then please tell me sir.
Waiting for your Response
Thanks and Regards,
Sidhesh Halarnkar
How can I remove the announcement date in my post ?.
Hi Owais,
You can easily hide the dates using the settings page. Head into ‘Timeline Express > Settings’ and toggle off the date visibility.
If you are still having issues, please see our documentation:
Evan
Have you noticed that the images are not responsive? On my phone they look squished…
I’m about to just load a series of images instead of messing with a timeline lol
I have six announcements posted. When you press the read more button, I get the additional text ok but then a big list below that of all the pages and more on my website. Also, the video (and image) from the first announcement migrates to the other announcements that are only videos and replaces them.
Hi there! The plugin is not working correctly. When you set up the announcements and post them to the page they are not displayed ok if you remove the “read more” option. Event icons are one over another and the text boxes have no space between them. The top one end just over the heading of the next one.
When you turn on the read more option the whole mess is fixed but not everyone wants to have the read more button
Please try the plugin with a default theme and see if it still misbehaves. If it does not, then this means that your theme’s CSS is conflicting with the plugin’s CSS.
This is awesome. I’m working on a novel and this will be great once I start blogging about my fiction writing. I’ll be able to use this to lay out my plot after my novel is published (hopefully lol), so peopl can review the order of events in any easily understandable format.