How to Create Content in a Timeline in WordPress
Tags: wordpress, timeline, plugin
Published: 2021-01-11 04:30:20

<!-- wp:paragraph -->

<p>Marketers always find new and creative ways to display content on the WordPress website thereby attracting more viewers. In this article, I'll show you an effective way to do it. That's creating content in a timeline. <!--more--></p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>When Should We Create Contents in Timeline?</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Creating content in a timeline will make your content more eye-catching, attractive, and professional. Besides, this can highlight the sequence that important events happen.</p>

<p><img class="aligncenter" src="https://imgur.com/QqXd6vp.gif" alt="Create Contents in Timeline on WordPress website" width="1343" height="602" /></p>

<!-- /wp:embed -->

<!-- wp:paragraph -->

<p>You should create timelines for content that is on the same topic. Besides, the content should have its own timestamp.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Here is some content that is usually created in a timeline:</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li>Portfolio pages (to show experience and work history);</li>

<li>Historical events;</li>

<li>History and development of an organization/product (such as the introduction and development of smartphones);</li>

<li>Planned events and activities;</li>

<li>Etc.</li>

</ul>

<!-- /wp:list -->

<!-- wp:paragraph -->

<p>In this article, for better imagination, I'll create a timeline about the establishment and development of a company.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Create Content in a Timeline Using a Plugin</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>On the market, there're many types of plugins to create timelines. In this article, I use the <strong>Timeline Express</strong> plugin. This is one of the most popular plugins to create timelines. It's powerful, easy to use, and has many features. Therefore, it's especially suitable for WordPress beginners.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>The free version of Timeline Express allows you to display only one timeline. If you want to display many timelines at the same time and have more advanced features, let's install add-ons or upgrade to the premium version.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Timeline Express has a lot of useful add-ons (including free and premium add-ons) such as:</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li>HTML Excerpts: Create the HTML description for announcements;</li>

<li>Single Column: Display timeline in one column only;</li>

<li>No Icons: Delete the default icon of announcements;</li>

<li>Slider: Replace the banner with a slider;</li>

<li>Image Icons: Replace the default icon with a picture;</li>

<li>...</li>

</ul>

<!-- /wp:list -->

<!-- wp:paragraph -->

<p>You can learn about Timeline Express' add-ons <a href="https://www.wp-timelineexpress.com/add-ons/">here</a>.</p>

<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->

<h3>Step 1: Install and Activate the Plugin</h3>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>The free version of Timeline Express is available on <a href="https://wordpress.org/">wordpress.org</a> so that you can install it directly from the <strong>Admin Dashboard</strong>. To learn how to install and activate a plugin, let's refer to <a href="https://gretathemes.com/install-wordpress-plugin/">this article</a>.</p>

<p><img class="aligncenter" src="https://i.imgur.com/4k64ppW.png" alt="Install and Activate the Timeline Express Plugin" width="1350" height="625" /></p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":3} -->

<h3>Step 2: Create Announcements</h3>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Announcement is a post representing an event in the timeline. It contains the description, the time that the event happened, and other information.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>In my example, announcements are events such as Establishing a company (1997), Introducing the first product (1998), Initial Public Offering (2000), ...</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Each announcement is a post so that you have to create them one by one. To create an announcement, go to <strong>Timeline Express</strong> (1) &gt; <strong>New Announcement </strong>(2). After that, enter the title to the <strong>Add title</strong> box (3) and set up some options in the <strong>Announcement Info</strong> section (4) such as:</p>

<p><img class="aligncenter" src="https://i.imgur.com/Kg4CqhE.png" alt="Create new announcements with the Timeline Express plugin" width="1345" height="624" /></p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Now, pay more attention to the <strong>Announcement Date</strong> section. It's to choose the time that the announcement happens. The order of displaying the post will depend on the time you enter here.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>After that, let's enter the description for the announcement. The minimum length is 25 and the maximum length depends on the settings of the <strong>Announcement Excerpt Length</strong> section (Step 4).</p>

<p><img class="aligncenter" src="https://i.imgur.com/Ip02Skb.png" alt="enter the description for the announcement of the timeline" width="1574" height="720" /></p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Next, click <strong>Publish</strong>. After that, announcements will be added automatically to the timeline.</p>

<p><img class="aligncenter" src="https://i.imgur.com/vO8uzxs.png" alt="Announcements will be added automatically to the timeline." width="1584" height="718" /></p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":3} -->

<h3>Step 3: Display Timeline in a Page / Post</h3>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>To display timelines in a <a href="https://gretathemes.com/post-page-different/">page / post</a>, you just need to enter the following shortcode into its content section.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p><em>[timeline-express]</em></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>And here's the result:</p>

<p><img class="aligncenter" src="https://imgur.com/1PHx7NA.gif" alt="Display Timeline in a Page / Post" width="991" height="487" /> So you've finished creating a timeline. If you want to display timelines more beautifully or change elements such as colors, icons, order, ... so just follow the next step.</p>

<!-- /wp:embed -->

<!-- wp:heading {"level":3} -->

<h3>Step 4: Customize the Timeline's Display</h3>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>After the installing and activating process, go to <strong>Timeline Express</strong> &gt; <strong>Settings</strong> to set up options of the plugin to meet your requirements.</p>

<p><img class="aligncenter" src="https://i.imgur.com/xhMmyO6.png" alt="Customize the Timeline's Display" width="1346" height="625" /></p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>In this section, you should pay heed to these options:</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li><strong>Time frame</strong>: choose to display events in the past only, future only, or both.</li>

<li><strong>Display order</strong>: Ascending or Descending.</li>

<li><strong>Announcement Excerpt Length</strong></li>

<li><strong>Date visibility</strong>: show or hide the date of announcements.</li>

</ul>

<!-- /wp:list -->

<!-- wp:paragraph -->

<p>Besides, there are many other options. You should review and configure each one as you want. Just remember to read their enclosed detailed description to understand what they are.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Finally, click <strong>Save Settings</strong>.</p>

<p><img class="aligncenter" src="https://i.imgur.com/OWwdyBS.png" alt="Save settings of the WordPress plugin" width="828" height="628" /></p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Here is the result after the customization:</p>

<p><img class="aligncenter" src="https://imgur.com/QqXd6vp.gif" alt="The content display on the front end of WordPress website" width="1343" height="602" /></p>

<!-- /wp:embed -->

<!-- wp:heading -->

<h2>Last Words</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Using a plugin to create timelines is quite easy, isn't it? This will make your content more attractive, so let's try it on your website. Good luck and don't forget to follow our upcoming post to gain more useful WordPress techniques!</p>