Create an OTA Website Like Booking.com with Meta Box Plugin – P2: Create Filters on the Archive Page
Tags: wordpress
Published: 2020-10-13 03:11:03

In <a href="https://metabox.io/create-ota-website-with-meta-box-p1/">part 1</a> of the series "Create an OTA Website Like Booking.com with Meta Box plugin", we completed creating a page to introduce hotel rooms and creating <a href="https://metabox.io/series/custom-fields/">custom fields</a> to fill in the booking data. But an OTA website needs more than that: a filter hotel system to help users search for hotels that fit their requirements easily and quickly. So, this next part is about how to create filters on the Hotel archive page. Let's find out!

<!--more-->

First of all, take a look at the example of my filters in the sidebar on the Hotel archive page:

<img class="aligncenter" src="https://imgur.com/qJZwJYY.png" alt="Filters in the sidebar on the Hotel archive page of the OTA website like booking.com" width="1200" height="1500" />

<strong>Note</strong>: We are going to use the plugins that are already installed in part 1, so you don't need to have any others.

Now, it's time to start:

<h2>Create Filters on the Hotel Archive Page</h2>

<h3>Step 1: Create Filters and Their Corresponding Shortcodes</h3>

First, we need to create filters and their corresponding shortcodes by adding the following code to the <code>functions.php</code> file:

<strong>Create a filter and shortcode for "Search Hotel" - The main filter</strong>:

<pre>function justread_shortcode_main_filter() {

        ob_start();

        ?&gt;

        &lt;div class="filter-hotel"&gt;

                &lt;p&gt;Search Hotel&lt;/p&gt;

                &lt;input class="filter-input" id="location" type="" name="" placeholder="Destination"&gt;

&lt;input class="filter-input" id="check-in-date" type="" name="" 

placeholder="Check-in date"&gt;

                &lt;input class="filter-input" id="check-out-date" type="" name="" 

placeholder="Check-out date"&gt;

                &lt;input style="width: 48%; float: left;" class="filter-input" id="adults" type="" 

name="" placeholder="Adults"&gt;

            &lt;input style="width: 48%; float: right;" class="filter-input" id="children" type="" 

name="" placeholder="Children"&gt;

                &lt;input class="filter-action" type="submit" name="" value="Search"&gt;

        &lt;/div&gt;

        &lt;?php

        return ob_get_clean();

}

add_shortcode( 'justread_shortcode_main_filter', 'justread_shortcode_main_filter' );</pre>

<strong>Create a filter and shortcode for "Star rating"</strong>:

<pre>function justread_shortcode_rate_hotel() {

                ob_start();

                $terms = get_terms( array(

                                'taxonomy' =&gt; 'rate',

                                'hide_empty' =&gt; false,

                ) );

               foreach ( $terms as $term ) {

                                echo '&lt;a class="filter-sidebar filter-checkbox" data-rate-value="' . $term-&gt;name .

'"&gt;

                                                          &lt;input class="filter-checkbox__input" type="checkbox" name="filter-rate" value="' . $term-&gt;name . '"&gt;

                                                          &lt;div class="filter-checkbox__label"&gt;

                                                                      &lt;span class="filter_label"&gt;' . $term-&gt;name . '&lt;/span&gt;

                                                                      &lt;span class="filter_count"&gt;(' . $term-&gt;count . ')&lt;/span&gt;

                                                          &lt;/div&gt;

                                              &lt;/a&gt;';

                }

                return ob_get_clean();

}

add_shortcode( 'justread_shortcode_rate_hotel', 'justread_shortcode_rate_hotel' );</pre>

<strong>Create a filter and shortcode for "Property type"</strong>:

<pre>function justread_shortcode_hotel_type() {

    ob_start();

    ?&gt;

    &lt;a class="filter-sidebar filter-hotel-type" data-hotel-type-value="hotel"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

                &lt;span class="filter_label"&gt;Hotel&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-hotel-type" data-hotel-type-value="apartment"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

                &lt;span class="filter_label"&gt;Apartment&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-hotel-type" data-hotel-type-value="homestay"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

                &lt;span class="filter_label"&gt;Homestay&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-hotel-type" data-hotel-type-value="villa"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

                &lt;span class="filter_label"&gt;Villa&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-hotel-type" data-hotel-type-value="resort"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

                &lt;span class="filter_label"&gt;Resort&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-hotel-type" data-hotel-type-value="motel"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

                &lt;span class="filter_label"&gt;Motel&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;?php

    return ob_get_clean();

}

add_shortcode( 'justread_shortcode_hotel_type', 'justread_shortcode_hotel_type' );</pre>

<strong>Create a filter and shortcode for "Facilities"</strong>:

