WordPress Plugin Saving Data to Database

Custom WordPress Plugin Saving Data Submitted by Site Visitors to the Database – Part 2

Bymultiedu

In the previous part of the tutorial, we finished by saving the entered data to the database. Now it’s time to read this data in the administrator panel. For this purpose, we will create a separate menu called Event Participants List in the admin panel. The WordPress function used to create a new menu is add_menu_page(). In the event-list-plugin.php file, we will place it inside a function that, when called, will create the new menu.

<?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
    );
}

You can find the documentation for adding a new menu tab in the WordPress admin panel here. Of course, we could use the values passed to the function directly instead of variables, but for the purposes of this tutorial, I decided that using variables would be more readable. Let’s take a look at the $function variable — it points to the function in which we will place the template for the menu we create.

However, we will not add the menu template directly. Instead, we will use the /templates directory that we created earlier. In this directory, we therefore create the file 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>

In our plugin file event-list-plugin.php, we add it inside the function specified in add_menu_page(), namely enrolled_people_list_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';
}

Now it is enough to call the add_action() function, which will add our menu tab to the WordPress admin panel.

<?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');

The Event Participants List tab should now be visible. After clicking on it, we will see a list of registered users. However, you have probably noticed that one element is still missing. Both the created form and the list in the admin menu do not have any CSS styles applied, even though the HTML elements contained within them have assigned classes.

Let’s therefore add a stylesheet file — 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;
}

Let’s add our CSS file to WordPress using the wp_enqueue_style() function.

<?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');

Our plugin is now ready. Note that despite its simplicity, it is an excellent starting point for virtually unlimited expansion. By using the mechanisms we have implemented, we can create various types of forms and lists.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *