Plugin personalizado de WordPress que guarda en la base de datos los datos enviados por los visitantes del sitio parte 2

Finalizamos la parte anterior del tutorial guardando los datos introducidos en la base de datos. Ahora ha llegado el momento de poder leerlos en el panel de administración. Para ello, en el panel administrativo crearemos un menú independiente llamado Event Participants List.
La función de WordPress que se utiliza para crear un nuevo menú es add_menu_page(). En el archivo event-list-plugin.php la colocaremos dentro de una función que, al ser llamada, creará un nuevo menú.

<?php
/*
Plugin Name: Event List Plugin
Description: A custom form for event submission
Version: 1.0
Author: Your Name
*/

register_activation_hook(__FILE__, 'elp_activate');

function elp_activate()
{
    require_once plugin_dir_path(__FILE__) . 'includes/elp-database-setup.php';
    elp_create_table();
}

function elp_render_reservation_form()
{
    ob_start(); // Start output buffering

    // Include the form template
    include plugin_dir_path(__FILE__) . 'templates/sign-form1.php';

    return ob_get_clean(); // Return the form HTML
}

add_shortcode('sign_form_1', 'elp_render_reservation_form');

function elp_handle_reservation_submission()
{
    // Verify nonce for security
    if (! isset($_POST['elp_reservation_nonce']) || ! wp_verify_nonce($_POST['elp_reservation_nonce'], 'elp_submit_reservation_action')) {
        wp_die('Security check failed');
    }

    // Sanitize and validate form data
    $user_name = sanitize_text_field($_POST['user_name']);
    $user_email = sanitize_email($_POST['user_email']);

    // Save to database
    global $wpdb;
    $table_name = $wpdb->prefix . 'event_list';

    $wpdb->insert(
        $table_name,
        array(
            'user_name' => $user_name,
            'user_email' => $user_email,
        )
    );
    // Redirect user after submission
    wp_redirect(home_url('/thank-you-page/')); // Create a thank you page first
    exit;
}

add_action('admin_post_elp_submit_reservation', 'elp_handle_reservation_submission');

function enrolled_people_list()
{
    $page_title = 'Event_participants';
    $menu_title = 'Event_participants_list';
    $capability = 'manage_options';
    $menu_slug  = 'event-people-list';
    $function   = 'enrolled_people_list_page';
    $icon_url   = 'dashicons-businessman';
    $position   = 5;
    add_menu_page(
        $page_title,
        $menu_title,
        $capability,
        $menu_slug,
        $function,
        $icon_url,
        $position
    );
}

La documentación sobre cómo añadir una nueva pestaña de menú en el panel de WordPress se puede encontrar aquí. Podríamos, por supuesto, usar directamente los valores pasados a la función en lugar de variables, pero para los fines de este tutorial consideré que el uso de variables sería más legible. Prestemos atención a la variable $function: indica la función en la que colocaremos la plantilla del menú que hemos creado.

Sin embargo, no añadiremos la plantilla del menú directamente, sino que utilizaremos el directorio /templates que hemos creado. En este directorio creamos el archivo enrolled-people-list-page.php.

 <h1 class="my-heading-1">List of people signed to Event</h1>
 <?php
    global $wpdb;
    $table_name = $wpdb->prefix . "event_list";
    $user = $wpdb->get_results("SELECT * FROM $table_name");
    ?>
 <div class="page-container1">

     <table>
         <div class="naglowek-1">
             <tr>
                 <th>ID</th>
                 <th>NAME</th>
                 <th>EMAIL</th>
             </tr>
         </div>
         <?php foreach ($user as $row) { ?>
             <tr>
                 <td>
                     <div class="tabela-rzad"><?php echo $row->id ?></div>
                 </td>
                 <td>
                     <div class="tabela-rzad"><?php echo $row->user_name ?></div>
                 </td>
                 <td>
                     <div class="tabela-rzad"><?php echo $row->user_email ?></div>
                 </td>
             </tr>
         <?php } ?>
     </table>
 </div>

 <style>
     .my-heading-1 {
         text-align: center;
         margin-top: 50px;
         margin-bottom: 25px;
     }

     .page-container1 {
         padding: 20px;
     }

     .page-container1 table {
         width: 100%;
         border-collapse: collapse;
         font-size: 16px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }

     th {
         text-align: left !important;
         padding-left: 15px;

     }

     .naglowek-1 tr th {
         background-color: #0073aa;
         color: white;
         padding: 12px;
         text-align: left !important;
         font-weight: bold;
     }

     .page-container1 table tr td {
         padding: 10px;
         border-bottom: 1px solid #ddd;
     }

     .page-container1 table tr:hover {
         background-color: #f5f5f5;
     }

     .tabela-rzad {
         padding: 5px;
         word-break: break-word;
     }

     .page-container1 table tr:last-child td {
         border-bottom: 2px solid #0073aa;
     }
 </style>