<pre>function justread_shortcode_facilities() {

    ob_start();

    ?&gt;

    &lt;a class="filter-sidebar filter-facilities" data-facilities-value="parking"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Parking&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-facilities" data-facilities-value="retaurant"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Restaurant&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-facilities" data-facilities-value="wi-fi"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Free wifi&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-facilities" data-facilities-value="swimming-pool"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Swimming pool&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-facilities" data-facilities-value="family-room"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Family room&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-facilities" data-facilities-value="bus-from-airport"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Bus from airport&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-facilities" data-facilities-value="elevator"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Elevator&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;?php

    return ob_get_clean();

}

add_shortcode( 'justread_shortcode_facilities', 'justread_shortcode_facilities' );</pre>

<strong>Create a filter and shortcode for "Room facility"</strong>:

<pre>function justread_shortcode_room_facilities() {

    ob_start();

    ?&gt;

    &lt;a class="filter-sidebar filter-room-facilities" data-room-facilities-value="kitchen"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Kitchen&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-room-facilities" data-room-facilities-value="bathroom"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Bathroom&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-room-facilities" data-room-facilities-value="air-conditioning"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Air conditioning&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-room-facilities" data-room-facilities-value="toilet"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Toilet&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-room-facilities" data-room-facilities-value="tv"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;TV&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-room-facilities" data-room-facilities-value="balcony"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Balcony&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-room-facilities" data-room-facilities-value="washing-machine"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Washing machine&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-room-facilities" data-room-facilities-value="sea-view"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Sea view&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;?php

    return ob_get_clean();

}

add_shortcode( 'justread_shortcode_room_facilities', 'justread_shortcode_room_facilities' );</pre>

<strong>Create a filter and shortcode for "Price per night"</strong>:

<pre>function justread_shortcode_hotel_price() {

    ob_start();

    ?&gt;

    &lt;a class="filter-sidebar filter-price" data-min-price="0" data-max-price="50"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;Under $50&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-price" data-min-price="50" data-max-price="100"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;From $50 to $100&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;a class="filter-sidebar filter-price" data-min-price="100" data-max-price="200"&gt;

        &lt;input class="filter-checkbox__input" type="checkbox"&gt;

        &lt;div class="filter-checkbox__label"&gt;

            &lt;span class="filter_label"&gt;From $100 to $200&lt;/span&gt;

        &lt;/div&gt;

    &lt;/a&gt;

    &lt;?php

    return ob_get_clean();

}

add_shortcode( 'justread_shortcode_hotel_price', 'justread_shortcode_hotel_price' );</pre>

<strong>In all the above code</strong>:

<ul>

   <li>The functions with the <code>function justread_shortcode_hotel_price</code> structure are used to insert to the <code>justread_shortcode_hotel_price</code> shortcode.</li>

   <li>The functions with the <code>add_shortcode( 'justread_shortcode_hotel_price',</code><code>'justread_shortcode_hotel_price' )</code> structure are used to generate the shortcodes in the form of <code>justread_shortcode_hotel_price</code>. These shortcodes are going to be inserted into the widgets in step 2, so you should give them easy-to-remember names.</li>

</ul>

<h3>Step 2: Insert the Shortcodes to the Widgets</h3>

This process is very easy. Just go <strong>Appearance</strong> &gt; <strong>Widgets</strong>, and then drag and drop the <strong>Text</strong> widget to the sidebar.

<img class="aligncenter" src="https://imgur.com/uJb7gAO.png" alt="Create the widget for filtering hotels on the archive page of the OTA website that likes booking.com" width="937" height="649" />

Next, add the shortcodes as follows:

<img class="aligncenter" src="https://imgur.com/7xip2vY.png" alt="Add the shortcode of filters to the widget" width="1216" height="627" />

After adding the shortcodes to 6 separate <strong>Text</strong> widgets and drop these widgets to the sidebar, don't forget to click <strong>Save</strong>.

Now, go to the front end, you will see that the filters are displayed, but they don't look really good. If you want them to be similar to the picture that I showed at the beginning of this tutorial, add CSS to the <code>style.css</code> file of the child theme. You can refer to my CSS <a href="https://github.com/wpmetabox/tutorials/blob/master/series-hotel-bookings-agoda/booking-hotel/style.css">here</a>.

<h2>Make the Filters Work</h2>

<h3>Step 1: Create and Submit the JS File to Make the Filters Work</h3>

To make the filters work (receive information that users want to filter, and then display the corresponding posts), we need to create a JS file. I name this file as <code>filter-hotel.js</code> and submit it in the <code>functions.php</code> file with the following code:

