Easy Vertical Timeline for WordPress

Vertical Timeline for WordPress is an easy to use plugin for creating vertical timelines with headings, excerpts, and images. Features a modern design with numbered circles, customizable step text, and comprehensive styling options.

Features

• Easy Management: Simple admin interface to add, edit, and delete timeline items
• Rich Content: Each timeline item supports title, content, step text, and image
• Customizable Step Text: Add custom step labels (e.g., “Prep”, “Apply”, “Clean”) instead of just numbers
• Responsive Design: Looks great on all devices
• Customizable Styling: Full control over background colors, width, padding, and font sizes
• Live Preview: Real-time preview of your timeline in the admin settings
• Modern UI: Clean, professional design with black circles and white numbered text
• Sortable: Drag and drop reordering of timeline items
• Media Integration: Built-in WordPress media library integration
• Typography Control: Customizable font sizes for step text, titles, and content
• Background Options: Set custom background colors and padding for the entire timeline

Installation

After plugin installation and activation navigate to ‘Timeline’ in your WordPress admin menu

Usage

Adding Timeline Items

1. Go to Timeline > Add New in your WordPress admin
2. Fill in the required fields:

• Title: The main heading for the timeline item
• Content: The main content/description (supports HTML)
• Step Text: Custom step label (e.g., “Prep”, “Apply”, “Clean”) – optional
• Image URL: Upload or enter an image URL
• Sort Order: Control the display order (lower numbers appear first)
• Status: Set to Active to display on frontend

Timeline Settings

1. Go to Timeline > Settings in your WordPress admin
2. Customize your timeline appearance:

• Background Color: Set a custom background color (default: #efebe4)
• Timeline Width: Control the maximum width (default: 1000px)
• Background Padding: Set padding around the timeline content (default: 30px)
• Step Text Font Size: Control the size of step text (default: 16px)
• Title Font Size: Control the size of timeline titles (default: 24px)
• Content Font Size: Control the size of timeline content (default: 20px)

1. Live Preview: See your changes in real-time in the preview area

Displaying the Timeline

Use the shortcode [vertical_timeline] in any post, page, or widget area.

Shortcode Options

[vertical_timeline show_images="true" show_excerpts="true" limit="5" order="ASC"]

Parameters:

• show_images (true/false): Display images in timeline items
• show_excerpts (true/false): Display excerpts in timeline items
• limit (number): Limit number of items displayed (-1 for all)
• order (ASC/DESC): Sort order of timeline items
• class (string): Custom CSS class for styling

Alternative Shortcode

You can also use [vt_timeline] as an alternative shortcode name.

Examples

Basic Timeline:

[vertical_timeline]

Timeline without images:

[vertical_timeline show_images="false"]

Limited timeline with custom order:

[vertical_timeline limit="3" order="DESC"]

Customization

Timeline Settings

The plugin provides comprehensive customization options through the admin settings:

• Background Color: Choose any hex color for the timeline background
• Timeline Width: Set maximum width using CSS units (px, %, em, rem)
• Background Padding: Control spacing around timeline content
• Font Sizes: Customize typography for step text, titles, and content
• Live Preview: See changes instantly in the admin area

Works with both the classic and block editors.