En nuestro archivo del plugin event-list-plugin.php lo añadimos dentro de la función enrolled_people_list_page() indicada en add_menu_page().

<?php
/*
Plugin Name: Event List Plugin
Description: A custom form for event submission
Version: 1.0
Author: Your Name
*/

register_activation_hook(__FILE__, 'elp_activate');

function elp_activate()
{
    require_once plugin_dir_path(__FILE__) . 'includes/elp-database-setup.php';
    elp_create_table();
}

function elp_render_reservation_form()
{
    ob_start(); // Start output buffering

    // Include the form template
    include plugin_dir_path(__FILE__) . 'templates/sign-form1.php';

    return ob_get_clean(); // Return the form HTML
}

add_shortcode('sign_form_1', 'elp_render_reservation_form');

function elp_handle_reservation_submission()
{
    // Verify nonce for security
    if (! isset($_POST['elp_reservation_nonce']) || ! wp_verify_nonce($_POST['elp_reservation_nonce'], 'elp_submit_reservation_action')) {
        wp_die('Security check failed');
    }

    // Sanitize and validate form data
    $user_name = sanitize_text_field($_POST['user_name']);
    $user_email = sanitize_email($_POST['user_email']);

    // Save to database
    global $wpdb;
    $table_name = $wpdb->prefix . 'event_list';

    $wpdb->insert(
        $table_name,
        array(
            'user_name' => $user_name,
            'user_email' => $user_email,
        )
    );
    // Redirect user after submission
    wp_redirect(home_url('/thank-you-page/')); // Create a thank you page first
    exit;
}

add_action('admin_post_elp_submit_reservation', 'elp_handle_reservation_submission');

function enrolled_people_list()
{
    $page_title = 'Event_participants';
    $menu_title = 'Event_participants_list';
    $capability = 'manage_options';
    $menu_slug  = 'event-people-list';
    $function   = 'enrolled_people_list_page';
    $icon_url   = 'dashicons-businessman';
    $position   = 5;
    add_menu_page(
        $page_title,
        $menu_title,
        $capability,
        $menu_slug,
        $function,
        $icon_url,
        $position
    );
}

function enrolled_people_list_page()
{
    include plugin_dir_path(__FILE__) . 'templates/enrolled-people-list-page.php';
}

Ahora solo basta con llamar a la función add_action(), que añadirá nuestra pestaña de menú al panel de administración de WordPress.

<?php
/*
Plugin Name: Event List Plugin
Description: A custom form for event submission
Version: 1.0
Author: Your Name
*/

register_activation_hook(__FILE__, 'elp_activate');

function elp_activate()
{
    require_once plugin_dir_path(__FILE__) . 'includes/elp-database-setup.php';
    elp_create_table();
}

function elp_render_reservation_form()
{
    ob_start(); // Start output buffering

    // Include the form template
    include plugin_dir_path(__FILE__) . 'templates/sign-form1.php';

    return ob_get_clean(); // Return the form HTML
}

add_shortcode('sign_form_1', 'elp_render_reservation_form');

function elp_handle_reservation_submission()
{
    // Verify nonce for security
    if (! isset($_POST['elp_reservation_nonce']) || ! wp_verify_nonce($_POST['elp_reservation_nonce'], 'elp_submit_reservation_action')) {
        wp_die('Security check failed');
    }

    // Sanitize and validate form data
    $user_name = sanitize_text_field($_POST['user_name']);
    $user_email = sanitize_email($_POST['user_email']);

    // Save to database
    global $wpdb;
    $table_name = $wpdb->prefix . 'event_list';

    $wpdb->insert(
        $table_name,
        array(
            'user_name' => $user_name,
            'user_email' => $user_email,
        )
    );
    // Redirect user after submission
    wp_redirect(home_url('/thank-you-page/')); // Create a thank you page first
    exit;
}