<pre>function justread_custom_scripts() {

    $terms = get_terms( array(

        'taxonomy' =&gt; 'location',

        'hide_empty' =&gt; false,

    ) );

    foreach ( $terms as $term ) {

        $location[] = $term-&gt;name;

    }

    $object = [

        'ajax_url' =&gt; admin_url( 'admin-ajax.php' ),

        'location_autocomplete' =&gt; $location,

    ];

    wp_enqueue_script( 'jquery-ui-autocomplete' );

    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' );</pre>

This JS file is responsible for sending the information that needs filtering to the <code>functions.php</code> file, receiving the results from the <code>functions.php</code> file, and finally displaying it on the front end. Therefore, it has the following content:

<pre>jQuery( function ( $ ) {

    function filterHotel() {

        $( '.check-in-date, .check-out-date' ).datepicker({

           minDate: 0,

           numberOfMonths: 2,

           showButtonPanel: true,

        });

        var location = ajax_object.location_autocomplete;

        $( '#location' ).autocomplete({

            source: location

        });

        rate_list = [];

        hotel_type = [];

        facilities = [];

        room_facilities = [];

        $( 'input.filter-checkbox__input' ).removeAttr( 'checked' );

        $( '.filter-action, .filter-checkbox, .filter-hotel-type, 

.filter-facilities, .filter-room-facilities, .filter-price' ).on( 'click', function() {

            var location = $( '#location' ).val(),

            adults = $( '#adults' ).val(),

            children = $( '#children' ).val(),

            min_price = $(this).attr( 'data-min-price' ),

            max_price = $(this).attr( 'data-max-price' );

            rate_list.push( $(this).attr( 'data-rate-value' ) );

            hotel_type.push( $(this).attr( 'data-hotel-type-value' ) );

            facilities.push( $(this).attr( 'data-facilities-value' ) );

            room_facilities.push( $(this).attr( 'data-room-facilities-value' ) );

            var input_check = $(this).find( 'input' ).attr( 'checked' );

            $(this).find( 'input' ).attr( 'checked', 'checked' );

            jQuery.ajax({

                url: ajax_object.ajax_url,

                type: "POST",

                data: {

                    action: 'justread_filter_hotel',

                    rate: rate_list,

                    location: location,

                    hotel_type: hotel_type,

                    facilities: facilities,

                    room_facilities: room_facilities,

                    min_price: min_price,

                    max_price: max_price,

                    adults: adults,

                    children: children,

                },

                success: function(response) {

                    $( '.site-main' ).html(response.post);

                }

            });

        });

    }

    filterHotel();

} );</pre>

You can refer to the content of the <code>filter-hotel.js</code> file <a href="https://github.com/wpmetabox/tutorials/blob/master/series-hotel-bookings-agoda/booking-hotel/js/filter-hotel.js">here</a>.

<h3>Step 2: Query and Return Corresponding Data When Users Search</h3>

When users use the filters to choose their desired hotels, the <code>filter-hotel.js</code> file will receive these data and send them to the <code>functions.php</code> file. The <code>function.php</code> file will query and return posts (hotels) that fit the requirements of the <code>filter-hotel.js</code> file.

In order for the <code>functions.php</code> file to do it, we need to add the following code to the <code>functions.php</code> file:

