Building an Online Booking Plugin for WordPress

Posted on 15th June 2023

If you’re a WordPress developer, chances are you’ve been asked to build a plugin at some point. Maybe you’ve even thought about building a plugin to sell on CodeCanyon. In this article, I’m going to show you how to build an online booking plugin for WordPress. I’ll cover everything from setting up the plugin to adding features like payment integration and email notifications. By the end of this article, you’ll have a plugin that you can use on your own site or sell on CodeCanyon.

Getting Started

The first thing you need to do is set up the plugin. Create a new directory in your WordPress plugins folder and give it a name like “online-booking-plugin”. Inside this directory, create a file named “online-booking-plugin.php”. This will be the main plugin file. You can start this file by adding a header comment with some basic information about the plugin:

<?php

/*

Plugin Name: Online Booking Plugin

Plugin URI: https://example.com/online-booking-plugin

Description: A plugin to add online booking functionality to your WordPress site

Version: 1.0

Author: John Doe

Author URI: https://example.com

License: GPLv2 or later

Text Domain: online-booking-plugin

*/

Next, you need to register a custom post type for bookings. This will be used to store information about each booking. Add the following code to your plugin file:

function online_booking_plugin_register_post_type() {

$labels = array(

'name' => 'Bookings',

'singular_name' => 'Booking',

'add_new' => 'Add New Booking',

'add_new_item' => 'Add New Booking',

'edit_item' => 'Edit Booking',

'new_item' => 'New Booking',

'view_item' => 'View Booking',

'search_items' => 'Search Bookings',

'not_found' => 'No bookings found',

'not_found_in_trash' => 'No bookings found in Trash',

);

$args = array(

'labels' => $labels,

'public' => false,

'show_ui' => true,

'capability_type' => 'post',

'menu_icon' => 'dashicons-calendar-alt',

'supports' => array( 'title' ),

);

register_post_type( 'booking', $args );

}

add_action( 'init', 'online_booking_plugin_register_post_type' );

This code registers a custom post type named “booking”. The labels are used to display the custom post type in the WordPress admin. The “public” argument is set to false so that the custom post type is not publicly accessible. The “show_ui” argument is set to true so that the custom post type is displayed in the WordPress admin. The “capability_type” argument is set to “post” so that the default WordPress capabilities apply to the custom post type. The “menu_icon” argument is used to set the icon for the custom post type in the WordPress admin menu. The “supports” argument is used to specify which fields are displayed when editing a booking. In this case, only the title field is displayed.

Creating the Booking Form

Now that you have the custom post type set up, you need to create the booking form. This form will be used to collect information from the customer. Add the following code to your plugin file:

function online_booking_plugin_booking_form() {

$current_user = wp_get_current_user();

$name = $current_user->user_firstname . ' ' . $current_user->user_lastname;

$email = $current_user->user_email;

$phone = get_user_meta( $current_user->ID, 'billing_phone', true );

?>

<form action="<?php echo esc_url( $_SERVER['REQUEST_URI'] ); ?>" method="post" id="online-booking-form">

<h3>Your Details</h3>

<p>

<label for="name">Name:</label>

<input type="text" name="name" id="name" value="<?php echo esc_attr( $name ); ?>" />

</p>

<p>

<label for="email">Email:</label>

<input type="text" name="email" id="email" value="<?php echo esc_attr( $email ); ?>" />

</p>

<p>

<label for="phone">Phone:</label>

<input type="text" name="phone" id="phone" value="<?php echo esc_attr( $phone ); ?>" />

</p>

<h3>Your Booking</h3>

<p>

<label for="date">Date:</label>

<input type="text" name="date" id="date" value="" />

</p>

<p>

<label for="time">Time:</label>

<input type="text" name="time" id="time" value="" />

</p>

<p>

<label for="service">Service:</label>

<select name="service" id="service">

<option value="">-- Please select --</option>

<option value="haircut">Haircut</option>

<option value="haircolor">Hair Color</option>

<option value="manicure">Manicure</option>

<option value="pedicure">Pedicure</option>

</select>

</p>

<p>

<label for="comments">Comments:</label>

<textarea name="comments" id="comments"></textarea>

</p>

<p>

<input type="submit" name="online-booking-form-submit" value="Submit" />

</p>

</form>

<?php

}

This code creates a booking form with fields for the customer’s name, email, phone, date, time, service, and comments. The form also includes a submit button. When the submit button is clicked, the form data is posted to the same page. The “online-booking-form” is the id of the form. This is used to handle the form submission.

Next, you need to add a shortcode for the booking form. Shortcodes are used to insert content into WordPress posts and pages. Add the following code to your plugin file:

