WordPress comes with a default Gutenberg block editor that offers blocks for inserting buttons, social icons, columns, and more. However, in many situations, you need customizable widgets like FAQ, accordion, timeline, etc. In particular, a timeline will be more useful to showcase your progress or growth to your readers. While there are no default blocks for the timeline, luckily you have several ways to add a timeline to your WordPress site.
Related: How to add a timeline widget to a Weebly site?
What is a timeline?
The timeline is a visual representation of events displayed over time. They may take the form of videos, images, text, or other forms of content to provide an engaging and highly interactive user experience. You can add a timeline to your WordPress site in a vertical or horizontal direction, showing the flow of events.
Benefits of adding a timeline?
There are many reasons why you might want to insert a timeline into a post or page:
- This is a great way to showcase your company’s progress or brand history over the years.
- If you offer design services, it is helpful to show the stages of development of projects.
- You can use the timeline for product lifecycle and showcase achievements.
- Also, timelines come in handy when you want to tell stories, visualize products and processes (which convey complex messages as simpler ones) to end users or target audiences.
So displaying beautiful timelines helps to build more trust with your visitors, and here’s how to do it.
Various Methods for Adding a Timeline in WordPress
The easiest option in WordPress is to use one of the available timeline plugins. However, you can also just create a widget and paste it anywhere with custom content.
1. Custom Vertical Timeline Widget
Below is a custom timeline widget that you can insert anywhere on your site using the Custom HTML block.
- 2025
Timeline Event 5
Here is the content for your event on the timeline. Enter a short paragraph to describe the event in detail.
- 2024
Timeline Event 4
Here is the content for your event on the timeline. Enter a short paragraph to describe the event in detail.
- 2023
Timeline Event 3
Here is the content for your event on the timeline. Enter a short paragraph to describe the event in detail.
- 2022
Timeline Event 2
Here is the content for your event on the timeline. Enter a short paragraph to describe the event in detail.
- 2021
Timeline Event 1
Here is the content for your event on the timeline. Enter a short paragraph to describe the event in detail.
Below is the complete code for the timeline widget and you can customize the look and text as per your need. You can paste this code anywhere on your site without additional plugins.
<style>
.tl {
position: relative;
padding: 20px 0 20px;
list-style: none;
}
.tl:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 3px;
margin-left: -1.5px;
background-color: #eeeeee;
}
.tl > li {
position: relative;
margin-bottom: 20px;
list-style-type: none !important;
}
.tl > li:before,
.tl > li:after {
content: " ";
display: table;
}
.tl > li:after {
clear: both;
}
.tl > li:before,
.tl > li:after {
content: " ";
display: table;
}
.tl > li:after {
clear: both;
}
.tl > li > .tl-panel {
float: left;
position: relative;
width: 40%;
padding: 20px;
border: 1px solid #d4d4d4;
border-radius: 5px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
box-shadow: 0 1px 6px rgba(0,0,0,0.175);
}
.tl-body {
font-size: 18px;
line-height: 26px;
color: rgba(121, 112, 112, 0.71);
}
.tl > li > .tl-panel:before {
content: " ";
display: inline-block;
position: absolute;
top: 26px;
right: -15px;
border-top: 15px solid transparent;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
border-left: 15px solid #ccc;
}
.tl > li > .tl-panel:after {
content: " ";
display: inline-block;
position: absolute;
top: 27px;
right: -14px;
border-top: 14px solid transparent;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
border-left: 14px solid #fff;
}
.tl > li > .tl-badge {
z-index: 1;
position: absolute;
top: 16px;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
border-radius: 50% 50% 50% 50%;
text-align: center;
font-size: 1.4em;
line-height: 50px;
color: #fff;
background-color: #999999;
}
.tl > li.tl-inverted > .tl-panel {
float: right;
}
.tl > li.tl-inverted > .tl-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width: 0;
}
.tl > li.tl-inverted > .tl-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width: 0;
}
.tl-badge {
font-size: 18px !important;
font-weight: bold;
}
.tl-badge.primary {
background-color: #2e6da4 !important;
}
.tl-badge.success {
background-color: #3f903f !important;
}
.tl-badge.warning {
background-color: #f0ad4e !important;
}
.tl-badge.danger {
background-color: #d9534f !important;
}
.tl-badge.info {
background-color: #5bc0de !important;
}
.tl-title {
margin-top: 0;
margin-bottom: 10px;
color: rgba(45, 45, 72, 0.44);
font-size: 20px;
}
@media screen and (max-width: 380px) {
.tl > li > .tl-panel {
width:25% !important;
}
}
@media screen and (max-width: 800px) {
.tl > li > .tl-panel {
width:33%;
}
}
</style>
<ul class="tl">
<li>
<div class="tl-badge success">
2025
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event 5</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li class="tl-inverted">
<div class="tl-badge warning">
2024
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event 4</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li>
<div class="tl-badge danger">
2023
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event 3</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li class="tl-inverted">
<div class="tl-badge">
2022
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event 2</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
<li>
<div class="tl-badge info">
2021
</div>
<div class="tl-panel">
<div class="tl-heading">
<h4 class="tl-title">Timeline Event 1</h4>
</div>
<div class="tl-body">
<p>Here is the content for your timeline event. Enter a small paragraph to describe the event in detail.</p>
</div>
</div>
</li>
</ul>2. Add a Timeline to WordPress with a Cool Timeline Plugin
The first step requires installing and activating the Cool Timeline Plugin. To do this, use the search function in the “Add” submenu in the “Plugins” sidebar menu category. After activating the plugin, the “Timeline Stories” and “Cool Timeline Settings” items will now appear as new sidebar menus on your dashboard. To use the plugin, you must create stories and then create a timeline to show the stories as a stream of events.
Plugin default settings
If you want to change the default settings, go to the “Cool Timeline Settings” menu to find all the necessary settings that you can use with the Cool Timeline plugin.
- General Settings – Here you can configure default alignment, content length, title title tag, number of stories to display, enable or disable reading, story order, etc.
- Style settings – here you can customize the colors of the background and other elements. You can also add custom CSS to decorate your timeline according to your needs.
- Typography Settings – Adjust the font size, family, and weight for each element on the timeline.
- Advanced settings – here you can find the differences between the free and pro version.
After completing the settings, click the “Save Changes” button to save all settings.
Create stories for the timeline
As mentioned, you must create stories to use as events in the timeline widget. Hover over the Timeline Stories menu and click on the Add submenu in your site’s admin panel. Add a title and content to accompany your story. Also enter a description of the story using the “Visual” or “Text” interface. Click the “Add Icon” button to select a story icon.
Then scroll down to “Timeline Story Settings” and select the date/year/time of the story, declare the story image as small or full. Install a featured image and complete additional features such as story format, categories, and custom settings that the pro version includes. You can leave the pro version fields blank when using the free version of the plugin. Finally, click the “Publish” button to successfully create a story on the timeline. Also do the same for other stories that will appear on your timeline.
Note: As you can see, the plugin uses the classic editor to create stories while it supports Gutenberg blocks as well as the Classic Editor widget to insert into a post. The stories you create are stored as a custom post type named cool_timeline.
Add a Timeline to a WordPress Post or Page
The plugin offers multiple timeline layouts such as vertical, horizontal, single sided, simple and compact layouts. We will explain how to use the timeline in both the Gutenberg editors and the classic editor.
Using the Cool Timeline shortcode block in the Gutenberg editor
You have two ways to create and add a timeline – use a shortcode or use the instant timeline building block. Once you’re in the Gutenberg editor, click the + icon in the top right corner and search for “timeline”. You will see two blocks – Cool Timeline Shortcode and Cool Timeline – Insta Builder.
Click on the “Cool Timeline Shortcode” block and the plugin will show you a preview along with the shortcode. You can customize options in the sidebar, such as changing the layout and filling in other details that match your interests. The shortcode will be automatically updated and click the “Publish” button.
Now you can view stories that are automatically inserted into a beautiful timeline layout according to your settings.
If you want to display stories on a horizontal timeline, you only need to select “Horizontal” as the timeline layout and other options that match your timeline. On the other hand, simple and compact layouts will work with both horizontal and vertical timeline settings.
In fact, you can paste the shortcode below directly anywhere on your site to showcase stories in a timeline.
[cool-timeline layout="default" skin="default" date-format="F j" icons="YES" show-posts="10" animation="FadeInOut" order="DESC" story-content="full"]Explanations for editing effects are as follows:
- Cool-timeline: This is our default startup syntax for the plugin.
- Layout: There are about five basic layout options: vertical, horizontal, one-sided, simple, and compact. You can make changes to the code above to suit your needs.
- Skin: Pure/Standard options are available here.
- Date Format: You can choose any date format to display next to stories according to your language or country style representation.
- Icons: You can enable or disable (Yes/No) icons for any story on the timeline.
- Show Posts: Helps with pagination, often on a timeline (with more stories).
- Animation: There is only one animation effect available in the free version of Cool Timeline (it’s FadeInOut). You can purchase Pro to get more.
- Order: Helps you arrange and control how stories appear on the timeline in ascending or descending order (ASC / DESC).
- Story-content: It has either a short/long option to display all HTML text, or a short description with additional details for stories on the timeline.
Add Timeline in Gutenberg with Instant Builder Block
The shortcode method is useful as you can copy and paste the shortcode anywhere on your site to display the same timeline. However, you need to create stories, and stories can only be used on one timeline. If you want to create multiple timelines showing different events, you can easily do it in real time using the “Cool Timeline – Instant Builder” block with its settings. Find the “Cool Timeline – Instant Builder” block on your page or in the message editor toolbar. Start editing the timeline title, description, dates, icons, images, and add more stories if you like. You can use “Default (Both Sides)” or “Single Sided” as your timeline layout and customize the title/description sizes and colors.
Add Timeline with Elementor Page Builder
The Cool Timeline plugin offers an additional plugin for use with the popular Elementor page builder plugin. If you are using Elementor, install and activate the “Elementor Timeline Widget Addon” plugin, edit the page or post you want to create your timeline for (“Edit with Elementor” button). Type “timeline” into the search bar, then drag the “Story Timeline” component. Use the Edit Story Timeline settings to change various options to suit your ideal timeline requirements.
Using the classic editor to insert a timeline
If you are using the classic editor instead of Gutenberg, don’t worry!!! Cool Timeline also has an option for the classic editor. When you’re in the classic editor, click the “Cool Timeline Shortcode” drop-down menu and choose “Add Cool Timeline Shortcode”.
Adjust your selection in the pop-up window and click the “OK” button to insert the timeline short code.
Similarly, you can select the “Add cool horizontal timeline” option to insert a horizontal timeline widget.
Final Thoughts
A schedule can greatly increase the credibility of your business. While there are many timeline plugins available, the Cool Timeline plugin offers a decent way to add a timeline to a WordPress site. You can easily create vertical or horizontal layouts by customizing the look and feel. If you are not interested in using the plugin, use the widget code above.