Approach 02: Codeheat Template

[Ubayed-Bin-Sufian]

The previous approach was not favourable as it is complex for the users.

User flow:

1. User clicks "Add Contest" in the admin menu
2. Enters just the contest title
3. Clicks "Create Contest"
4. WordPress creates a new page with all the content from the template
   1. This page is accessible in the pages of admin section and can be editable.
5. User clicks "Edit it here" and can modify the content using the familiar WordPress block editor

Features to be added:

• User can have the option to select among multiple templates
• Start and end date with dynamic fields
• Redirect directly to editor after creation
• improve security and prevent Cross-Site Request Forgery (CSRF)
• Hide sections; Grand Prize Winners and Finalist Winners when creating contest #375
• Help menu can be added for tutorials (documentation/Video) for creating a contest

Reference Documentation:

1. add_menu_page() - https://developer.wordpress.org/reference/functions/add_menu_page/
2. submit_button() - https://developer.wordpress.org/reference/functions/submit_button/
3. sanitize_text_field() - https://developer.wordpress.org/reference/functions/sanitize_text_field/
4. $wpdb (WordPress Database Class) - https://developer.wordpress.org/reference/classes/wpdb/

[Ubayed-Bin-Sufian]

Iteration 01:

Implementation steps:

1. Add the following code in functions.php of child-theme

// Add custom admin menu for creating events
function add_event_creator_menu() {
    add_menu_page(
        'Add Contest',           // Page title
        'Add Contest',           // Menu title
        'edit_pages',           // Capability
        'add-contest',          // Menu slug
        'render_event_creator_page', // Callback function
        'dashicons-calendar-alt', // Icon
        25                      // Position
    );
}
add_action('admin_menu', 'add_event_creator_menu');

// Render the event creator page
function render_event_creator_page() {
    if (isset($_POST['create_event'])) {
        create_event_page();
    }
    ?>
    <div class="wrap">
        <h1>Create New Contest</h1>
        <p>This will create a new contest page based on the CodeHeat 2020 template.</p>
        <form method="post" action="">
            <table class="form-table">
                <tr>
                    <th scope="row">Contest Title</th>
                    <td>
                        <input type="text" name="event_title" class="regular-text" required />
                        <p class="description">Enter the name of your new contest</p>
                    </td>
                </tr>
            </table>
            <?php submit_button('Create Contest', 'primary', 'create_event'); ?>
        </form>
    </div>
    <?php
}

