upskill-event-manager/docs/CUSTOMIZATION-EXAMPLES.md

# HVAC Community Events - Customization Examples

## Customizing Status Pages

### Method 1: Edit Content Files (Simplest)

Edit the HTML files directly in the plugin:

**File:** `/templates/content/trainer-account-pending.html`

```html
<!-- Add a custom message -->
<!-- wp:paragraph {"align":"center","style":{"color":{"background":"#d1ecf1"}}} -->
<p class="has-text-align-center has-background" style="background-color:#d1ecf1">
    🎉 Special offer: Complete your profile to get 10% off your first event listing!
</p>
<!-- /wp:paragraph -->
```

### Method 2: Theme Override (Recommended)

Copy the template to your theme and customize:

```bash
# Create directory in your theme
mkdir -p /your-theme/hvac-community-events/content/

# Copy the content file
cp /plugins/hvac-community-events/templates/content/trainer-account-pending.html \
   /your-theme/hvac-community-events/content/trainer-account-pending.html

# Edit the theme version
```

### Method 3: Using Hooks

Add custom content via hooks in your theme's `functions.php`:

```php
// Add content after the pending page
add_action('hvac_trainer_pending_after_content', function($user) {
    ?>
    <div class="custom-pending-message">
        <h3>While You Wait...</h3>
        <p>Check out our <a href="/resources">training resources</a></p>
    </div>
    <?php
});
```

### Method 4: Custom CSS

Style the status pages via CSS:

```css
/* In your theme's style.css */
.hvac-status-pending .wp-block-group {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.hvac-status-pending h1 {
    color: #2c3e50;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
```

## Creating a Custom Status Page

### Step 1: Define the Page

Add to `HVAC_Page_Manager::$pages`:

```php
'trainer-account-suspended' => [
    'title' => 'Account Suspended',
    'template' => 'status/trainer-account-suspended.php',
    'public' => false,
    'parent' => null,
    'capability' => 'read',
    'content_file' => 'content/trainer-account-suspended.html'
],
```

### Step 2: Create Content File

**File:** `/templates/content/trainer-account-suspended.html`

```html
<!-- wp:group {"layout":{"type":"constrained","contentSize":"800px"}} -->
<div class="wp-block-group">
    <!-- wp:heading {"textAlign":"center"} -->
    <h1 class="has-text-align-center">⚠️ Account Suspended</h1>
    <!-- /wp:heading -->
    
    <!-- wp:paragraph {"align":"center"} -->
    <p class="has-text-align-center">Your account has been suspended due to violations of our terms of service.</p>
    <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
```

### Step 3: Create Template File

**File:** `/templates/status/trainer-account-suspended.php`

```php
<?php
/**
 * Template for Trainer Account Suspended page
 */

if (!defined('ABSPATH')) {
    exit;
}

get_header();
?>

<div class="hvac-status-container hvac-status-suspended">
    <?php
    while (have_posts()) : the_post();
        the_content();
    endwhile;
    ?>
</div>

<?php
get_footer();
```

### Step 4: Add to Access Control

Update `HVAC_Access_Control` to handle the new status:

```php
case 'suspended':
    wp_safe_redirect(home_url('/trainer-account-suspended/'));
    exit;
```

## Dynamic Content Examples

### Using Shortcodes

Create a shortcode for dynamic content:

```php
// In your theme or custom plugin
add_shortcode('hvac_pending_wait_time', function() {
    $pending_count = get_option('hvac_pending_trainers_count', 0);
    $wait_time = $pending_count > 10 ? '2-3 business days' : '1 business day';
    return $wait_time;
});
```

Use in content:
```html
<!-- wp:paragraph -->
<p>Estimated approval time: [hvac_pending_wait_time]</p>
<!-- /wp:paragraph -->
```

### Custom Gutenberg Block

Register a custom block for status pages:

```javascript
// In your custom JS file
wp.blocks.registerBlockType('hvac/status-message', {
    title: 'HVAC Status Message',
    icon: 'info',
    category: 'hvac-blocks',
    
    attributes: {
        type: {
            type: 'string',
            default: 'info'
        },
        message: {
            type: 'string',
            default: ''
        }
    },
    
    edit: function(props) {
        return wp.element.createElement(
            'div',
            { className: 'hvac-status-' + props.attributes.type },
            props.attributes.message
        );
    },
    
    save: function(props) {
        return wp.element.createElement(
            'div',
            { className: 'hvac-status-' + props.attributes.type },
            props.attributes.message
        );
    }
});
```

## Conditional Content

Show content based on user data:

```php
// In template file
<?php
$user = wp_get_current_user();
$registration_date = get_user_meta($user->ID, 'registration_date', true);
$days_waiting = floor((time() - strtotime($registration_date)) / DAY_IN_SECONDS);

if ($days_waiting > 2) {
    echo '<p class="priority-notice">Your application is being prioritized for review.</p>';
}
?>
```

## Email Template Customization

Customize approval emails:

```php
// Hook into the email sending
add_filter('hvac_approval_email_content', function($content, $user) {
    // Add personalized content
    $trainer_name = get_user_meta($user->ID, 'first_name', true);
    $content = str_replace('{trainer_name}', $trainer_name, $content);
    
    // Add custom footer
    $content .= "\n\n---\nThe HVAC Training Team";
    
    return $content;
}, 10, 2);
```

## Best Practices

1. **Always test** customizations on a staging site first
2. **Use child themes** for theme-based customizations
3. **Document changes** for future reference
4. **Keep backups** before making significant changes
5. **Follow WordPress** coding standards
6. **Use version control** for tracking changes