Timeline Slider For WordPress – Plugin

Showcase your stories with Timeline Slider plugin!

thumbnail

Live Preview

A side profile of a woman in a russet-colored turtleneck and white bag. She looks up with her eyes closed.

“Contributing makes me feel like I’m being useful to the planet.”

— Anna Wong, Volunteer
A green and brown rural landscape leading into a bright blue ocean and slightly cloudy sky, done in oil paints.

Shore with Blue Sea

Eleanor Harris (American, 1901-1942)

A side profile of a woman in a russet-colored turtleneck and white bag. She looks up with her eyes closed.

“Contributing makes me feel like I’m being useful to the planet.”

— Anna Wong, Volunteer
A green and brown rural landscape leading into a bright blue ocean and slightly cloudy sky, done in oil paints.

Shore with Blue Sea

Eleanor Harris (American, 1901-1942)

Documentation

Introduction

Timeline Slider plugin allows you to create responsive and beautiful timeline sliders using WordPress block editor. It is easily embed able anywhere on a WordPress wesbite using shortcode.

Each timeline slide can be design separatly using Gutenberg Block Editor

How to install?

  • Visit "Plugins" page on WordPress dashboard
  • Click on "Add New" button
  • Click on "Upload Plugin" button
  • Choose plugin's zip file that you got from Codecanyon and then click on "Install Now"
  • Once the intallation is finished, click on "Activate Plugin" button

How to use?

Let's create our first timeline slider. After the plugin is activated. You'll have Timeline Slider plugin looking like this on your WordPress dashboard:

Screenshot 2022 01 22 225851

In order to create our first slider, we have to create a "Timeline Layout" first.

Screenshot 2022 01 22 230303

Name your timeline layout and click on "Add new Timeline Layout" button to save it. It'll generate a shortcode that can be use to display this layout (Slider) anywhere on the site. The Shortcode will appeare like this:

Screenshot 2022 01 22 230822

Now we have successfully created our first slider, but now it's completely emty so we just need to add new slides and then we can use the shortcode to display the slider. To add a new slide, just click on "Add New Timeline Slide" from the dashboard and will open the Gutenberg Block Editor for you to create the slide using blocks. Now here on the edit page we need to connect this slide to the layout we created before. To do that we can select our layout from the right panel as mentined in the screenshot

Screenshot 2022 01 22 231928

Now here you can start creating your slide with block editor. The "Title" of the slide will be show on the timeline slider's pagination. You can create & connect multiple slides with a layout in the same way. Now I've quicky created three slides by adding Gutenberg's patterns.

Screenshot 2022 01 22 233440

Let's see how it looks. Copy the shortcode from "Timeline Layouts" and just simply paste it where you want to display the slider and BOOM!

Screenshot 2022 01 23 000341