add_action('admin_post_elp_submit_reservation', 'elp_handle_reservation_submission');

function enrolled_people_list()
{
    $page_title = 'Event_participants';
    $menu_title = 'Event_participants_list';
    $capability = 'manage_options';
    $menu_slug  = 'event-people-list';
    $function   = 'enrolled_people_list_page';
    $icon_url   = 'dashicons-businessman';
    $position   = 5;
    add_menu_page(
        $page_title,
        $menu_title,
        $capability,
        $menu_slug,
        $function,
        $icon_url,
        $position
    );
}

function enrolled_people_list_page()
{
    include plugin_dir_path(__FILE__) . 'templates/enrolled-people-list-page.php';
}

add_action('admin_menu', 'enrolled_people_list');

La pestaña Event Participants List ya debería ser visible. Al hacer clic en ella, veremos la lista de usuarios registrados. Sin embargo, seguramente habréis notado que todavía falta un elemento. Tanto el formulario creado como la lista en el menú de administración no tienen estilos CSS asignados, a pesar de que los elementos HTML que contienen tienen clases definidas.

Añadamos, por lo tanto, un archivo de estilos: style.css.

.mrp-reservation-form-container {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.mrp-form-group {
  margin-bottom: 15px;
}

.mrp-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.mrp-form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  /* Ensures padding doesn't affect width */
}

.mrp-submit-btn {
  background-color: #0073aa;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

.mrp-submit-btn:hover {
  background-color: #005177;
}

Añadamos nuestro archivo CSS a WordPress utilizando la función wp_enqueue_style().

<?php
/*
Plugin Name: Event List Plugin
Description: A custom form for event submission
Version: 1.0
Author: Your Name
*/

register_activation_hook(__FILE__, 'elp_activate');

function elp_activate()
{
    require_once plugin_dir_path(__FILE__) . 'includes/elp-database-setup.php';
    elp_create_table();
}

function elp_render_reservation_form()
{
    ob_start(); // Start output buffering

    // Include the form template
    include plugin_dir_path(__FILE__) . 'templates/sign-form1.php';

    return ob_get_clean(); // Return the form HTML
}

add_shortcode('sign_form_1', 'elp_render_reservation_form');

function elp_handle_reservation_submission()
{
    // Verify nonce for security
    if (! isset($_POST['elp_reservation_nonce']) || ! wp_verify_nonce($_POST['elp_reservation_nonce'], 'elp_submit_reservation_action')) {
        wp_die('Security check failed');
    }

    // Sanitize and validate form data
    $user_name = sanitize_text_field($_POST['user_name']);
    $user_email = sanitize_email($_POST['user_email']);

    // Save to database
    global $wpdb;
    $table_name = $wpdb->prefix . 'event_list';

    $wpdb->insert(
        $table_name,
        array(
            'user_name' => $user_name,
            'user_email' => $user_email,
        )
    );
    // Redirect user after submission
    wp_redirect(home_url('/thank-you-page/')); // Create a thank you page first
    exit;
}

add_action('admin_post_elp_submit_reservation', 'elp_handle_reservation_submission');

function enrolled_people_list()
{
    $page_title = 'Event_participants';
    $menu_title = 'Event_participants_list';
    $capability = 'manage_options';
    $menu_slug  = 'event-people-list';
    $function   = 'enrolled_people_list_page';
    $icon_url   = 'dashicons-businessman';
    $position   = 5;
    add_menu_page(
        $page_title,
        $menu_title,
        $capability,
        $menu_slug,
        $function,
        $icon_url,
        $position
    );
}

function enrolled_people_list_page()
{
    include plugin_dir_path(__FILE__) . 'templates/enrolled-people-list-page.php';
}

add_action('admin_menu', 'enrolled_people_list');

wp_enqueue_style('enroll-style', plugin_dir_url(__FILE__) . 'templates/style.css', array(), '1.0');

Nuestro plugin está listo. Observemos que, a pesar de su simplicidad, es un excelente punto de partida para una expansión prácticamente ilimitada. Utilizando los mecanismos empleados, podemos crear todo tipo de formularios y listas.