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:

       <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
       // 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:

       <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

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.