Skip to content

Page Order

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

Page Order Management

The page order system provides an intuitive drag-and-drop interface to reorder WordPress pages in the navigation menu.

📋 Page Order Features

Core Functionality

  • Drag and Drop - Intuitive page reordering
  • Visual Feedback - Real-time visual updates
  • Save Functionality - Persistent order changes
  • Admin Integration - Built into WordPress admin
  • Responsive Design - Works on all devices

Navigation Integration

  • WordPress Pages - All published pages included
  • Menu Order - Customizable navigation sequence
  • Automatic Updates - Changes reflect immediately
  • No Coding Required - Visual interface only

⚙️ Page Order Management

Access Page Order

Go to Pages → Page Order in WordPress admin

Reordering Pages

  1. Drag any page to move it up or down
  2. Visual feedback - See changes in real-time
  3. Drop page in desired position
  4. Save Order - Click "Save Order" to apply changes

Page Order Controls

  • Move Up - Move page one position up
  • Move Down - Move page one position down
  • Save Order - Apply changes to navigation
  • Status Messages - Success/error feedback

🎨 Admin Interface

Page List Structure

<ul id="aleejaved-page-order-list">
  <li class="aleejaved-order-item" data-id="123">
    <span class="page-handle">⋮⋮</span>
    <span class="page-title">Page Title</span>
  </li>
</ul>

CSS Classes

  • .aleejaved-order-item - Individual page item
  • .page-handle - Drag handle
  • .page-title - Page name display
  • .dragging - Visual feedback during drag

Styling

.aleejaved-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #c3c4c7;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 8px;
  cursor: move;
}

.page-handle {
  font-size: 18px;
  color: #646970;
  cursor: grab;
}

.page-title {
  font-weight: 600;
  flex: 1;
}

🔧 Technical Implementation

JavaScript Functions

// Move page up
function movePageUp(pageId) {
  const page = document.querySelector(`[data-id="${pageId}"]`);
  const prevPage = page.previousElementSibling;
  
  if (prevPage) {
    prevPage.before(page);
    updateButtonStates();
  }
}

// Move page down
function movePageDown(pageId) {
  const page = document.querySelector(`[data-id="${pageId}"]`);
  const nextPage = page.nextElementSibling;
  
  if (nextPage) {
    nextPage.after(page);
    updateButtonStates();
  }
}

// Update button states
function updateButtonStates() {
  const items = document.querySelectorAll('.aleejaved-order-item');
  
  items.forEach((item, index) => {
    const upButton = item.querySelector('.move-up');
    const downButton = item.querySelector('.move-down');
    
    upButton.disabled = index === 0;
    downButton.disabled = index === items.length - 1;
  });
}

AJAX Save Function

function savePageOrder() {
  const order = [];
  document.querySelectorAll('.aleejaved-order-item').forEach((item, index) => {
    order.push({
      id: item.dataset.id,
      order: index
    });
  });
  
  fetch(ajaxurl, {
    method: 'POST',
    data: {
      action: 'save_page_order',
      page_order: order,
      nonce: nonce
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      showStatus('Saved!');
    } else {
      showStatus('Save failed!');
    }
  });
}

📱 Responsive Design

Desktop (980px+)

  • Full interface - Complete admin interface
  • Large targets - Easy to drag
  • Full animations - All effects enabled

Tablet (768px-979px)

  • Optimized layout - Tablet-friendly
  • Touch targets - Larger drag handles
  • Maintains functionality - Core features preserved

Mobile (0-767px)

  • Simplified interface - Optimized for mobile
  • Touch-optimized - Larger touch targets
  • Essential features - Core functionality preserved

🎯 Customization Options

Custom CSS Examples

/* Custom page item styling */
.aleejaved-order-item {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid var(--accent);
}

/* Custom drag handle */
.page-handle {
  color: var(--accent);
  font-size: 20px;
}

/* Custom page title */
.page-title {
  color: var(--text);
  font-size: 16px;
}

Custom JavaScript

// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
  if (e.ctrlKey && e.key === 's') {
    savePageOrder();
  }
});

// Add double-click to edit
document.querySelectorAll('.page-title').forEach(title => {
  title.addEventListener('dblclick', function() {
    // Enable inline editing
    this.contentEditable = true;
    this.focus();
  });
});

🔍 Troubleshooting

Drag and Drop Not Working

  1. Check JavaScript - Ensure page-order-admin.js is loading
  2. Verify HTML - Check page list structure
  3. Test browser - Try different browsers
  4. Check conflicts - Plugin or theme conflicts

Save Not Working

  1. Check AJAX - Ensure save function is working
  2. Verify nonce - Check security token
  3. Test permissions - Ensure user can edit pages
  4. Check server response - Look for PHP errors

Styling Issues

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

📚 Related Documentation

Clone this wiki locally