Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add a Facebook Style Timeline in WordPress

Creating a Facebook-style timeline on your website can be visually appealing and engaging. It allows you to showcase your life’s journey, business milestones, or project history on your WordPress website.

Making custom pages or posts usually requires hiring a developer or using a website builder. This can be time-consuming and expensive, especially for small businesses. Luckily, there is an easier way to go about things: using a free plugin.

At WPBeginner, we’ve helped thousands of users design their WordPress sites. And we tried multiple plugins to find the right solution for you. Based on our testing, we recommend using the free Timeline Block For Gutenberg plugin.

In this article, we will show you how to add a Facebook-style timeline to WordPress without changing your theme.

How to add a Facebook style timeline in WordPress

Note: This tutorial will explain how to add a visual timeline to your website with your own information. If you’re looking for a way to create a social media timeline for multiple users, then please see our guide on how to make a social media website.

Why Add a Facebook Style Timeline in WordPress?

Whether you’re a business owner, blogger, or individual, a visual timeline can be a valuable tool to elevate your WordPress website

A Facebook-style timeline can significantly enhance your website’s user experience. By allowing visitors to explore your timeline at their own pace, you can create a more interactive and user-friendly website.

Adding a timeline helps with storytelling while creating content. For instance, you can visually present your brand’s history, product launches, or personal milestones in a captivating and easy-to-follow format.

A Facebook-style timeline also helps share your brand’s story in a creative and memorable way, connecting with your audience on an emotional level.

Another benefit is that it helps user engagement and provides visitors with interesting and informative content to encourage them to spend more time on your website.

That said, let’s look at how you can easily add a Facebook-style timeline to your site.

Adding a Facebook Style Timeline in WordPress

The easiest way to create a timeline on your WordPress site is by using the Timeline Block For Gutenberg plugin. This free WordPress plugin is super simple to use. There are no complex configurations, and you can perform all the customization in the content editor.

First, you will need to install and activate the Timeline Block For Gutenberg plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you can simply go to the page or post where you’d like to add the Facebook-style timeline.

When you are in the content editor, just click the ‘+’ sign and add a ‘Timeline Block’.

Add timeline block

Next, you will see a timeline template added to the content editor.

From here, you can change the timeline layout and design from the settings panel on the right.

For instance, the plugin lets you change the layout from vertical to horizontal and choose whether you’d like to show the timeline on both sides or just one side.

Change timeline settings

If you switch to the ‘Style’ tab in the settings panel, then you’ll get options to change the appearance of your timeline.

For instance, there are options to edit the typography, text color, and bottom spacing for the story heading and description.

Change the style of timeline

You can also find more customization options in the ‘Advanced’ tab.

The plugin lets you change the line color, icon color, icon background, item spacing, icon box size, container padding, and much more.

Change advanced settings for timeline

Next, you can edit the text and pictures in the timeline.

By default, the plugin will add dummy text and images. You can simply click on them to start editing.

For example, if you want to change the image, then simply select it and then click the ‘Replace’ option. You can upload a new image or select an existing picture.

Change the image and text in the timeline

Similarly, you can also click on the text and replace it with your content in the timeline.

Next, if you need to add more stories to your timeline, then you can simply click the ‘+ Add Story’ button and enter an image and text.

Add more story and publish

When you’re done, go ahead and click the ‘Publish’ button.

Now, you can visit your website to see the Facebook-style timeline in action.

Timeline preview

Additional Resources on Creating Timelines in WordPress

Here are some more helpful guides on creating different types of timelines and improving the user experience of your site:

We hope this article helped you add a Facebook-style timeline to your WordPress site. You may also want to see our guide on how to make a niche review site in WordPress and our expert pick of the best WordPress portfolio plugins for designers and photographers.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

2 CommentsLeave a Reply

  1. Preetam Kumar Patel

    How to add data in timeline from front end .Means data will be enter from a webpage (like result of a student) and it will be shown in the the time line in defferent page.

  2. Steve

    Why can I not comment or see comments of those who go to our site? Also, why are the pictures not showing up by my posts?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.