Normally, OTA websites have a useful feature that is finding hotels by location. This feature is a filter using custom fields to filter hotels that meet the criteria the user needs. In this article, I will show you how to use custom fields and filter out hotels with custom fields that match the desired location.
Before Getting Started
In this article, we have to create a new custom post type for Hotel and custom taxonomy for Location for those hotels. To do it, let’s use the Meta Box plugin and its extensions:
- Meta Box: a framework to create custom fields, custom post types, custom taxonomies. It’s free and available on wordpress.org;
- MB Custom Post Type: is a free extension of Meta Box, it’s used to create custom post types and custom taxonomies. It’s available on wordpress.org;
Besides, in this example, I use a free theme as a demo, it’s Justread.
Step 1: Create a New Custom Post Type for Hotel and Custom Taxonomy for Location
I create a new custom post type named Hotel, and the information of each hotel is entered as a post of the Hotel post type. Besides, I create a custom taxonomy for this custom post type named Location, to enter information about the location of each hotel.
To create a new custom post type, go to Meta Box > Post Types > New Post Type. Then enter the information for the custom post type as the below picture.
To create a taxonomy for location information, go to Meta Box > Taxonomies > Add New. In the entry for the custom taxonomy’s information, remember to choose Hotel in the Assign to Post Types section. This will assign the custom taxonomy that we’ve created to the Hotel post type.
Now, the Hotel post type will appear on the admin menu. It includes a section to enter locations. Let’s go there and enter the information of a few hotels and locations. We need this data for the following steps.
Note: In this article, I just enter a few locations as an example. In fact, you have to enter a large number of locations which are on many levels such as countries, provinces, cities, regions, … That time, you need to import data to the Location taxonomy.
You can use plugins to easily import data. On wordpress.org, there’re many plugins to do it, you can refer here. It’s quite easy so I won’t mention it in detail here.
First, go to the archive page of the Hotel post type’s articles (it’s normally in http://domain.com/post-type-name).
This time, there‘s no search box on the page to filter hotels by a certain standard. So I add a box to search by location as follows:
Create a file named archive-hotel.php
(the file name is in the form of archive- [post-type-name].php
) in the theme folder and add the following code to the file:
<div class="filter-hotel">
<p>Search Hotel</p>
<input class="filter-input" id="location" type="" name="" placeholder="Location">
<input class="filter-action" type="submit" name="" value="Search">
</div>
You will see the search box as follows:
Step 3: Display Hotels that Meet the Criterion
I want that when users click the Search button, the page won’t reload, so I use ajax to filter.
I add the following code to the functions.php
file:
function justread_custom_scripts() {
$terms = get_terms( array(
'taxonomy' => 'location',
'hide_empty' => false,
) );
foreach ( $terms as $term ) {
$location[] = $term->name;
}
$object = [
'ajax_url' => admin_url( 'admin-ajax.php' ),
'location_autocomplete' => $location,
];
wp_enqueue_script( 'justread-ajax-filter-hotel', get_stylesheet_directory_uri() . '/js/filter-hotel.js', array( 'jquery' ), '', true );
wp_localize_script( 'justread-ajax-filter-hotel', 'ajax_object', $object );
}
add_action( 'wp_enqueue_scripts', 'justread_custom_scripts' );
Explanation:
'wp_enqueue_scripts'
: it’s the hook used to declarefilter-hotel.js
file that I‘ll create later;wp_localize_script
: a function that helps transfer the value of the variable'ajax_url'
from thefunctions.php
file to the filter-hotel.js file.
Next, to get the data of the custom post type and return it as the form of json (it means showing the articles in the Hotel post type) when someone hit the Search button, add the following code to the functions.php
file:
function justread_filter_hotel() {
$location = $_POST['location'];
$query_arr = array(
'post_type' => 'hotel',
'post_status' => 'publish',
'tax_query' => array(
array(
'taxonomy' => 'location',
'field' => 'name',
'terms' => array( $location ),
'operator' => 'IN',
),
),
);
$query = new WP_Query( $query_arr );
if ( $query->have_posts() ) :
ob_start();
while ( $query->have_posts() ) : $query->the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;
$posts = ob_get_clean();
else :
$posts = '<h1>' . __( 'No post', 'justread' ) .'</h1>';
endif;
$return = array(
'post' => $posts,
);
wp_send_json( $return );
}
add_action( 'wp_ajax_justread_filter_hotel', 'justread_filter_hotel' );
add_action( 'wp_ajax_nopriv_justread_filter_hotel', 'justread_filter_hotel' );
Explanation:
'hotel'
: the slug of the custom post type that we created in step 1;'location'
: the ID of the custom taxonomy that we created in step 1 for the location;'wp_ajax_justread_filter_hotel'
and'wp_ajax_nopriv_justread_filter_hotel'
: they’re two hooks to perform ajax. They’re named according to the following rule:wp_ajax_my_action
andwp_ajax_nopriv_my_action
. In this example,my_action
isjustread_filter_hotel
.
Also in the theme folder, let’s create another file named filter-hotel.js
with the following content:
jQuery( function ( $ ) {
function filterHotel() {
var location = ajax_object.location_autocomplete;
$( '#location' ).autocomplete({
source: location
});
$( '.filter-action' ).on( 'click', function() {
var location = $( '#location' ).val();
jQuery.ajax({
url: ajax_object.ajax_url,
type: "POST",
data: {
action: 'justread_filter_hotel',
location: location,
},
success: function(response) {
$( '.site-main' ).html(response.post);
}
});
} );
}
filterHotel();
} );
In the above code, I have used the autocomplete library of the jquery so that when a user types any character into the search box (Search), the similar locations will be suggested.
This whole js file will help get the location data when the user clicks on the Search button, then passes to the functions.php
file to retrieve the data of the posts in the Hotel post type. Then, when the functions.php
file returns the data, the js file will display them (thanks to the $ ('.site-main') .html (response.post);
code).
Now, when you enter a location in the Search box, only the hotels in that location will be returned and displayed on the page.
So you've finished creating filters to search for hotels by location already.
Last Words
By this way, you can create similar filters to search for hotels or posts by any criteria that we’ll explore in the upcoming article. You can apply it flexibly to create more filtering features for your website.
Hopefully, this tip can help you build an OTA website easier. If you have any questions or suggestions, leave a comment below. And do not forget to follow my next tutorials!
Other case studies you might be interested in
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display a User List On the Frontend with Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields for WooCommerce - P2 - Using MB Views
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts - Using Custom Fields
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to create a FAQs page - P5 - Using Meta Box and Breakdance
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page - P7 - Using Meta Box + Kadence
- How to Create a Product Page - P8 - Using Meta Box and Brizy
- How to Create a Product Page using Meta Box Plugin
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe - P8 - Using Meta Box and Kadence
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
- How to Create a Video Gallery Page - P5 - Using MB Views
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page - P6 - Using MB Views
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
- How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
- How to Create Download Buttons Using Custom Fields with Meta Box Plugin
- How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
- How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Notification Using Custom HTML Field
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Relationships - P2 - Using Meta Box and Bricks
- How to Create Relationships - P3 - Using MB Views
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - with Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
- How to Display The Latest Products - P5 - Using Meta Box and Bricks
- How to Display the Latest Products - P6 - using Meta Box and Breakdance
- How to Display the Latest Products - P7 - Using Meta Box + Kadence
- How to Display the Latest Products Section - P4 - Using Meta Box + Zion
- How to Display the Most Viewed Posts - P1 - using MB Views
- How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
- How to Display the Most Viewed Posts - P3 - Using Meta Box and Bricks
- How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
- How to Manually Reorder Posts with Meta Box
- How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
- How to Show Posts With a Specific Criteria - P3 - Using MB Views
- How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
- How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
- How to Show Posts with Specific Criteria - P4 - Using Meta Box + Breakdance
- How to Show Posts with Specific Criteria - P5 - Using Meta Box and Elementor
- How to Show Posts with Specific Criteria - P6 - Using Meta Box and Zion
- How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
- How to Show the Featured Restaurants - P4 - Using MB Views