function create_event_page() {
    $title = sanitize_text_field($_POST['event_title']);
    
    // Get template page ID
    $template_page = get_page_by_title('CodeHeat 2020');
    if (!$template_page) {
        echo '<div class="notice notice-error"><p>Template page not found!</p></div>';
        return;
    }
    
    // Use WordPress's built-in duplication method
    $new_page_id = wp_insert_post(array(
        'post_title' => $title,
        'post_content' => '', // Will be filled below
        'post_status' => 'draft',
        'post_type' => 'page',
        'post_author' => get_current_user_id(),
    ));
    
    if ($new_page_id) {
        // Copy the exact post content
        global $wpdb;
        
        $original_content = $wpdb->get_var($wpdb->prepare(
            "SELECT post_content FROM {$wpdb->posts} WHERE ID = %d",
            $template_page->ID
        ));
        
        // Update with original content (preserves block formatting)
        $wpdb->update(
            $wpdb->posts,
            array('post_content' => $original_content),
            array('ID' => $new_page_id),
            array('%s'),
            array('%d')
        );
        
        // Copy meta data
        $wpdb->query($wpdb->prepare("
            INSERT INTO {$wpdb->postmeta} (post_id, meta_key, meta_value)
            SELECT %d, meta_key, meta_value FROM {$wpdb->postmeta} WHERE post_id = %d
        ", $new_page_id, $template_page->ID));
        
        echo '<div class="notice notice-success"><p>Contest created successfully! <a href="' . get_edit_post_link($new_page_id) . '">Edit it here</a></p></div>';
    }
}

// Generate the HTML content for the event
function generate_event_content($title, $date, $description, $location) {
    // Use your existing HTML structure but replace placeholders with actual data
    return "
    <div class='event-container'>
        <h2>{$title}</h2>
        <div class='event-date'>Date: {$date}</div>
        <div class='event-location'>Location: {$location}</div>
        <div class='event-description'>{$description}</div>
        <!-- Your existing HTML structure with dynamic content -->
    </div>";
}

[Ubayed-Bin-Sufian]

Screencast of the demo

(includes my voiceover)

Screenshare.-.2025-09-06.8_11_17.PM.mp4

[Ubayed-Bin-Sufian]

Iteration 02:

1. Prefilled content:
   1. Earlier user needed to write the entire contest title. eg: Codeheat 2027
   2. Now, only need to add the contest year. Eg: 2028. Prints Codeheat 2028.
2. Parent page:
   1. Before: When a page was created, parent page needed to be selected manually.
   2. After: Parent page is automatically selected as 'Codeheat Home Page'
3. Slug:
   1. Before: the slug remained empty
   2. After: the slug gets automatically created in the format; codeheat-20XX

Implementation steps:

1. Add the following updated code in functions.php of child-theme

// Add custom admin menu for creating events
function add_event_creator_menu() {
    add_menu_page(
        'Add Contest',           // Page title
        'Add Contest',           // Menu title
        'edit_pages',           // Capability
        'add-contest',          // Menu slug
        'render_event_creator_page', // Callback function
        'dashicons-calendar-alt', // Icon
        25                      // Position
    );
}
add_action('admin_menu', 'add_event_creator_menu');

function render_event_creator_page() {

    // When the "Create Contest" form is submitted, run create_event_page() 
    // to duplicate the selected template into a new draft page.
    if (isset($_POST['create_event'])) {
        create_event_page();
    }
    
    // Handle form submission: create a new contest page and redirect to editor
    // if (isset($_POST['create_event'])) {
    //     $new_page_id = create_event_page();
    //     if ($new_page_id) {
    //         // Redirect directly to editor after creation
    //         wp_redirect(admin_url('post.php?action=edit&post=' . $new_page_id));
    //         exit;
    //     }
    // }
    ?>
    <div class="wrap">
        <h1>Create New Contest</h1>
        <p>This will create a new contest page based on the CodeHeat Template.</p>
        <form method="post" action="">
            <table class="form-table">

                <!-- This is the field to collect the entire contest title from the user eg: CodeHeat - 2025 -->
                <!-- <tr>
                    <th scope="row">Contest Title</th>
                    <td>
                        <input type="text" name="event_title" class="regular-text" required />
                        <p class="description">Enter the name of your new contest</p>
                    </td>
                </tr> -->
                
                <!-- NEW: This is the field to collect only the year from the user -->
                <tr> 
                    <th scope="row">Contest Year</th> 
                    <td> 
                        <input type="number" name="event_year" class="regular-text" required min="2025" max="2100" value="<?php echo date("Y"); ?>" /> 
                        <p class="description">Enter the year for the new contest</p> 
                    </td> 
                </tr>
            </table>
            <?php submit_button('Create Contest', 'primary', 'create_event'); ?>
        </form>
    </div>
    <?php
}

function create_event_page() {
    // $title = sanitize_text_field($_POST['event_title']);

    // NEW: Get the year from the form and sanitize it.
    $year = sanitize_text_field($_POST['event_year']);

    // NEW: Create the pre-populated title using the year.
    $title = 'Codeheat ' . $year;
    
    // Get template page ID
    $template_page = get_page_by_title('Template Codeheat 2018');
    if (!$template_page) {
        echo '<div class="notice notice-error"><p>Template page not found!</p></div>';
        return;
    }

    // Find the ID of the parent page by its title
    // Check if the parent page exists. If not, show an error.
    $parent_page = get_page_by_title('Codeheat Home Page');    
    if (!$parent_page) {
        echo '<div class="notice notice-error"><p>Parent page "Codeheat Home Page" not found!</p></div>';
        return;
    }
    
    // Use WordPress's built-in duplication method
    $new_page_id = wp_insert_post(array(
        'post_title' => $title,
        'post_content' => '', // Will be filled below
        'post_status' => 'draft',
        'post_type' => 'page',
        'post_author' => get_current_user_id(),
        'post_parent' => $parent_page->ID, // automatically sets the Parent Page
        'post_name' => sanitize_title($title), // automatically sets the slug
    ));
    
    if ($new_page_id) {
        // Copy the exact post content
        global $wpdb;
        
        $original_content = $wpdb->get_var($wpdb->prepare(
            "SELECT post_content FROM {$wpdb->posts} WHERE ID = %d",
            $template_page->ID
        ));
        
        // Update with original content (preserves block formatting)
        $wpdb->update(
            $wpdb->posts,
            array('post_content' => $original_content),
            array('ID' => $new_page_id),
            array('%s'),
            array('%d')
        );
        
        // Copy meta data
        $wpdb->query($wpdb->prepare("
            INSERT INTO {$wpdb->postmeta} (post_id, meta_key, meta_value)
            SELECT %d, meta_key, meta_value FROM {$wpdb->postmeta} WHERE post_id = %d
        ", $new_page_id, $template_page->ID));
        
        echo '<div class="notice notice-success"><p>Contest created successfully! <a href="' . get_edit_post_link($new_page_id) . '">Edit it here</a></p></div>';
    }
}

[Ubayed-Bin-Sufian]

Iteration 03:

1. Multiple Templates:

   1. Before: The user cannot select from multiple templates.
   2. After: User can select from from multiple templates in the form.

2. Start and end date with dynamic fields

   1. Before: The user cannot select dates from the form.
   2. After: User can select from the form and the dates changes automatically. The dates are formatted in the Month Day, Year format. Eg: September 30th, 2025.
      (For this to work correctly, you'll need to go to your two template pages in the WordPress editor (Template Codeheat 2018 and Template Codeheat 2020) and add two placeholder tags where you want the dates to appear: [START_DATE] and [END_DATE]
      PLEASE DO NOT DELETE IT.)

3. Redirect directly to editor after creation:

   1. Before: On click of 'Create Contest' button, a success message with 'edit here' link gets displayed. On clicking the link redirects to editor.
   2. After: On click of 'Create Contest' button redirects to editor. Reduces the number of clicks and further streamlined the workflow.

4. protect form submissions from security vulnerabilities like CSRF:

   1. Before: Less Secure
   2. After: wp_nonce_field() and check_admin_referer() functions added. These two functions work together to protect your form submissions from security vulnerabilities like CSRF.

5. Rename the template pages

   1. Before: 'Template Codeheat 2018' & 'Template Codeheat 2020'.
   2. After: Renamed to 'Template: Codeheat with Summit' and 'Template: Bi-monthly contest'.

Implementation steps:

1. Add the following updated code in functions.php of child-theme

// A new function to handle the form submission on the 'admin_init' hook.
// This ensures that we process the form before any HTML is sent to the browser.
// check_admin_referer() protect your form submissions from security vulnerabilities like CSRF 
function handle_create_event_submission() {
    // Check if our form has been submitted and the nonce is valid.
    if (isset($_POST['create_event']) && check_admin_referer('create_event_nonce', 'create_event_field')) {
        create_event_page();
    }
}
add_action('admin_init', 'handle_create_event_submission');

// Add custom admin menu for creating events 
function add_event_creator_menu() { 
    add_menu_page( 
        'Add Contest',           // Page title 
        'Add Contest',           // Menu title 
        'edit_pages',           // Capability 
        'add-contest',          // Menu slug 
        'render_event_creator_page', // Callback function 
        'dashicons-calendar-alt', // Icon 
        25                      // Position 
    ); 
} 
add_action('admin_menu', 'add_event_creator_menu');

// The callback function now only renders the form and its content
function render_event_creator_page() {
    ?>
    <div class="wrap">
        <h1>Create New Contest</h1>
        <p>This will create a new contest page based on the CodeHeat Template.</p>
        <form method="post" action="">

            <!--  wp_nonce_field() protect your form submissions from security vulnerabilities like CSRF -->
            <?php wp_nonce_field('create_event_nonce', 'create_event_field'); ?>
            
            <table class="form-table">
                
                <!-- NEW: This is the field to collect only the year from the user -->
                <tr> 
                    <th scope="row">Contest Year</th> 
                    <td> 
                        <input type="number" name="event_year" class="regular-text" required min="2025" max="2100" value="<?php echo date("Y"); ?>" /> 
                        <p class="description">Enter the year for the new contest</p> 
                    </td> 
                </tr>

                <!-- Dropdown to select template -->
                <tr>
                    <th scope="row">Template</th>
                    <td>
                        <select name="template_title" class="regular-text">
                            <option value="Template: Codeheat with Summit">Template: Codeheat with Summit</option>
                            <option value="Template: Bi-monthly Contest">Template: Bi-monthly Contest</option>
                        </select>
                        <p class="description">Choose the template for the new contest page.</p>
                    </td>
                </tr>

                <!-- Codeheat Start Date -->
                <tr>
                    <th scope="row">Codeheat Start Date</th>
                    <td>
                        <input type="date" name="start_date" class="regular-text" required />
                        <p class="description">Enter the start date of the contest.</p>
                    </td>
                </tr>

                <!-- Codeheat End Date -->
                <tr>
                    <th scope="row">Codeheat End Date</th>
                    <td>
                        <input type="date" name="end_date" class="regular-text" required />
                        <p class="description">Enter the end date of the contest.</p>
                    </td>
                </tr>
            </table>
            <?php submit_button('Create Contest', 'primary', 'create_event'); ?>
        </form>
    </div>
    <?php
}

function create_event_page() {
    // Get the year from the form and sanitize it.
    $year = sanitize_text_field($_POST['event_year']);

    // Create the pre-populated title using the year.
    $title = 'Codeheat ' . $year;

    // Get template title from the dropdown
    $template_title = sanitize_text_field($_POST['template_title']);

    // Users must provide start and end dates
    $start_date = sanitize_text_field($_POST['start_date']);
    $end_date = sanitize_text_field($_POST['end_date']);

    // Convert dates to a more readable format.
    $start_date_formatted = strtoupper(date('F jS, Y', strtotime($start_date)));
    $end_date_formatted   = strtoupper(date('F jS, Y', strtotime($end_date)));
    
    // Get template page ID
    $template_page = get_page_by_title($template_title);
    if (!$template_page) {
        echo '<div class="notice notice-error"><p>Template page not found!</p></div>';
        return;
    }

    // Find the ID of the parent page by its title
    // Check if the parent page exists. If not, show an error.
    $parent_page = get_page_by_title('Codeheat Home Page');    
    if (!$parent_page) {
        echo '<div class="notice notice-error"><p>Parent page "Codeheat Home Page" not found!</p></div>';
        return;
    }
    
    // Use WordPress's built-in duplication method
    $new_page_id = wp_insert_post(array(
        'post_title' => $title,
        'post_content' => '', // Will be filled below
        'post_status' => 'draft',
        'post_type' => 'page',
        'post_author' => get_current_user_id(),
        'post_parent' => $parent_page->ID, // automatically sets the Parent Page
        'post_name' => sanitize_title($title), // automatically sets the slug
    ));
    
    if ($new_page_id) {
        // Copy the exact post content
        global $wpdb;
        
        $original_content = $wpdb->get_var($wpdb->prepare(
            "SELECT post_content FROM {$wpdb->posts} WHERE ID = %d",
            $template_page->ID
        ));

        // Replace the placeholders with the actual dates.
        $modified_content = str_replace(
            array('[START_DATE]', '[END_DATE]'),
            array($start_date_formatted, $end_date_formatted),
            $original_content
        );
        
        // Update with original content (preserves block formatting)
        $wpdb->update(
            $wpdb->posts,
            array('post_content' => $modified_content),
            array('ID' => $new_page_id),
            array('%s'),
            array('%d')
        );
        
        // Copy meta data
        $wpdb->query($wpdb->prepare("
            INSERT INTO {$wpdb->postmeta} (post_id, meta_key, meta_value)
            SELECT %d, meta_key, meta_value FROM {$wpdb->postmeta} WHERE post_id = %d
        ", $new_page_id, $template_page->ID));

        // Redirect to the edit page immediately after creation
        $edit_url = get_edit_post_link($new_page_id, 'redirect');
        wp_redirect($edit_url);
        exit;
    }
}