function online_booking_plugin_booking_form_shortcode() {

ob_start();

online_booking_plugin_booking_form();

return ob_get_clean();

}

add_shortcode( 'online

3. Create a Custom Post Type for Bookings

A custom post type is a great way to store bookings in WordPress. This will give you the flexibility to add custom fields to store information about the booking, and it will also integrate nicely with the WordPress admin interface.

To create a custom post type for bookings, you can use the register_post_type() function. This function should be added to your theme's functions.php file.

Here is an example of how you can use register_post_type() to create a custom post type for bookings:

_x( 'Bookings', 'Post Type General Name', 'text_domain' ),
'singular_name' => _x( 'Booking', 'Post Type Singular Name', 'text_domain' ),
'menu_name' => __( 'Bookings', 'text_domain' ),
'name_admin_bar' => __( 'Booking', 'text_domain' ),
'archives' => __( 'Booking Archives', 'text_domain' ),
'attributes' => __( 'Booking Attributes', 'text_domain' ),
'parent_item_colon' => __( 'Parent Booking:', 'text_domain' ),
'all_items' => __( 'All Bookings', 'text_domain' ),
'add_new_item' => __( 'Add New Booking', 'text_domain' ),
'add_new' => __( 'Add New', 'text_domain' ),
'new_item' => __( 'New Booking', 'text_domain' ),
'edit_item' => __( 'Edit Booking', 'text_domain' ),
'update_item' => __( 'Update Booking', 'text_domain' ),
'view_item' => __( 'View Booking', 'text_domain' ),
'view_items' => __( 'View Bookings', 'text_domain' ),
'search_items' => __( 'Search Booking', 'text_domain' ),
'not_found' => __( 'Not found', 'text_domain' ),
'not_found_in_trash' => __( 'Not found in Trash', 'text_domain' ),
'featured_image' => __( 'Featured Image', 'text_domain' ),
'set_featured_image' => __( 'Set featured image', 'text_domain' ),
'remove_featured_image' => __( 'Remove featured image', 'text_domain' ),
'use_featured_image' => __( 'Use as featured image', 'text_domain' ),
'insert_into_item' => __( 'Insert into booking', 'text_domain' ),
'uploaded_to_this_item' => __( 'Uploaded to this booking', 'text_domain' ),
'items_list' => __( 'Bookings list', 'text_domain' ),
'items_list_navigation' => __( 'Bookings list navigation', 'text_domain' ),
'filter_items_list' => __( 'Filter bookings list', 'text_domain' ),
);
$args = array(
'label' => __( 'Booking', 'text_domain' ),
'description' => __( 'Bookings', 'text_domain' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
'taxonomies' => array( 'category', 'post_tag' ),
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'menu_position' => 5,
'menu_icon' => 'dashicons-calendar-alt',
'show_in_admin_bar' => true,
'show_in_nav_menus' => true,
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'capability_type' => 'page',
);
register_post_type( 'booking', $args );

}
add_action( 'init', 'wpdocs_booking_post_type', 0 );

?>

In the code above, we've registered a custom post type for bookings and given it some labels. We've also set some arguments for the post type, such as the capability type and whether it should be publicly queryable.

You can read more about custom post types in the WordPress Codex.

4. Create a Booking Form

Now that you have a custom post type for bookings, you need to create a form that users can fill out to make a booking.

You can use the register_setting() function to register a setting for your booking form. This setting will be used to store the data from the form.

You can use the add_settings_field() function to add fields to your form. This function takes three arguments: the name of the setting, the label for the field, and a callback function that outputs the field.

Here is an example of how you can use register_setting() and add_settings_field() to create a booking form:

<?php

// Register Settings
register_setting( 'booking_form', 'booking_form_options', 'booking_form_options_validate' );

// Add Settings Fields
add_settings_field( 'booking_form_name', 'Name', 'booking_form_name_field', 'booking_form', 'booking_form_main' );
add_settings_field( 'booking_form_email', 'Email', 'booking_form_email_field', 'booking_form', 'booking_form_main' );
add_settings_field( 'booking_form_date', 'Date', 'booking_form_date_field', 'booking_form', 'booking_form_main' );

// Output Fields
function booking_form_name_field() {
$options = get_option( 'booking_form_options' );
echo "";
}
function booking_form_email_field() {
$options = get_option( 'booking_form_options' );
echo "";
}
function booking_form_date_field() {
$options = get_option( 'booking_form_options' );
echo "";
}

?>

In the code above, we've registered a setting for our booking form and added three fields to the form. We've also created callback functions to output the fields.

You can read more about settings forms in the WordPress Codex.

5. Process the Booking Form