WordPress Multi-Parameter Search for Lichter Realty → Bright Bright Great

For our work on the Lichter Realty website, we were tasked with building a multi-parameter property search.

Lichter wanted their clients to be able to filter properties based on multiple criteria: contract type, property type, square footage, and availability.

Since the Lichter site is built in WordPress, to achieve this we had to build out a way to dynamically modify WP Query based on the user’s selections. To make this easier, all of the properties have multiple taxonomies to handle these various parameters, and a set of custom fields to manage availability.

First, let’s build out a form so users can make their selections. We’re using GET as our method so a filtered search ends up with shareable URLs. GET is the default, but I like to set it anyway to make it easier to figure out what’s going on at a glance. Most of the parameters are using checkbox inputs so we can select multiple values.

The exceptions are contract type and availability, which have all options, so we can use radio buttons. The checkbox options get input names with [] at the end to make sure our values get saved in an array. The values for each input is the ID of the associated taxonomy term, except in the case of the all options.

Note:

In the live site, there is more markup for presentational purposes, but for simplicity I’ve stripped that out here so we can focus on the inputs.

<form method="get" class="property-filters"> <!-- CONTRACT TYPE --> <fieldset class="contract-type"> <div class="accent-sans">View properties that are:</div> <input type="radio" id="contract-type--sale" name="contract-type" value="30" /> <label for="contract-type--sale">For Sale</label> <input type="radio" id="contract-type--lease" name="contract-type" value="31" /> <label for="contract-type--lease">For Lease</label> <input type="radio" id="contract-type--all" name="contract-type" value="all" checked /> <label for="contract-type--all">All</label> </fieldset> <!-- PROPERTY TYPE --> <fieldset> <div class="accent-sans">Property Type:</div> <input type="checkbox" id="property-type--industrial" name="property-type[]" value="4" /> <label for="property-type--industrial">Industrial</label> <input type="checkbox" id="property-type--flex-space" name="property-type[]" value="6" /> <label for="property-type--flex-space">Flex Space</label> <input type="checkbox" id="property-type--loft-office" name="property-type[]" value="5" /> <label for="property-type--loft-office">Loft/Office</label> <input type="checkbox" id="property-type--commercial" name="property-type[]" value="3" /> <label for="property-type--commercial">Commercial</label> <input type="checkbox" id="property-type--land" name="property-type[]" value="27" /> <label for="property-type--land">Land</label> </fieldset> <!-- SQUARE FOOTAGE --> <fieldset> <div class="accent-sans">Square Footage:</div> <input type="checkbox" id="sqft--5kless" name="sqft[]" value="7" /> <label for="sqft--5kless">5k &amp; Less</label> <input type="checkbox" id="sqft--5k10k" name="sqft[]" value="8" /> <label for="sqft--5k10k">5K - 10K</label> <input type="checkbox" id="sqft--10k15k" name="sqft[]" value="9" /> <label for="sqft--10k15k">10K - 15K</label> <input type="checkbox" id="sqft--15kgreater" name="sqft[]" value="10" /> <label for="sqft--15kgreater">15k &amp; Greater</label> </fieldset> <!-- AVAILABILITY --> <fieldset> <div class="accent-sans">Availability:</div> <input type="radio" id="availability--now" name="availability" value="now" /> <label for="availability--now">Now Available</label> <input type="radio" id="availability--soon" name="availability" value="soon" /> <label for="availability--soon">Coming Soon</label> <input type="radio" id="availability--all" name="availability" value="all" /> <label for="availability--all">All Units</label> </fieldset> <button type="submit" class="btn red">Filter</button> </form>

You might have noticed above that availability works a bit differently than the other options. Availability is a date based filter. In the backend, we have custom fields (lovingly created through the help of Advanced Custom Fields Pro). The first field is a checkbox to indicate that there is availability at this property, or soon will be.

This is so completely unavailable properties can be left out of the listings entirely. Once that’s checked, a date field is presented, and the administrator can pick the availability date. If the date is today or before, that property is considered available now.

