Skip to content

Timeline System

Jump to bottom
Alee Javed edited this page Mar 1, 2026 · 1 revision

Timeline System

The timeline system displays your portfolio items chronologically or by impressiveness, with customizable sorting, filtering, and interactive features.

📅 Timeline Features

Core Functionality

  • Dynamic Sorting: Chronological or by impressiveness
  • Category Filtering: Filter by category tags
  • Interactive Cards: Hover effects and animations
  • Responsive Design: Adapts to all screen sizes
  • Custom Metadata: Impressiveness ratings and categories

Timeline Items

Each timeline item includes:

  • Title - Project or achievement name
  • Date - When it occurred
  • Category - Type of work (e.g., "Web Design", "Development")
  • Impressiveness - 1-10 rating for importance
  • Description - Detailed description
  • Link - Optional link to project

⚙️ Configuration

Access Timeline Settings

Go to Appearance → Customize → Timeline

Sorting Options

Option Description Default
Default timeline sort Initial sorting method "Chronological"
Chronological Sort by date (newest first) ✅
Impressiveness Sort by importance ✅

Admin Interface

Access timeline management at Timeline → Timeline Order in WordPress admin.

📝 Creating Timeline Posts

Create Timeline Item

  1. Posts → Add New
  2. Set title - Project name
  3. Add content - Description and details
  4. Set category - Choose from dropdown
  5. Set impressiveness - Rate 1-10
  6. Set featured image - Optional
  7. Publish post

Timeline Categories

  • Web Design - Design projects
  • Development - Code projects
  • Writing - Articles and content
  • Photography - Visual projects
  • Other - Miscellaneous work

Impressiveness Rating

  • 1-3: Minor projects
  • 4-6: Moderate importance
  • 7-8: Significant work
  • 9-10: Major achievements

🎨 Frontend Features

Sorting Controls

<div class="timeline-filters">
  <div class="timeline-sort">
    <button class="timeline-sort-btn" data-sort="date">Date</button>
    <button class="timeline-sort-btn" data-sort="impressiveness">Impressiveness</button>
  </div>
</div>

Filtering System

<div class="timeline-filter">
  <input type="checkbox" value="web-design" id="web-design">
  <label for="web-design">Web Design</label>
</div>

Timeline Cards

<div class="timeline-card">
  <div class="timeline-header">
    <h3>Project Title</h3>
    <span class="timeline-date">2024-01-15</span>
  </div>
  <div class="timeline-content">
    <p>Project description</p>
  </div>
  <div class="timeline-footer">
    <span class="timeline-category">Web Design</span>
    <span class="timeline-impressiveness">⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐</span>
  </div>
</div>

🔧 Advanced Features

Custom CSS Variables

:root {
  --timeline-bg: var(--bg);
  --timeline-card-bg: var(--bg);
  --timeline-border: var(--border);
  --timeline-accent: var(--accent);
}

JavaScript Interactions

  • Sort buttons - Toggle between date/impressiveness
  • Filter checkboxes - Category filtering
  • Hover effects - Card animations
  • Smooth scrolling - Animated transitions

Custom Sorting Logic

function sortByImpressiveness(a, b) {
  const aRating = getImpressiveness(a);
  const bRating = getImpressiveness(b);
  return bRating - aRating;
}

function sortByDate(a, b) {
  return new Date(b.date) - new Date(a.date);
}

📱 Responsive Behavior

Desktop (980px+)

  • Grid layout - 2-3 columns
  • Large cards - Full details visible
  • Side-by-side - Image and content

Tablet (768px-979px)

  • 2 columns - Optimized layout
  • Medium cards - Slightly reduced
  • Stacked elements - Better mobile preview

Mobile (0-767px)

  • Single column - Full-width cards
  • Compact cards - Optimized for touch
  • Vertical stacking - Better readability

🎯 Customization Options

Custom CSS Examples

/* Change card background */
.timeline-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Custom impressiveness stars */
.timeline-impressiveness {
  color: #ffc107;
  font-size: 14px;
}

/* Custom category badges */
.timeline-category {
  background: var(--accent);
  color: white;
  border-radius: 12px;
}

Custom JavaScript

// Add custom animations
document.addEventListener('DOMContentLoaded', function() {
  const cards = document.querySelectorAll('.timeline-card');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('timeline-card-visible');
      }
    });
  });
  
  cards.forEach(card => observer.observe(card));
});

🔍 Troubleshooting

Timeline Not Showing

  1. Check posts - Ensure posts have "timeline" category
  2. Verify settings - Check Timeline → Timeline Order
  3. Clear cache - Browser and WordPress cache
  4. Check PHP errors - Look for function conflicts

Sorting Not Working

  1. Check JavaScript - Ensure timeline.js is loading
  2. Verify HTML - Check button data attributes
  3. Test filters - Ensure category filtering works
  4. Check AJAX - Verify admin interface

Styling Issues

  1. Check CSS - Ensure timeline styles are loading
  2. Test responsive - Check different screen sizes
  3. Verify variables - Ensure CSS variables are set
  4. Check conflicts - Plugin or theme conflicts

📚 Related Documentation

Clone this wiki locally