<pre>function justread_filter_hotel() {

    $location = isset( $_POST['location'] ) ? $_POST['location'] : '';

    $rate = isset( $_POST['rate'] ) ? $_POST['rate'] : '';

    $hotel_type = isset( $_POST['hotel_type'] ) ? $_POST['hotel_type'] : '';

    $facilities = isset( $_POST['facilities'] ) ? $_POST['facilities'] : '';

    $room_facilities = isset( $_POST['room_facilities'] ) ? $_POST['room_facilities'] : '';

    $min_price = isset( $_POST['min_price'] ) ? $_POST['min_price'] : '';

    $max_price = isset( $_POST['max_price'] ) ? $_POST['max_price'] : '';

    $adults = isset( $_POST['adults'] ) ? $_POST['adults'] : '';

    $children = isset( $_POST['children'] ) ? $_POST['children'] : '';

    $rate_array = array(

        'taxonomy' =&gt; 'rate',

        'field' =&gt; 'name',

        'terms' =&gt; $rate,

        'operator' =&gt; 'IN',

    );

    $rate_array = $rate ? $rate_array : '';

    $location_array = array(

        'taxonomy' =&gt; 'location',

        'field' =&gt; 'name',

        'terms' =&gt; array( $location ),

        'operator' =&gt; 'IN',

    );

    $location_array = $location ? $location_array : '';

    $hotel_type_array = array(

        'key' =&gt; 'hotel_type',

        'value' =&gt; $hotel_type,

        'compare' =&gt; 'IN',

    );

    $hotel_type_array = $hotel_type ? $hotel_type_array : '';

    $facilities_array = array(

        'key' =&gt; 'facilities',

        'value' =&gt; $facilities,

        'compare' =&gt; 'IN',

    );

    $facilities_array = $facilities ? $facilities_array : '';

    $room_facilities_array = array(

        'key' =&gt; 'room_facilities',

        'value' =&gt; $room_facilities,

        'compare' =&gt; 'IN',

    );

    $room_facilities_array = $room_facilities ? $room_facilities_array : '';

    $price_array = array(

        'key' =&gt; 'price_p',

        'value' =&gt; array( $min_price, $max_price ),

        'compare' =&gt; 'BETWEEN',

        'type' =&gt; 'NUMERIC',

    );

    $price_array = $max_price ? $price_array : '';

    $adults_array = array(

        'key' =&gt; 'adults',

        'value' =&gt; $adults,

        'type' =&gt; 'NUMERIC',

        'compare' =&gt; '&gt;=',

    );

    $adults_array = $adults ? $adults_array : '';

    $chidren_array = array(

        'key' =&gt; 'children',

        'value' =&gt; $children,

        'type' =&gt; 'NUMERIC',

        'compare' =&gt; '&gt;=',

    );

    $chidren_array = $children ? $chidren_array : '';

    $query_arr = array(

        'post_type' =&gt; 'hotel',

        'post_status' =&gt; 'publish',

        'tax_query' =&gt; array(

            'relation' =&gt; 'AND',

            $rate_array,

            $location_array,

        ),

        'meta_query' =&gt; array(

            'relation' =&gt; 'AND',

            $adults_array,

            $hotel_type_array,

            $facilities_array,

            $room_facilities_array,

            $price_array,

        ),

    );

    $query = new WP_Query( $query_arr );

    if ( $query-&gt;have_posts() ) :

        ob_start();

        while ( $query-&gt;have_posts() ) : $query-&gt;the_post();

            get_template_part( 'template-parts/content', 'hotel' );

        endwhile;

        $posts = ob_get_clean();

    else :

        $posts = '&lt;h1&gt;' . __( 'No post', 'justread' ) .'&lt;/h1&gt;';

    endif;

    $return = array(

        'post' =&gt; $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' );</pre>

<strong>Explanation</strong>:

<ul>

   <li><code>'post_type' =&gt; 'hotel': 'hotel'</code> is the slug of the post type created in part 1.</li>

   <li><code>'wp_ajax_justread_filter_hotel'</code> and <code>'wp_ajax_nopriv_justread_filter_hotel'</code> are 2 hooks for implementing ajax. They are named with the following structures: <code>wp_ajax_my_action</code> and <code>wp_ajax_nopriv_my_action</code>.</li>

</ul>

In addition, because the fields of the hotel rooms (Room) are the subfields of a <a href="https://metabox.io/create-group-of-custom-fields-with-meta-box-group/">group field</a>, so they can't be queried directly. Therefore, you have to add separate post meta to query them. Use this code in the <code>functions.php</code> file:

<pre>function justread_add_field_group( $post_id ) {

    $rooms = get_post_meta( $post_id, 'group_room', true );

    delete_post_meta( $post_id, 'price_p' );

    delete_post_meta( $post_id, 'adults' );

    delete_post_meta( $post_id, 'children' );

    delete_post_meta( $post_id, 'room_facilities' );

    foreach ($rooms as $key =&gt; $room) {

        add_post_meta( $post_id, 'price_p', (int)$room['price'] );

        add_post_meta( $post_id, 'adults', (int)$room['adults'] );

        add_post_meta( $post_id, 'children', (int)$room['children'] );

        foreach ( $room['room_facilities'] as $key =&gt; $facilities ) {

            add_post_meta( $post_id, 'room_facilities', $facilities );

        }

    }

}

add_action( 'rwmb_field-for-hotel_after_save_post', 'justread_add_field_group' );</pre>

All the content of my <code>functions.php</code> file is <a href="https://github.com/wpmetabox/tutorials/blob/master/series-hotel-bookings-agoda/booking-hotel/functions.php">here</a>.

<h3>Step 3: Display the Results on the Front End</h3>

After step 2 is done, the <code>functions.php</code> file will return the data and the <code>filter-hotel.js</code> file will receive and display this data on the front end by this code:

<pre>success: function(response) {

$( '.site-main' ).html(response.post);

}</pre>

In fact, I added this code right in step 1, so you don't need to do anything else.

Next, go to the hotel archive page and try some filters, you will see the result like this:

<img class="aligncenter" src="https://i.imgur.com/Aq6mkVn.gif" alt="Filters on the archive page of the OTA WordPress website that likes booking.com" width="1343" height="591" />

As you can see, the filters are working!

<h2>Last Words</h2>

After following this tutorial, we have the complete filters that allow users to find hotels quickly and effectively. In the next part (the last part) of this series, we are going to create a filter on the single hotel page. Don't miss it! That is a very important part of your OTA website. And if you have any questions, feel free to share that with us in the comment section.
--- --- --- 
The publication at [Meta Box](https://metabox.io/create-ota-website-with-meta-box-p2/).