upskill-event-manager/docs/tec-ce-template-customization-plan.md

# Plan: Customize TEC Community Events Pages via Child Theme

**Goal:** Customize The Events Calendar: Community Events (TEC CE) frontend pages to provide better context, consistent branding (using Astra theme elements), and improved navigation for HVAC trainers.

**Method:** Theme Template Overrides (Method Three) using the `upskill-hvac-astra-child` theme.

**Override Path:** `/wp-content/themes/upskill-hvac-astra-child/tribe-events/community/`

**Target Templates:**

*   `edit-event.php` (Handles Add/Edit Event forms and confirmation messages)
*   `event-list.php` (Handles the "My Events" list view)
*   `edit-organizer.php` (Handles Add/Edit Organizer forms)
    *   *Note: Venue editing seems integrated elsewhere, likely within `edit-event.php`.*

## Implementation Steps

1.  **Create Override Directory Structure:**
    *   Ensure the following directory exists: `wordpress-dev/wordpress/wp-content/themes/upskill-hvac-astra-child/tribe-events/community/`.

2.  **Copy Original Templates:**
    *   Copy the following files from the plugin directory (`wordpress-dev/wordpress/wp-content/plugins/the-events-calendar-community-events/src/views/community/`) to the child theme override directory created in Step 1:
        *   `edit-event.php`
        *   `event-list.php`
        *   `edit-organizer.php`

3.  **Customize Override Templates (Iteratively):**
    *   For *each* copied template file (`edit-event.php`, `event-list.php`, `edit-organizer.php`) in the child theme:
        *   **Add Theme Wrapper:** Wrap the main content section in the standard Astra theme structure:
            ```php
            <div id="primary" class="content-area primary ast-container">
                <main id="main" class="site-main">
                    <?php
                    // Original template content OR specific includes/function calls
                    // like $main->generate_form_layout( $tribe_event_id );
                    ?>
                </main><!-- #main -->
            </div><!-- #primary -->
            ```
            *Carefully identify the start and end points of the original template's primary content.*
        *   **Add Breadcrumbs:** Inside the `#primary` div but *before* the `#main` tag or main heading, add a call to the Astra breadcrumb function:
            ```php
            <?php
            // Add Astra breadcrumbs if the function exists
            if ( function_exists( 'astra_breadcrumb' ) ) {
                astra_breadcrumb();
            }
            ?>
            ```
        *   **Add Action Buttons:** Inside the `#main` tag but *after* the primary content/form, add relevant action buttons using Astra styling (`ast-button`). Examples:
            ```php
            <div class="hvac-template-footer-nav" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;">
                <a href="<?php echo esc_url( home_url( '/hvac-dashboard/' ) ); ?>" class="button ast-button"><?php esc_html_e( 'Return to Dashboard', 'hvac-community-events' ); ?></a>
                <?php
                // Example: Add "View Event" button conditionally on edit-event.php after success
                // This requires checking for success messages or the event ID.
                // if ( isset( $tribe_event_id ) && $tribe_event_id > 0 && isset( $_GET['message'] ) && $_GET['message'] === 'updated' ) { // Example condition
                //     echo '&amp;nbsp;&amp;nbsp;';
                //     echo '<a href="' . esc_url( get_permalink( $tribe_event_id ) ) . '" class="button ast-button"><?php esc_html_e( 'View Event', 'hvac-community-events' ); ?></a>';
                // }
                // Example: Add "Add New Event" on event-list.php
                // if ( is_page_template( 'event-list.php' ) ) { // Example condition
                //     echo '&amp;nbsp;&amp;nbsp;';
                //     echo '<a href="' . esc_url( home_url( '/events/network/add/' ) ) . '" class="button ast-button"><?php esc_html_e( 'Add New Event', 'hvac-community-events' ); ?></a>';
                // }
                ?>
            </div>
            ```
            *Adjust buttons and conditions based on the specific template's context.*

4.  **Refine Confirmation Message (If Necessary):**
    *   If the default confirmation message ("Event updated...") within the wrapped `edit-event.php` is still not ideal, investigate using TEC CE action/filter hooks (like `tribe_events_community_messages`) to modify or replace it. This would likely involve adding code to the child theme's `functions.php`.

## Conceptual Diagram

```mermaid
graph TD
    subgraph TEC CE Plugin
        P1[src/views/community/edit-event.php]
        P2[src/views/community/event-list.php]
        P3[src/views/community/edit-organizer.php]
    end

    subgraph Child Theme: upskill-hvac-astra-child
        T1[tribe-events/community/edit-event.php]
        T2[tribe-events/community/event-list.php]
        T3[tribe-events/community/edit-organizer.php]
    end

    subgraph Customizations
        C1[Theme Wrapper Div]
        C2[Breadcrumbs]
        C3[Action Buttons]
    end

    WP[WordPress Template Loader] -- Checks Child Theme --> T1;
    WP -- If Not Found --> P1;
    WP -- Checks Child Theme --> T2;
    WP -- If Not Found --> P2;
    WP -- Checks Child Theme --> T3;
    WP -- If Not Found --> P3;

    T1 -- Contains --> C1;
    T1 -- Contains --> C2;
    T1 -- Contains --> C3;
    T1 -- Includes Original Logic from --> P1;

    T2 -- Contains --> C1;
    T2 -- Contains --> C2;
    T2 -- Contains --> C3;
    T2 -- Includes Original Logic from --> P2;

    T3 -- Contains --> C1;
    T3 -- Contains --> C2;
    T3 -- Contains --> C3;
    T3 -- Includes Original Logic from --> P3;

```

## Next Steps

*   Implement the template overrides as described above (Requires Code Mode).
*   Update `docs/implementation_plan.md` to include these customization tasks.