How to Create a WordPress Posts Timeline

Displaying your content the right way can be just as important as ensuring its quality. There are plenty of options in WordPress besides your standard blog posts, and being creative with them can pay off. One of the more interesting approaches you can use is to display your content using a WordPress posts timeline.

A posts timeline enables you to tell compelling stories by breaking them down into digestible bites and events. They’re simple yet effective, and you can create one in WordPress even without a background in web design.

Example:

Example of a WordPress posts timeline.

In this article, we’ll cover some scenarios when you might choose to use a posts timeline, and teach you how to create one using the Timeline Express plugin. Let’s get started!

When you should use post timelines

Post timelines can be a wonderful addition to most websites, as long as the content you want to display mixes well with the format. A timeline enables you to explore how something has evolved over time, which means you need to have a strong central subject. It wouldn’t make much sense if you used a posts timeline to link together several blog posts with no central theme.

Some instances where timelines work well include:

Company websites, when you want to display the evolution of your business.
Portfolio sites, as a way to illustrate your work experience.
About pages, if you want to show off your ‘history’.

With that out of the way, let’s discuss how to create a stylish WordPress posts timeline.

How to create a WordPress posts timeline (in 3 steps)

For the purposes of this tutorial, we’ll be using the Timeline Express plugin. This is by no means the only tool available, but it’s one of our favorites due to its ease of use.

Before we jump in, you’ll need to install and activate the plugin. When you’re ready, proceed to step one.

Step 1: Configure the Timeline Express plugin

Before you can start designing your timeline, you need to make sure the plugin is configured to your liking. After activating the plugin, a new Timeline Express tab will appear on your dashboard. Click on it and choose the Settings option.

The first two settings determine how your WordPress posts timeline will display. You can select whether to use only events from the past or future (or both) under Time Frame. Then you can choose whether to display events using an ascending or descending chronological order:

Since the Timeline Express plugin draws from custom post types (called ‘announcements’), you need to select how many characters to display from each post on your timeline. The number you use will depend on how lengthy you want each of your events to be. For example, the default setting of 50 characters equals roughly one short sentence:

Next you can decide whether to display the date of each announcement, which is always a good way to give your readers context. There’s also a Read More option available, in case you want to flesh out each announcement beyond what appears on your timeline:

You can also choose the colors of your announcements. Each event will display in its own box, and you can choose colors for the boxes’ backgrounds and shadows, as well as for the main background line that connects them:

Once you’ve taken care of these settings you can move on to step two, which is where things get interesting!

Step 2: Create your announcements

As we mentioned earlier, Timeline Express refers to the events of each timeline as announcements. That means you’ll need to create individual announcements for your WordPress posts timeline. Let’s go over how to make that happen.

From your dashboard, go to Timeline Express > New Announcement. You’ll find yourself in the WordPress editor, with a few new options at the top.

The first thing you’ll need to do is choose a name for your announcement, which will appear on your timeline. Then pick a color and an icon:

Next you need to specify the date the event happened (or will happen). Then you can add an image to the event using the Announcement Image option:

This picture will act like a featured image, but it needs to be added using this specific field. If you add a featured image the regular way, it won’t appear on your timeline.

Finally, you need to add the text you want your announcement to display. Remember that earlier you set a cap for the number of characters that would appear under each announcement. Make sure to limit your excerpts to this cap, so you won’t need to edit them later.

When you’re satisfied, hit the Publish button. Then all you need to do is repeat this process for as many announcements that you want your timeline to contain.

Step 3: Display your WordPress posts timeline

Now that you’ve created all the announcements that will appear on your WordPress posts timeline, it’s time to publish the whole thing. This plugin’s free version only enables us to publish a single timeline, which makes this process remarkably easy. All you need to do is include the following shortcode into your desired page: [timeline-express].

Save your changes, and your timeline will be ready to go. Here’s an example of a final product I built:

If you customize each of your announcements carefully, you’ll be able to build something just as good as the above (or better) in no time!

Conclusion

Using a WordPress posts timeline is an elegant way to tell complex stories without resorting to regular old blog posts. You can include one in your portfolio to help potential employers understand your professional development, or you can incorporate one into your service website so clients can see how your business has evolved.

Whatever your reasons might be, the Timeline Express plugin makes the process simple.

Do you have any questions about how to use timelines effectively on your website? Ask away in the comments section below!