{"id":13308,"date":"2020-09-27T15:00:48","date_gmt":"2020-09-27T13:00:48","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=13308"},"modified":"2021-05-11T13:01:50","modified_gmt":"2021-05-11T11:01:50","slug":"wordpress-event-timeline","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-event-timeline\/","title":{"rendered":"How to Create an Event Timeline in WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]A WordPress event timeline can be a very effective visual means of conveying data<\/strong>, lending your page a unique aesthetic and interactive touch. A timeline is most often used to display a sequence of events<\/strong>, so it is more than suitable for your company (or band, or relationship) history, personal achievement milestones, or release dates for content. It may also be useful if you are creating a website for an event \u2013 it could be a novel way of displaying your schedule<\/strong>. You just have to make sure your chosen method is compatible with your event management plugin<\/a>, in case you are using one.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There are several ways to create a WordPress event timeline. Our first suggestion<\/strong>, as always, is to use a theme which already has a timeline functionality<\/a>. If you are working on a budget or don\u2019t want to change your theme simply because it does not use a timeline, you can still create a timeline. We will show you two ways of doing it: with a Gutenberg block<\/strong> and using a specialized plugin<\/strong>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Create an Event Timeline With a Gutenberg Block<\/h2>\n

[\/vc_column_text][vc_column_text]You can create an event timeline using the Gutenberg editor, but the block you need specifically for this purpose does not come included \u2013 you need to install Gutenberg Blocks \u2013 Ultimate Addons for Gutenberg<\/a>. This plugin will give you a multitude of new blocks to work with, one of which being the event timeline block, the usage of which we will demonstrate for you here. If you don\u2019t know how to install a plugin<\/a>, we have you covered .[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Once you install and activate the plugin, you can create a timeline in a post or page by clicking on the plus sign<\/strong> to add a block and finding the content timeline block. It will be in the Ultimate Addon Blocks<\/strong> menu, but the easiest way of finding it would be to use the search bar.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Ultimate <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You will now see a placeholder timeline. When this block is selected, you will see several menus on the right-hand side. The one open on default is Number of Items<\/strong>. We will increase it to 6<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The next one is Date Settings<\/strong>. You can choose whether to display the dates or not, using the Display Post Date<\/strong> toggle. In the Date<\/strong> Format submenu, you can change the date format. We will leave both of these controls as they are, but you can set them to your preference. We will change our dates to follow in chronological order. The date format in the Date Settings<\/strong> fields is MM\/DD\/YYYY. At the bottom of the menu are the settings you can use to choose different colours and change typography options for the date text, but we will leave this as default.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ultimate <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next up, we have the Layout<\/strong> submenu. These deal with Orientation<\/strong> of the time line itself, Arrow Alignment<\/strong> in relation to the event box, and how the timeline stacks (Stack on<\/strong>), which is relevant for responsiveness and the look of the timeline on tablet and mobile platforms. We will leave the default values.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ultimate <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The Spacing<\/strong> submenu contains options for the behaviour of each timeline box. You can tweak them to your liking, but we find the spacing between the boxes just fine, so we won\u2019t fiddle with them. In the Timeline Item<\/strong> submenu you can select the typography settings for the timeline items. We will leave the main setting on H4<\/strong>, raise the Rounded Corners<\/strong> setting to 10, making our boxes appear softer, and the Padding<\/strong> to 30, to stretch the timeline out a little. We will not change the Heading<\/strong> or Content<\/strong> settings, but you can do so by clicking on the spanner<\/strong> icon. These settings concern the look of the text inside the boxes.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ultimate <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Finally, in the Connector<\/strong> submenu, you can change the settings to the connecting line between the boxes. We will change the icon to a beer mug, but will not change the other icon settings (size, background size, border width, and connector width<\/strong>). The Connector<\/strong> submenu contains its own submenu \u2013 Color Settings<\/strong>. We will use this to change the connector colour to mauve (#aa86a6) to change the colour of the Line<\/strong>, Border<\/strong> and Background<\/strong> when they are in Focus<\/strong>, leaving it a light gray in the Normal mode. All the elements\u2019 colours are customizable, though, so you can change them up to suit your website\u2019s design. We will not change the Color Settings<\/strong>. This submenu contains the colour options for your boxes and the text in them. We will also not change any of the settings in the Advanced<\/strong> submenu, as they are not needed for this demonstration. We will also add some text to our events, to flesh them out. You can simply click to edit any heading and description in any box.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ultimate <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And your event timeline using a custom Gutenberg block is done!
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Ultimate <\/div>\n<\/div>[vc_empty_space height=”90px”][vc_widget_sidebar sidebar_id=”qi-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Create an Event Timeline Using a Specialized Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]For this demonstration, we will be using Cool Timeline<\/a>. This is just one of our preferred solutions. If you are looking for a plugin, we have made a list of WordPress timeline plugins<\/a> for you to choose from. You will first need to install and activate the Cool Timeline plugin. If you don\u2019t know how to install and activate a plugin<\/a>, we have a tutorial for that, too.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Having installed and activated the plugin, we will now need to configure it. Find the Cool Timeline Settings<\/strong> from your Plugins<\/strong> screen. In General Settings<\/strong>, which govern the default settings for all the stories you will be using Cool Timeline<\/strong> for, we will change the Timeline Title<\/strong> to Our Story<\/strong>, we will leave the Title Heading Tag<\/strong> as H1<\/strong>, but you can choose headings from H1 to H6. We will set the Number of stories to display<\/strong> to 6, while we will leave the Content Length<\/strong> at 50 words. We will also leave the Stories Description<\/strong> and Stories Order<\/strong> at the default values of Short<\/strong> and DESC<\/strong>ending.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Cool <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]We will also upload a free photo as a Timeline default image<\/strong> and leave the Display read more<\/strong> on Yes<\/strong>, the default value. We will then Save Changes<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Cool <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, in the Style Settings<\/strong> tab, we will leave the Container Background<\/strong> on OFF<\/strong>. We will choose some colours for Story Background<\/strong>, Circle<\/strong>, Line,<\/strong> First<\/strong> and Second<\/strong> which will fit our overall theme better. We will not touch the Custom Styles<\/strong> section. We will likewise not fiddle with the Typography Settings<\/strong>, which concern the font settings for Main Title<\/strong>, Story Title<\/strong> and Post Content<\/strong>, with the added option of lowercase<\/strong>, uppercase<\/strong>, and capitalized<\/strong> (default) Story Title Style<\/strong>. Similarly, Advance Settings<\/strong> are of no interest to us, as, with the free version we are working with, they include just an overview of the premium features.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Cool <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once we have saved our settings, we will navigate to Timeline Stories\/Add New<\/strong> from the left-hand side menu.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Timeline <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]We will generate each story item separately, by giving it a Title<\/strong>, selecting a Beer<\/strong> icon in the Story Icons Menu<\/strong>, a date, using the Date Picker<\/strong>, and some random generated text as a filler. We will repeat this six times, creating six stories. You may also choose a Featured Image<\/strong> for each of these. We will leave it plain for this demonstration.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Timeline <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once you have your stories all lined up in a row, this is what your Timeline Stories\/All Stories<\/strong> screen should look like.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"All <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The Cool Timeline plugin works best for pages. To create a story page, navigate to Pages\/Add New<\/strong> using your left-hand side menu. Make sure you are using the classic editor. We will add a title to our story page and use our new Cool Timeline Shortcode<\/strong> generator to Add Cool Timeline Shortcode<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Cool <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The timeline menu will appear. We will leave the Timeline Layout<\/strong> at default, set the Timeline Dates<\/strong> to Y-m-d, leave the Timeline Skin<\/strong> as Default<\/strong>, select YES<\/strong> for the Story Icon<\/strong>, set the number of Stories<\/strong> to 6<\/strong>, select None<\/strong> for Stories Animation Effect<\/strong>, Summary<\/strong> for Story Description<\/strong>, and DESC<\/strong>ending for story order. Note that these settings will override the General<\/strong> settings in the plugin configuration options. When done, we will click OK<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Cool <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This will create a shortcode wherever our cursor was in the main text field. And now you have an eye-catching timeline for your visitors.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Cool <\/div>\n<\/div>[vc_empty_space height=”90px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]Now you know two ways of displaying an event timeline in WordPress. Useful for company histories, personal accomplishment timelines, project timelines and similar, but we can also see it used as a novel way of displaying event schedules or as an educational tool showing historical events or developmental stages of organisms \u2013 any topic that implies progression. An event timeline is just a data visualization tool, and with a little imagination, you can do a lot of different things with it. So, whether you are using a plugin, a Gutenberg block, or a theme feature, event timelines are a useful tool to know your way around.
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Would you like to showcase your business or personal history as a WordPress event timeline? We will show you how.<\/p>\n","protected":false},"author":16990,"featured_media":13316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-13308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/13308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=13308"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/13308\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/13316"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=13308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=13308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=13308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}