If the availability date is after today, it’s considered available soon. We’ll see how these work in the query later on. Now that we have the form set up, we can work on our query. First, let’s grab the paged variable and then reset the query so we can use it however we want.

We want to make sure to capture the paged variable before the reset, otherwise it just won’t be there!

$paged = ( get_query_var('paged') ? get_query_var('paged') : 1 ); $wp_query = null; $wp_query = new WP_Query();

Now we can set up base arguments for our query. These arguments are used for the initial state of the properties page, as well as the base for the filtered searches.

// BASE ARGS $args = array( 'post_type' => 'property', 'orderby' => 'meta_value_num', 'order' => 'ASC', 'meta_key' => 'availability_date', 'meta_compare' => 'EXISTS', 'meta_query' => array( array( 'key' => 'available_now__soon', 'value' => true, 'compare' => 'EXISTS', ), ), 'paged' => $paged );

We’re using the first meta_key and meta_compare arguments to make sure that the availability date field actually is present. We can then set orderby to meta_value_num to order the properties by their availability date. Then we use a meta query to further ascertain that the available now or soon flag is set to true.

A property could have once had an availability date set, but then had their availability turned off. In this case, the availability date field would still evaluate as existing, so we need this double check.

Technically, we don’t need a checkbox at all to toggle availability. Instead, we could have instructed the site administrators to leave the date field blank for unavailable. But this is a less intuitive interface for them, so we’ve included the checkbox for added usability, even if it makes our query slightly more complicated.

Now, let’s check if anything has been searched, or if we can just go along our merry way. We’re going to need to check whether each parameter has been toggled more than once in the following code, so let’s save the answers in variables before we start our checks. We want to check:

if the array key exists in GET for this parameter
if we’re expecting the values to be an array (all the radio inputs in our form), verify that it is an array and
if it is an array, that there is at least one value present in the array

If all the appropriate criteria are met, the variable is set to true.

// ARE WE FILTERED? $property = (array_key_exists('property-type', $_GET) && is_array($_GET['property-type']) && count($_GET['property-type'])); $sqft = (array_key_exists('sqft', $_GET) && is_array($_GET['sqft']) && count($_GET['sqft'])); $availability = (array_key_exists('availability', $_GET)); $contract = (array_key_exists('contract-type', $_GET));

While we’re setting up variables, let’s set one up to help us keep track of whether or not any of the taxonomy-based filters have been toggled. This will help us check whether or not we need to add a tax query to WP Query later on.

// set up an array to hold our active taxonomy based filters $taxables = array();

Now that we have our variables set up, let’s open up a big if statement. We’re going to check if any of the filters have been toggled. All of our query modifications will happen inside this if statement.

You’ll notice that for availability and contract type, we not only check their existence, but if they’re set to all. all is the default, so it technically counts as untoggled.

if($property || $sqft || ($availability && $_GET['availability'] !== 'all') || ($contract && $_GET['contract-type'] !== 'all')) { }

If any one of the above criteria are met, we move forward. Before we get going with the heavy lifting, let’s refresh our memories about taxonomy queries. They generally look like this:

$args = array( 'tax_query' => array( 'relation' => 'AND', array( 'taxonomy' => 'movie_genre', 'field' => 'slug', 'terms' => array( 'action', 'comedy' ), ), array( 'taxonomy' => 'actor', 'field' => 'term_id', 'terms' => array( 103, 115, 206 ), ), ), ); $query = new WP_Query( $args );

We now know that a tax query is an array, with each taxonomy filter its own array within that, and that we should set the relation to AND in case we have more than one. Let’s set up a variable to hold our tax query parameters:

$tax_query = array('relation' => 'AND');

Now let’s get property and square footage going. They work exactly the same way except we’ll pass different values to them. We want to iterate through all the values passed in GET for that parameter and add them to a $terms array.

