WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» WordPress Plugins» How to Add Beautiful Event Timeline in WordPress

How to Add Beautiful Event Timeline in WordPress

Last updated on January 15th, 2016 by Editorial Staff
422 Shares
Share
Tweet
Share
Special WordPress Hosting offer for WPBeginner Readers
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.

422 Shares
Share
Tweet
Share
Popular on WPBeginner Right Now!
  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Why Build Your Email List Today

    Revealed: Why Building Your Email List is so Important Today!

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

The Ultimate WordPress Toolkit

18 Comments

Leave a Reply
  1. Thomas says:
    Feb 14, 2018 at 6:27 am

    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.

    Reply
    • WPBeginner Support says:
      Feb 15, 2018 at 6:41 pm

      Hi Thomas,

      You can create announcements with matching dates and then add the text you want to show in the timeline.

      Reply
  2. Syed says:
    Jan 17, 2018 at 2:43 pm

    Hi . is it possible to change “Readmore” to have some other name like “Open to know more”

    Reply
  3. Jocelyn Edwards says:
    Jul 27, 2017 at 2:52 am

    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.

    Reply
  4. Jan says:
    May 3, 2017 at 10:59 am

    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?

    Reply
  5. bob says:
    Mar 7, 2017 at 1:19 pm

    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?

    Reply
    • WPBeginner Support says:
      Mar 7, 2017 at 3:34 pm

      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.

      Reply
  6. Mariana Cubillos says:
    Jan 31, 2017 at 12:17 pm

    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?

    Reply
  7. Adam says:
    Jan 15, 2017 at 2:21 pm

    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

    Reply
  8. Ron says:
    Nov 22, 2016 at 5:31 pm

    Sucks! Wasted time installing. Instructions are poor. Announcements? How about posts?

    Reply
  9. Sidhesh Halarnkar says:
    Nov 17, 2016 at 11:38 pm

    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

    Reply
  10. Owais Ali says:
    Nov 10, 2016 at 5:01 pm

    How can I remove the announcement date in my post ?.

    Reply
    • Evan Herman says:
      Nov 21, 2016 at 8:04 pm

      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

      Reply
  11. Lindsey @ Hut Marketing says:
    Jul 19, 2016 at 4:16 pm

    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

    Reply
  12. John Morken says:
    Dec 4, 2015 at 11:18 am

    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.

    Reply
  13. Chris says:
    Nov 18, 2015 at 5:06 am

    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 :)

    Reply
    • WPBeginner Support says:
      Nov 18, 2015 at 4:32 pm

      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.

      Reply
  14. Andrew Hansen says:
    Nov 17, 2015 at 2:30 pm

    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.

    Reply

Leave a Reply Cancel 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.

Over 600,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2018 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2018)
    • Which is the Best WordPress Slider? Performance + Quality Compared
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • 5 Best VPN Services for WordPress Users (Compared)
    • HostGator Review - An Honest Look at Speed & Uptime (2018)
    • SiteGround Reviews from 1032 Users & Our Experts (2018)
    • Bluehost Review from Real Users + Performance Stats (2018)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2018 – Step by Step Guide
Deals & Coupons (view all)
CSSIgniter
CSSIgniter Coupon
Get 30% off on the entire CSSIgniter Themes collection.
HostGator
HostGator Coupon
Get 60% OFF HostGator (the same company that WPBeginner uses).
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • List25
  • Awesome Motive
  •  

Copyright © 2009 - 2018 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.