How to Create an Event Timeline in WordPress

A WordPress event timeline very effective visual tools for conveying dataadds a unique aesthetic and interactive touch to your page. A timeline is often used to display a series of events, so it’s perfectly suited for your company (or group or relationship) history, personal success milestones, or content release dates. It can also be useful if you are creating a website for an event – it can be a new way to view your schedule. All you have to do is make sure the method you choose is compatible with your event management plugin, if you are using it.

There are several ways to create a WordPress event timeline. Our first recommendationAs always, it’s best to use a theme that already has a timeline functionality. If you’re working on a budget or don’t want to change your theme because it doesn’t use a timeline, you can still create a timeline. We’ll show you two ways to do this: with Gutenberg block and using a custom plugin.

How to Create an Event Timeline with the Gutenberg Blog

You can create an event timeline using the Gutenberg editor, but the block you need specifically for this purpose is not included – you have to install it Gutenberg Blocks – Ultimate Addons for Gutenberg. This plugin will give you lots of new blocks to work with; one of them is the event timeline block, the use of which we will show you here. If you don’t know how to install a plugin, we’re here for you.

After installing and activating the plugin, you can create a timeline on a post or page. plus sign to add a block and find the content timeline block. will be in Ultimate Addon Blocks menu, but the easiest way to find it would be to use the search bar.

You will now see a placeholder timeline. When this block is selected, you will see several menus on the right. on by default Number of Items. we will increase it 6.

Next Date Settings. You can choose whether to display dates using View Post Date change. In History You can change the date format from the Format submenu. We’ll leave both of these controls as they are, but you can adjust them to your preference. We will be changing our dates to follow them in chronological order. date format in Date Settings The fields are MM/DD/YYYY. At the bottom of the menu are settings you can use to choose different colors and change typography options for date text, but we’ll leave that as the default.

Next, we have Order submenu. These are the deal Orientation the timeline itself, Arrow Alignment to the event box and how the timeline stacks up (pile on), is about responsiveness and appearance of timeline on tablet and mobile platforms. We will leave the default values.

This space The submenu contains options for the behavior of each timeline box. You can adjust them to your liking, but we find the spacing between the boxes just fine, so we won’t play with them. In Timeline Item In its submenu you can select typography settings for timeline items. We will leave the main setting on H4raise rounded corners By setting it to 10 it makes our boxes look smoother and Filling material Up to 30, just to stretch the timeline a bit. we will not change title or Contents settings, but you can do this by clicking. Wrench symbol. These settings relate to the appearance of the text inside the boxes.

Finally, in binding In the submenu you can change the settings to the connecting line between the boxes. We will change the icon to a pint, but not change other icon settings (size, background size, border width, and connector width). This binding submenu contains its own submenu – Color settings. We will use this to change the color of the connector to mauve (#aa86a6). Liner, Boundary and Background when they are inside FocusLeaves it light gray in normal mode. The colors of all elements are customizable so you can change them to match your website design. we will not change Color settings. This submenu contains the color options for your boxes and the text inside. Also, we will not change any of the settings. Further submenu, because they are not required for this demonstration. We will also be adding some text to our events to bring them to life. Just click to edit any title and description in any box.

And using a custom Gutenberg block, your event timeline is complete!

How to Create an Event Timeline Using a Custom Plugin

For this demonstration we will use Great Timeline. This is just one of our preferred solutions. If you are looking for a plugin, we have compiled a list of WordPress timeline plugins for you to choose from. You will need to install and activate the Cool Timeline plugin first. If you don’t know how to install and activate a plugin, we have a tutorial for that too.

After installing and activating the plugin, we will now need to configure it. Find the Great Timeline Settings from you Additions screen. In General Settingswhich manages the default settings for all the stories you will use. Great Timeline for, we will change Timeline Title with Our storywe will leave Title Title Tag aspect H1, but you can choose titles from H1 to H6. we will arrange Number of stories to view by 6, as we leave Content Length in 50 words. we will also leave Stories Description and Story Ranking at default values Short and DEFINITIONfinishing.

We will also upload a free photo. timeline default image and let go Display Read more over Yeah, the default value. we then Save Changes.

Next Style Settings we will leave the tab Container Background over CLOSED. we will choose some colors for Story Background, circle, Liner, Firstly and Second which will fit better with our overall theme. we will not touch Special Styles Section. We will not deal with them. Typography Settingsconcerning the font settings for Main title, Story Title and Message Contentwith additional option lower case, uppercase letterand capitalized (default) Story Title Style. Similarly, Enhanced settings It’s none of our business, because in the free version we’re working with, these only include an overview of premium features.

After saving our settings, we will go to: Timeline Stories/Add New from the menu on the left

We will produce each story item separately, giving it a Titleone Beer icon inside Story Icons Menua date, using Date Pickerand some randomly generated text as padding. We will repeat this six times, creating six stories. Also a featured image for each of these. We’ll leave it open for this demonstration.

When you line up your stories, that’s it. Timeline Stories/All Stories The screen should look like.

Awesome Timeline plugin works best for pages. To create a story page, go to: Pages/Add New using your menu on the left. Make sure you’re using the classic editor. We will add a title to our story page and use our new page. Awesome Timeline Shortcode generator Add Awesome Timeline Shortcode.

The timeline menu will appear. we will leave Timeline Layout by default, Timeline Dates Drop to ymd Timeline View aspect DefaultChoose YEAH for Story Iconset up number of stories with 6Choose None for Stories Animation Effect, summary for Story Descriptionand DEFINITIONending for story layout. These settings general settings in the plugin configuration options. We will click when done OK.

This will create a shortcode wherever our cursor is in the main text field. You now have an eye-catching timeline for your visitors.

As a result

Now you know two ways to view an event timeline in WordPress. It’s useful for company histories, personal achievement timelines, project timelines, and the like, but we can also find it used as a new way to show event timelines, or as an educational tool that illustrates historical events or the developmental stages of organisms – any subject that implies progress. An event timeline is just a data visualization tool and with a little imagination you can do many different things with it. So, whether you’re using a plugin, a Gutenberg block, or a theme feature, event timelines are a useful tool for knowing your way around.