We can then compose an array inside $tax_query with the taxonomy and the values needed. We’re also adding our check value ($property or $sqft) to the $taxables array.

 // IF PROPERTY TYPE FILTER IS SELECTED if($property) { $taxables[] = $property; $terms = null; foreach($_GET['property-type'] as $property_type) { $terms[] = $property_type; } $tax_query[] = array( 'taxonomy' => 'property_type', 'field' => 'term_id', 'terms' => $terms ); } // IF SQUARE FOOTAGE FILTER IS SELECTED if($sqft) { $taxables[] = $sqft; $terms = null; foreach($_GET['sqft'] as $sqft) { $terms[] = $sqft; } $tax_query[] = array( 'taxonomy' => 'square_footage', 'field' => 'term_id', 'terms' => $terms ); }

Contract type works similarly, except we also need to check that the value isn’t all before proceeding, and we don’t need to iterate through terms since availability isn’t an array.

// IF CONTRACT TYPE FILTER IS SELECTED if($contract && $_GET['contract-type'] !== 'all') { $taxables[] = $contract; $tax_query[] = array( 'taxonomy' => 'contract_type', 'field' => 'term_id', 'terms' => $_GET['contract-type'] ); }

Now that we’ve run through all the possible taxonomy-based filters, we can use that $taxables array. We had been adding items to it if a given taxonomy parameter had values toggled within it. Now we can use that to check if we need to add our $tax_query to the our query arguments.

// IF ANY TAXONOMY FILTERS ARE SELECTED, WE ADD THE TAX ARGS TO OUR QUERY if(count($taxables)) { $args['tax_query'] = $tax_query; }

All that’s left is availability. For availability, we’re going to be adding to the existing meta query. We want to pass today’s value and the availablity_date key. We have to make sure to set the type to date or our comparisons won’t work properly. The comparison will vary between less than or equal to for now or greater than for soon.

// IF AVAILABILITY FILTER IS SELECTED if($availability && $_GET['availability'] !== 'all') { $meta_query = array( 'key' => 'availability_date', 'value' => date('Y-m-d', current_time('timestamp')), 'type' => 'date' ); if($_GET['availability'] === 'now') { $meta_query['compare'] = '<='; } else { $meta_query['compare'] = '>'; } $args['meta_query'][] = $meta_query; }

And that’s it for our if statement. Let’s take a look at it all together:

if($property || $sqft || ($availability && $_GET['availability'] !== 'all') || ($contract && $_GET['contract-type'] !== 'all')) { $tax_query = array('relation' => 'AND'); // IF PROPERTY TYPE FILTER IS SELECTED if($property) { $taxables[] = $property; $terms = null; foreach($_GET['property-type'] as $property_type) { $terms[] = $property_type; } $tax_query[] = array( 'taxonomy' => 'property_type', 'field' => 'term_id', 'terms' => $terms ); } // IF SQUARE FOOTAGE FILTER IS SELECTED if($sqft) { $taxables[] = $sqft; $terms = null; foreach($_GET['sqft'] as $sqft) { $terms[] = $sqft; } $tax_query[] = array( 'taxonomy' => 'square_footage', 'field' => 'term_id', 'terms' => $terms ); } // IF CONTRACT TYPE FILTER IS SELECTED if($contract && $_GET['contract-type'] !== 'all') { $taxables[] = $contract; $tax_query[] = array( 'taxonomy' => 'contract_type', 'field' => 'term_id', 'terms' => $_GET['contract-type'] ); } // IF ANY TAXONOMY FILTERS ARE SELECTED, WE ADD THE TAX ARGS TO OUR QUERY if(count($taxables)) { $args['tax_query'] = $tax_query; } // IF AVAILABILITY FILTER IS SELECTED if($availability && $_GET['availability'] !== 'all') { $meta_query = array( 'key' => 'availability_date', 'value' => date('Y-m-d', current_time('timestamp')), 'type' => 'DATE' ); if($_GET['availability'] === 'now') { $meta_query['compare'] = '<='; } else { $meta_query['compare'] = '>'; } $args['meta_query'][] = $meta_query; } }

After that, all we need to do is add call a new query based on our arguments: