Hi-School-Slide-Manager/FRONTEND_SETUP.md

Hi-School Slide Manager Frontend Dashboard Setup

Quick Setup Guide

1. Create the Dashboard Page

1. Go to WordPress Admin → Pages → Add New
2. Set the page title to: Slide Dashboard
3. Set the page slug to: slide-dashboard
4. In the Page Attributes section, select the template: Slide Dashboard
5. Publish the page

2. Full-Width Dashboard Features

The dashboard now includes:

• 🎯 Custom Header Bar: Professional navigation with Home, Admin, and Logout buttons
• 📊 Status Bar: Real-time statistics for active slides, connected sites, and last update
• 📝 Enhanced Tabs: Create Slides, Manage Slides, Preview Banner, and Analytics
• 🔄 Bulk Actions: Save all slides, save as drafts, import/export functionality
• 📱 Responsive Design: Works perfectly on all devices

3. Navigation Features

Header Navigation:

• 🏠 Home Button: Quick return to site homepage
• ⚙️ Admin Button: Access WordPress admin dashboard
• 👤 User Menu: Shows current user and logout option

Tab Navigation:

• ➕ Create Slides: Add up to 5 slide forms simultaneously
• 📋 Manage Slides: View, edit, and delete existing slides
• 👁️ Preview Banner: See how slides appear on companion sites
• 📈 Analytics: View slide performance and statistics

4. Set Up Members Plugin (if not already configured)

1. Install and activate the Members plugin
2. Go to Users → Roles → Add New Role
3. Create a role called "Slide Manager" with these capabilities:
   • read
   • edit_posts
   • upload_files
   • hssm_manage_slides (custom capability)

5. Test the Dashboard

1. Create a test user with the "Slide Manager" role
2. Navigate to /slide-dashboard/ on your site
3. You should see the full-width slide management interface

6. Dashboard Workflow

Creating Slides:

1. Click "Add New Slide Form" (up to 5 forms at once)
2. Fill in slide details: title, subtitle, content, client
3. Upload background image with live preview
4. Add up to 5 CTA buttons per slide
5. Select target sites (Hi-School, One Stop, Ace)
6. Set scheduling dates and auto-publish options
7. Save individual slides or use "Save All Slides"

Managing Slides:

1. Filter by site, client, or status
2. Edit existing slides inline
3. Delete slides with confirmation
4. Export slide data for backup

Preview System:

1. Select target site and preview date
2. See real-time banner preview
3. Email preview to stakeholders
4. Download screenshots for approval

5. Template Override (Optional)

If you want to customize the dashboard template:

1. Copy templates/page-slide-dashboard.php to your active theme
2. Customize as needed - the plugin will use the theme version

6. API Key Management

• Go to WordPress Admin → Slides → Settings
• Manage API keys for companion sites
• Test REST API endpoints

7. Companion Site Integration

Use these REST API endpoints on companion sites:

• GET /wp-json/hssm/v1/slides/{site} - Get slides for a specific site
• GET /wp-json/hssm/v1/sites - Get available sites
• GET /wp-json/hssm/v1/slide/{id} - Get specific slide
• GET /wp-json/hssm/v1/health - Check API health

8. Divi 5 Group Carousel Integration

The slides are designed to work with Divi 5's Group Carousel module:

1. Add a Group Carousel module to your header
2. Use the REST API to fetch slide data
3. Populate carousel items with slide content
4. Apply background images and CTA buttons

9. Troubleshooting

Dashboard not loading?

• Check if user has proper permissions
• Verify Members plugin is active
• Check error logs for PHP errors

AJAX not working?

• Verify nonce generation
• Check user permissions
• Enable WordPress debug mode

Template not found?

• Ensure template file exists in plugin directory
• Check file permissions
• Verify page template is set correctly