Do you want to add a beautiful event timeline to your WordPress website?
History can be complicated, especially when there are lots of different dates, facts, and other information to understand. By creating an event timeline, you can show your company’s history, personal timeline, or any series of events in a way that’s more engaging.
In this article, we will show you how you can add a beautiful event timeline in WordPress.
Why Add a Beautiful Event Timeline in WordPress
Many WordPress website owners use timelines to show a series of related events in a nicely organized and visually appealing way.
Businesses and organizations often use timelines to show their history. For example, WPBeginner’s parent company Awesome Motive shows a timeline of how we grew from a simple blog to a family of premium WordPress plugins.
If you run a travel blog or photography website, then you can also show your photographs in a nice vertical timeline that shows your journey around the world. This can be more engaging than writing your history and adding it to your site as a page of plain text.
How to Add an Event Timeline in WordPress
The easiest way to add an event timeline in WordPress is by using the Cool Timeline plugin.
This plugin adds a new Timeline Addons area to the WordPress dashboard where you can build your timeline. Using this addon area, you can add each event separately by typing in a title and description, setting a featured image, and adding other important information, as you can see in the following image.
Once you’re done adding the events, Cool Timeline will show all of these event stories on the same timeline. You can then add the timeline to any page or post.
This method is perfect if you want to show the same timeline multiple times across your website. However, it only lets you create a single timeline.
The other option is to use the Cool Timeline Block to build a timeline visually inside the WordPress block editor.
By adding multiple Cool Timeline Blocks to your website, you can show different timelines on different parts of your site. However, this method doesn’t let you re-use the same timeline multiple times across your website, unless you save them as a block pattern yourself.
In this guide, we’ll be covering both methods. No matter how you build your timeline, you’ll need to install and activate the Cool Timeline plugin. If you need more details, then please see our guide on how to install a WordPress plugin.
Once you’ve done that, you can create your timeline using either the Timeline Addons menu or the block editor. If you prefer to jump straight to a particular method, then you can use the links below.
- Method 1. How to build a reusable event timeline using the Timeline Addons menu
- Method 2. How to create multiple event timelines in WordPress using the timeline block
Method 1. How to Build a Reusable Event Timeline Using the Timeline Addons Menu
The Timeline Addons menu is a new section of the WordPress dashboard where you can create each event separately. Cool Timeline will then add all of these events to a timeline, ready for you to show on your WordPress blog or website.
To create your first event, go to Timeline Addons » Add New Story. You can then give this event a title by typing into the Add Title field.
In the main editor, you can go ahead and type in all the text that you want to show on your timeline. This will typically be a description of the event.
Once you’ve done that, it’s time to click on the ‘Set featured image’ link.
You can now choose the image that will represent the event on your timeline. You can either click to choose an image from the WordPress media library, or upload a new image file from your computer.
If you need help creating professionally-designed images for your timeline, then you can see our expert pick of the best web design software.
Next, scroll to the Timeline Story Settings section. Here, click on the ‘Story Date / Year’ field. You can now use the calendar popup to select the time and date when the event happened.
You can also choose between a ‘Full’ or ‘Small’ image for the event.
In the following image, you can see an example of a ‘Full’ image.
Larger images will draw the visitor’s attention towards the most important events on the timeline. However, ‘Full’ images take up more space.
The following image shows the same event, but this time with a ‘Small’ image instead.
If you want to add lots of different events to your timeline, then you may want to use the ‘Small’ setting.
This can stop your timeline from looking cluttered.
After making these changes, scroll to the top of the page and click on the ‘Publish’ button.
You can now repeat these steps to create more events.
Want to see all the events you’ve created so far? Then simply go to Timeline Addons » Cool Timeline Stories.
Once you’ve created all your events, the next step is customizing how the timeline will look on your website. To do this, go to Timeline Addons » Timeline Settings.
To start, make sure the ‘General Settings’ tab is selected.
In the ‘Timeline Title’ you can type in the title that will appear above your timeline.
Cool Timeline can also show an image above your timeline, such as your company logo. This can help reinforce your branding, and let visitors know what the timeline is showing.
To add this optional image, click on the ‘Upload’ button.
You can now either choose an image from your WordPress media library or upload a new file from your computer.
If you add lots of text to a timeline, then it can start to look cluttered and off-putting.
With this in mind, you may want to set a maximum number of words that will be shown on the timeline. You can then add a ‘Read More’ link for any visitors who want to learn more about the event.
To set a maximum word limit, simply type a number into the Content Length field.
If you do set a limit, then it’s a good idea to add ‘Read More’ links to your timeline. Cool Timeline will then add this link to any descriptions that are bigger than your word limit.
To add this link, find the ‘Display read more?’ section. Then simply click on the ‘Yes’ button.
You can now decide whether clicking the ‘Read More’ link will show the rest of your text in the same tab, or a new browser tab. To make this choice, simply click on either the ‘Same Tab’ or ‘New Tab’ radio button.
By default, the timeline will show the year when each event happened. However, you may not always need to show this information, for example if all the events happened in the same year.
To hide the year label, simply click on the ‘Year Label’ slider to turn it from ‘Show’ to ‘Hide.’
By default, the first event in your timeline will appear on the right-hand side of the timeline’s vertical line.
Want to show this event on the left-hand side of the timeline instead? Then simply click on the ‘Left’ button next to ‘Vertical Timeline Stories Starts From.’
When you’re happy with your changes, click on the Save button to save your changes.
Next, click on the ‘Style Settings’ tab.
By default, the timeline doesn’t have a background.
If you want, then you can add a colored background to your timeline by clicking on the Timeline Background slider to turn it from ‘No’ to ‘Yes.’
Then, go ahead and click on the button next to ‘Story background color.’
You can now choose a background color using the color picker settings.
This screen also has similar color settings for all the different parts of your timeline, including the vertical line and the event titles.
To change any of these default colors, simply click on the section’s button and then use the color picker that appears.
When you’re happy with the changes you’ve made, don’t forget to click on the Save button.
Next, click on the Typography Settings tab. Here, you can change the size and font that’s used for the different content in your timeline, such as the timeline title and story title.
If you change the default typography settings then don’t forget to save your changes by clicking on the Save button.
Once you’ve finished customizing the timeline, you’re ready to add it to your website.
Simply open the page or post where you want to show the timeline, and then go ahead and click on the + button.
Now, type in ‘Cool Timeline.’ This plugin has a few different blocks, so make sure you click on the ‘Cool Timeline Shortcode Block.’
You can now either update or publish your page as normal.
Now, if you visit your website you’ll see the timeline live.
Method 2. How to Create Multiple Event Timelines in WordPress Using the Timeline Block
You can also build a beautiful event timeline in WordPress using the block editor and ‘Cool Timeline Block.’
This block has lots of placeholder content. To build your timeline, you simply need to replace each placeholder with your own text and images. In this way, you build your timeline in a more visual way.
To start, simply open the page or post where you want to add a timeline.
You can then click on the + icon and type in ‘Cool Timeline Block.’ When this block shows up, click to add it to the page or post.
The Cool Timeline block has four placeholder events.
To start, click on the first event in the timeline. In the right-hand menu, replace the ‘Story Heading’ placeholder with the heading that you want to use for this event.
Next, type a description into the ‘Story Description’ field.
After that, find the ‘Primary Label (Date/Steps)’ field. Here, go ahead and type in the date when this event happened.
By default the Cool Timeline block shows the first event on the right-hand side of the timeline.
If you prefer, then you can show the event on the left-hand side of the vertical line, by clicking on the ‘Left’ radio button.
The Cool Timeline block has a placeholder image for each event. To replace this placeholder with your own image, simply click on the ‘Remove’ button.
Once you’ve done that, click on the ‘Upload/Choose Image’ button.
You can then either choose an image from the WordPress media library or upload a new file from your computer.
By default, the Cool Timeline Block will show each image at its full size. If you want to show a smaller image instead, then simply open the ‘Image Size’ dropdown and choose either ‘Medium’ or ‘Thumbnail.’
As soon as you click on the different image sizes, the block will update to show the new image. This allows you to try out different sizes to see what looks the best on your website.
By default, the timeline marks each event on the vertical line using a dot. You may want to replace this plain dot with a custom icon. For example, you might use different icons for different types of event.
To take a look at the different custom icons that you go use for your timeline, simply click on ‘Custom (Font Awesome Icon).’
Then, click on the arrow icon. You can now scroll through all of the different icons.
When you find an icon that you want to use for this event, simply give it a click.
You can now customize the rest of the placeholder events following the same process described above.
If you want to add more events to the timeline, then simply go ahead and click on the ‘Add Story’ icon.
This adds a new placeholder event, ready for you to customize.
When you’re happy with how the timeline looks, you can either update or publish the page as normal. If you visit your website you’ll now see the timeline live.
We hope this article helped you learn how to add a beautiful event timeline to your WordPress website. You may also want to check out our guide on how to track website visitors to your WordPress site and the best business phone services for small businesses.