WordPress

Ashwin Thapliyal

Creating a custom booking widget for WordPress without plugins

Introduction

Creating a custom booking widget on WordPress without using plugins involves a bit of coding but can give you greater control and customization over the functionality and design of your widget. Below is a step-by-step guide to help you build a simple booking form widget directly into your WordPress theme starting from planning, creating a child theme, to styling and testing the widget. Read more to dive deep into the process of creating a booking widget.

Step 1: Planning Your Widget

Before coding, decide what features your booking widget needs. For a basic booking form, you might need:

Date and time selection
Name and contact information fields
A submit button

Step 2: Creating a Child Theme

It's a good practice to create a child theme to avoid losing your changes when updating the parent theme. If you already have a child theme, skip to Step 3.

Create a child theme folder: Go to /wp-content/themes/ and create a new folder named yourtheme-child.
Create a style.css file inside your child theme folder:

	/*
	Theme Name: Your Theme Child
	Template: parent-theme-folder-name
	*/
	@import url("../parent-theme-folder-name/style.css");

view raw gistfile1.txt hosted with ❤ by GitHub

3.Create a functions.php file:

	<?php
	add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
	function enqueue_parent_styles() {
	wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
	}

view raw gistfile1.txt hosted with ❤ by GitHub

‍

Step 3: Adding the Widget Code

Create the widget HTML: Edit the functions.php file in your child theme to register a sidebar widget area if it doesn't exist and add the widget code.

	function add_widgets_init() {
	register_sidebar([
	'name' => 'Custom Booking Widget Area',
	'id' => 'custom_booking_widget',
	'before_widget' => '<div>',
	'after_widget' => '</div>',
	'before_title' => '<h2 class="widget-title">',
	'after_title' => '</h2>',
	]);
	}
	add_action('widgets_init', 'add_widgets_init');

	function custom_booking_form() {
	?>
	<form id="booking-form">
	<label for="date">Choose your date:</label>
	<input type="date" id="date" name="date" required><br>

	<label for="time">Choose your time:</label>
	<input type="time" id="time" name="time" required><br>

	<label for="name">Your Name:</label>
	<input type="text" id="name" name="name" required><br>

	<label for="email">Your Email:</label>
	<input type="email" id="email" name="email" required><br>

	<input type="submit" value="Book Now">
	</form>
	<?php
	}

view raw gistfile1.txt hosted with ❤ by GitHub

‍

Step 4: Handling Form Submission with JavaScript

Add JavaScript to handle the form submission: You can use AJAX to submit form data without reloading the page.Add this script to your functions.php or a separate JS file and enqueue it:

	add_action('wp_enqueue_scripts', 'enqueue_custom_js');
	function enqueue_custom_js() {
	wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
	}

view raw gistfile1.txt hosted with ❤ by GitHub

2. Create custom.js in your child theme under /js/custom.js:

	jQuery(document).ready(function($) {
	$('#booking-form').submit(function(e) {
	e.preventDefault();
	var formData = $(this).serialize();
	$.ajax({
	type: 'POST',
	url: ajaxurl,
	data: formData,
	success: function(response) {
	alert('Booking successful!');
	},
	error: function() {
	alert('Failed to process booking.');
	}
	});
	});
	});

view raw gistfile1.txt hosted with ❤ by GitHub

Step 5: Styling Your Widget

You can add CSS directly into your child theme’s style.css to style the form:

	#booking-form {
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 5px;
	}
	#booking-form input[type="text"],
	#booking-form input[type="email"],
	#booking-form input[type="date"],
	#booking-form input[type="time"] {
	width: 100%;
	padding: 8px;
	margin-top: 5px;
	margin-bottom: 10px;
	}

view raw gistfile1.txt hosted with ❤ by GitHub

Step 6: Testing Your Widget

After integrating the widget into your site, thoroughly test it to ensure it works as expected. Check form submissions, validations, and any interactions with other parts of your website.

‍

Creating a custom booking widget in WordPress without plugins allows you to tailor the feature to your specific requirements and integrate more closely with your theme's design. This approach requires more upfront work but can be more rewarding for those comfortable with coding and WordPress development.

‍

If you enjoyed this article and want more join us on LinkedIn, Facebook and X

‍

No items found.

Ashwin Thapliyal

Subscribe to our newsletter

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Home

Platforms

Wordpress

Drupal

AEM

Contentful

Kentico

Webflow

Insights

About

Contact

Ashwin Thapliyal

Creating a custom booking widget for WordPress without plugins

Introduction

Step 1: Planning Your Widget

Step 2: Creating a Child Theme

Step 3: Adding the Widget Code

Step 4: Handling Form Submission with JavaScript

Step 5: Styling Your Widget

Step 6: Testing Your Widget

Ashwin Thapliyal

Related Insights

Migrating from WordPress.com to WordPress VIP

Vinod Pabba

7 Best Website Security Practices To Keep Your Valuable Data Secured

Venkat reddy

Migrating a Website from WPEngine to WPVIP

Venkat reddy

Subscribe to our newsletter