Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Plugins
Code

How to Create a Company Timeline With a WordPress Plugin

by
Difficulty:BeginnerLength:MediumLanguages:

When running a business, creating an emotional connection with your audience is key. This emotional connection will allow you to communicate with your audience on a deeper level, making them more likely to make a purchase on your website. 

While there are many ways that you can create this emotional connection, one method that stands out is to add a timeline to your About Us page on your WordPress website. This timeline allows you to take your audience inside the business and make them feel as if they were and will continue to be a part of the journey. This will not only create an emotional connection, but it will help people to understand your business better and give them a clearer picture of whether or not your products or services are right for them. 

There are many WordPress timeline plugins on the market today, but one stands out above them all. With over 6,000 sales on CodeCanyon, the Cool Timeline WordPress plugin is the most advanced WordPress timeline plugin and can showcase your life history timeline or your company’s story timeline in a responsive horizontal or vertical chronological order.

In this article, we are going to use the Cool Timeline WordPress plugin to present our company’s life history in an About Us page.

 

What We Will Be Building 

In our example, we are the owner of Mugs Coffee. We would like to create an emotional connection with our website viewers by detailing our company’s history in a timeline. This emotional connection will help us get more people to visit our coffee shop and buy coffee on the website. Our timeline will be placed on our website’s about page and contain six different dates, a header, descriptions of what happened in each year, and images to go along with the text. Here is what part of our timeline will look like. 

Cool Timeline Muggs Coffee Timeline

Creating the Timeline

To begin creating our Mugs Coffee company timeline, we will install the Cool Timeline WordPress plugin. Once the plugin is installed, we will head on over to Timeline Stories > Add New from the WordPress admin section. The new story builder will now pop up. From here, we can add our specific timeline dates and begin adding all our information and media to them.

We will begin with our very first entry into the timeline. This very first entry will be labeled Inspiration, so we will type that into the Add title field. This title will be present at the top of the timeline entry.

Next, we will add the text that will be displayed on the timeline entry in the WordPress visual editor below the title field. This entry is meant to let our audience know what inspired us to start Mugs Coffee. 

When you are adding text descriptions for a specific timeline date for your company, try to keep them short. You don’t want to overwhelm your audience with too much information. You just want to provide a little emotional jolt here. 

Cool Timeline inspiration
Filling out the title and description of the timeline entry

Next, we will scroll down to the Timeline Story Settings. We'll now add the date for this entry in the Story Date / Year field. Click the field, and a calendar will pop up. Our "inspiration” entry will be for 1 January 2000, so we will insert this into the calendar. We aren't worried about the exact time for our example, but if you do require a specific time in the day, you can always set that at the bottom of the popup calendar. 

Next, we are going to change the Story Color. Our website’s theme makes use of the colors blue and red. We will make this first entry blue. This will color the banner header, month, and day blue for the particular entry.  

Finally, we are going to add this timeline entry to the categories in the plugin. By default, a Timeline Stories category is created upon installation of the plugin. If we scroll to the top of the timeline entry editor and look on the right-hand side of the screen, you can see the Categories section, with one category labeled Timeline Stories in it. Click the checkbox next to Timeline Stories.

Each timeline story that you add needs to be under a specific category in order for the entire timeline to show up on your webpage. Each category is essentially a new timeline. If you would like to create a new category or timeline, head on over to WP Dashboard > Timeline Stories > Categories > Add New Item and label it accordingly.

We have now created our first entry in the Mugs Coffee timeline and added it to a specific category. We are going to repeat this process for the other five timeline entries, so we will have six timeline entries ready to be displayed on our about page.

Below, you can see what our first timeline entry looks like. 

Cool Timeline Date Entry

Adding the Timeline to the About Page

Now that we have finished adding all six of our stories to our company timeline, we can insert the actual timeline into our about page. To do this, go to Pages > Add New from the WordPress admin dashboard. We will title the page About Us

From the visual page editor, we will add the timeline. Click on the Cool Timeline icon on the far right of the header of the visual editor. Here is an image of the icon you should click. 

Adding Cool Timeline To Your WordPress Page

Once you click on the icon, a pop-up will appear with four different options for the type of timeline to add. We would like to have our website visitors view our timeline vertically and scroll down to see the entire timeline, so we'll choose the Vertical Timeline option. From here, we will be brought to another menu that will give us a range of options on how we would like our timeline to be displayed. 

The first option we are going to change is the Story Order. We are going to change this to DESC, so the timeline will be displayed in descending order, starting in the year 2000 in our case. 

Next, we will change the Timeline Design. We will choose the Elegant option from the dropdown menu as this design fits best with our website's theme. Make sure to experiment with the different designs to find one that works best for your website's theme. 

Finally, we will change the Animation Effects. We want our timeline to fade in to give the timeline a more polished look, so we will choose the fade option. Click the okay button and the timeline shortcode will now be created and ready to go. You can now view your webpage with our Mugs Coffee company timeline for everyone to see on our about page. For a detailed tutorial on how we created this timeline, you can view the video below.

 

Getting the Most Out of the Cool Timeline Plugin

In this article, we just went over one way that you could use the Cool Timeline plugin. There are many more uses for this timeline than just creating a company story timeline, though. Here are a few ways that you could use this plugin.

Team Page

If you are running a business, you might want to let your audience know who the team members are.

The Cool Timeline plugin allows you to replace the dates with custom text. Under the Timeline Story Settings, you can click the Custom Order Based button, and you will be given the option to add a custom label and a custom secondary label to be displayed under the main label.

If you are creating a team page, you can use the main label to write the name of the person on the team and the secondary label to write the position they have in the business. From there, you can add a short bio in the description and an image of the team member. 

Timeline Story Settings Custom Order Based

Converting Your Blog Into a Timeline

The Cool Timeline plugin also allows you to turn existing blog posts into a timeline. To accomplish this, all you need to do is choose the blog post timelines from the drop-down menu when you click the cool timeline icon in the visual editor header. Choose either the Vertical Content Timeline (Blog) or Horizontal Content Timeline (Blog) option. The timeline menu will pop up, and you can then choose the specific posts that you would like displayed in the timeline.

Guide or Step-by-Step Instructions

The layout of the timeline allows you to display text, images, and links in a clutter-free way. This allows you to systematically display a detailed set of steps or instructions that you want to show your audience. Again, by selecting the Custom Order Based option in the timeline story editor, you can replace the dates with text and links and create a step-by-step visual guide.

Conclusion

When communicating with your customers, you should strive to create an emotional connection with them. This will help your customers relate to your brand and encourage them to make a purchase on your website.

By using the Cool Timeline WordPress plugin, you can easily create an eye-catching timeline that will help you create this emotional connection with your audience. In addition to creating a traditional timeline with this plugin, you can also create other visually appealing timelines that display step-by-step instructions, your website's blog posts, or your team members. 

To give this plugin a try, head over to CodeCanyon and check out the Cool Timeline WordPress plugin. And while you're there, check out some of the other great WordPress plugins available from CodeCanyon.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.