Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add Beautiful Event Timeline in WordPress

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.

Timeline used in an infographic

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.

Preview of a timeline

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

Subscribe to WPBeginner

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.

Adding a new announcement or event in your timeline

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

24 CommentsLeave a Reply

  1. Can you use create different timelines. For example, I want one to show my paid job and another with my Volunteering positions.

  2. I got it like A B C. I was looking for cool timeline by searching for it in wpbeginners when I saw the express timeline.
    Many thanks wpbeginners.

  3. I’m not sure if my first question has got lost, so i try again.
    Any chance to include, to put older, already existing postings in the timeline?
    I’ve got several postings that belong to historical information back to the beginning of 1900 and i want to connect it so that customers use the timeline functions to see what happend here 100 years ago.

  4. Hi, just wondering if there is a way to change the settings on this plugin so that the dates can be displayed according to year (i.e. 2007) rather than a specific date of the year (July 17, 2007) Thanks.

  5. 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?

  6. 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?

  7. 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?

  8. 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

  9. 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

    • 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

  10. 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

  11. 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.

  12. 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.

      Admin

  13. 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.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.