Create stunning timelines, roadmaps, and event histories for WordPress with our intuitive drag-drop Visual Builder. Perfect for project management, company milestones, and product launches.
- 🎯 Zero Learning Curve - Build professional timelines in under 5 minutes
- 🎛 Gutenberg Block Support - Native block editor integration for modern WordPress
- 📱 Mobile-First Design - Stunning display on all devices and screen sizes
- 🎨 Unlimited Customization - Colors, spacing, fonts, and layout control
- ⚡ Performance Optimized - Lightning-fast loading and SEO-friendly
- ♿ Accessibility Ready - WCAG 2.1 compliant for inclusive design
- 🔗 API Integration - Connect external data sources and JSON feeds
Test EventCrafter instantly in WordPress Playground - no installation required!
| Use Case | Description | Ideal For |
|---|---|---|
| Project Roadmaps | Visualize development milestones and feature releases | SaaS companies, agencies, startups |
| Company History | Showcase your journey and key achievements | Corporate websites, about pages |
| Product Launches | Create anticipation with launch timelines | E-commerce, product marketing |
| Event Schedules | Display conferences, webinars, workshops | Event organizers, conferences |
| Process Documentation | Step-by-step workflow visualization | Documentation, tutorials |
| Portfolio Showcases | Career progression and project timelines | Personal branding, freelancers |
# Install from WordPress admin
1. Go to Plugins → Add New
2. Search "EventCrafter"
3. Install & Activate1. Download from https://wordpress.org/plugins/eventcrafter-visual-timeline/
2. Upload to /wp-content/plugins/
3. Activate in WordPress adminMethod 1: Gutenberg Block (Recommended)
1. Create new post/page
2. Add EventCrafter Timeline block
3. Select timeline or enter JSON URL
4. Customize layout and settings
Method 2: Shortcode
// Basic usage
[eventcrafter id="123"]
// With custom styling
[eventcrafter id="123" layout="vertical"]
// From JSON source
[eventcrafter source="https://api.example.com/timeline.json"]View Screenshots
| Feature | Preview |
|---|---|
| Visual Builder |  |
| Timeline Display |  |
| Mobile Responsive |  |
| Customization |  |
// Load timeline data from any API
fetch('https://your-api.com/timeline')
.then(response => response.json())
.then(data => {
// EventCrafter automatically formats your data
});/* Customize timeline appearance */
.eventcrafter-timeline {
/* Your custom styles */
}// Modify timeline data before display
add_filter('eventcrafter_timeline_data', function($data) {
// Your customizations
return $data;
});
// Modify individual events
add_filter('eventcrafter_single_event_data', function($event, $index) {
// Your event customizations
return $event;
}, 10, 2);
// Add custom CSS classes
add_filter('eventcrafter_wrapper_classes', function($classes) {
$classes[] = 'my-custom-class';
return $classes;
});{
"events": [
{
"date": "2025 Q1",
"title": "Product Launch",
"description": "HTML supported description of the event.",
"color": "#3b82f6",
"category": "Milestone",
"link": {
"url": "https://example.com",
"text": "Read Case Study",
"target": "_blank"
}
}
]
}- ✅ Semantic HTML for better search engine indexing
- ✅ Schema.org markup for rich snippets
- ✅ Optimized loading with lazy loading and caching
- ✅ Core Web Vitals optimized for Google rankings
We welcome contributions! Please see our Contributing Guidelines.
git clone https://github.com/TableCrafter/eventcrafter-visual-timeline.git
cd eventcrafter-visual-timeline
npm install
npm run dev# Run PHP tests
composer install
composer test
# Run accessibility tests
npm run test:accessibilityGPL v2 or later - see LICENSE file.
Created by Fahad Murtaza | Part of the TableCrafter Suite