WP SITES

3086 Coded Tutorials & 290 Plugins

How To Make A Timeline With Images

Do you want to make a cool timeline on your website? It’s like making a story with pictures and words that goes from top to bottom. Let me show you how to do it step by step!

What is a Timeline?
A timeline is like a story that shows things that happened in order. Like : First I woke up, then I ate breakfast, then I went to school. Each part gets a number and a picture with a title and short description!

Adding Items To Your Timeline

Step 1 : Install The Vertical Timeline Plugin

Download the vertical timeline plugin for WordPress and install the plugin.

Step 2 : Go to Your Timeline Items Settings

  1. Log into your WordPress website
  2. Look on the left side for “Timeline”
  3. Click on “Timeline”

Step 3 : Add Your First Timeline Item

  1. Click the “Add New” button
  2. You’ll see a form with boxes to fill out

Step 4 : Fill Out the Boxes
Here’s what each box is for:

Title Box :

  • This is like the name of your story part
  • Example: “I woke up” or “Made breakfast”

Content Box :

  • This is where you write more about what happened
  • Example: “I got out of bed and brushed my teeth”

Step Text Box :

  • This is a short word that goes next to the number
  • Example: “Wake” or “Eat” or “Play”

Image Box :

  • Click “Upload Image” to add a picture
  • Choose a picture from your computer
  • Click “Use This Image”

Step 5 : Save Your Item

  1. Click the “Save Timeline Item” button
  2. Your first timeline item is done!

Step 6 : Add More Items

  1. Click “Add New” again
  2. Fill out the boxes for your next story part
  3. Save it
  4. Keep doing this until you have all your story parts

Step 7 : Put Your Timeline on Your Website

  1. Go to any page or post where you want the timeline
  2. Type this: [vertical_timeline]
  3. Save your page
  4. Look at your website – your timeline will be there!


Now you you can style your timeline, change font colors, add a background and preview your timeline before you make it public. Learn more.

Leave a Reply

New Plugins