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;

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.

Create a new custom post type for Hotel.

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.

Create a custom taxonomy for Location.

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.

Enter the information of a few hotels and locations.

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.

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.

Step 2: Create a Search Button for Searching Hotels by Location

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:

Create a search button for searching hotel by locations.

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 declare filter-hotel.js file that I‘ll create later;
  • wp_localize_script: a function that helps transfer the value of the variable 'ajax_url' from the functions.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 and wp_ajax_nopriv_my_action. In this example, my_action is justread_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.

When typing any character, 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

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Author in WordPress using Meta Box (Part 1)
  13. How to Add Guest Author in WordPress using Meta Box (Part 2)
  14. How to Add Related Posts to WordPress Using Meta Box
  15. How to Build a Hotel Booking Website Using Meta Box - P1
  16. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  17. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  18. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  19. How to Create a Classified Ads Website using Meta Box
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page using Meta Box Plugin
  26. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  27. How to Create a Recipe - P3 - Using Meta Box and Elementor
  28. How to Create a Recipe - P4 - Using Meta Box and Bricks
  29. How to Create a Recipe - P5 - Using Meta Box and Zion
  30. How to Create a Recipe - P6 - Using Meta Box and Brizy
  31. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  32. How to Create a Recipe with Meta Box Plugin
  33. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  34. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  35. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  36. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  37. How to Create a Team Members Page - P4 - Just Meta Box
  38. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  39. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  40. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  41. How to Create a Video Gallery Page Using Meta Box + Oxygen
  42. How to Create ACF Flexible Content Field with Meta Box
  43. How to Create an Auto-Updated Cheat Sheet in WordPress
  44. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  45. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  46. How to create an FAQs page - P4 - Using Meta Box and Bricks
  47. How to Create an FAQs Page -P3- Using Meta Box
  48. How to Create Buttons with Dynamic Link using Custom Fields
  49. How to Create Category Thumbnails & Featured Images Using Custom Fields
  50. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  51. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  52. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  53. How to Create Online Admission Form for School or University
  54. How to Create Online Reservation Form for Restaurants using Meta Box
  55. How to Create Relationships - P1 - Using Meta Box and Oxygen
  56. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  57. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  58. How to Display Images from Cloneable Fields - P2 - with Oxygen
  59. How to Display Images from Cloneable Fields - P3 - with Elementor
  60. How to Display Images from Cloneable Fields - P4 - with Bricks
  61. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  62. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  63. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  64. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  65. How to Display Product Variations - P3 - Using Meta Box and Bricks
  66. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  67. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  68. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  69. How to Display the Most Viewed Posts - P1 - using MB Views
  70. How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
  71. How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
  72. How to Manually Reorder Posts with Meta Box
  73. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  74. How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
  75. How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
  76. How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
  77. How to Show the Featured Restaurants - P4 - Using MB Views
  78. How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
  79. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

Leave a Reply

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