WordPress Multi-Parameter Search

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.

Screen Shot 2015-09-28 at 6.58.55 AM

 

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:

  1. if the array key exists in GET for this parameter
  2. if we’re expecting the values to be an array (all the radio inputs in our form), verify that it is an array and
  3. 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:

$wp_query->query($args);

And that’s it! It even works with that mysterious devil, pagination.

Be sure to check out the live search on Lichter Realty.

Posted By
Tiffany Stoik

New Business: Bright Bright Great Starts New Creative Partnership With Chicago Tabernacle

Bright Bright Great is delighted to announce a new creative partnership with our neighbors at Chicago Tabernacle.

Looking to begin the next phase of their web presence, Chicago Tabernacle engaged BBG to run a week-long site audit and strategy session at the end of 2015. Through that project, BBG was able to identify pain points for Chicago Tabernacle’s current site and to provide a fully thought-out scope of work to accomplish their goals for the next project.

Chicago Tabernacle Congregation

Now, BBG is thrilled to begin work on bringing our findings to life in a new art direction and website for Chicago Tabernacle. Since 2002, Chicago Tabernacle has sought to support their congregants with an emphasis on prayer and serving others into greatness, often in artistic in creative ways, including their annual Kids’ Week of Adventure of Story of Love theatrical events.

Chicago Tabernacle Sanctuary Chicago Tabernacle Signage Chicago Tabernacle Choir

Posted By
Jason Schwartz

New Business: Bright Bright Great Begins New Creative Partnership With Triad Process Equipment

Bright Bright Great is excited to begin work in a new creative partnership with Triad Process Equipment.

Established in 1990, Triad Process Equipment manufactures high-quality ball valves, butterfly valves, and control valves for all types of process control applications.

Triad Process Equipment serves most industries: oil and gas, automotive, chemical, water-treatment, and power industries, as well as industries focused on more sanitary production conditions, such as food, beverage, cosmetic, and pharmaceutical industries.

As part of this creative partnership, BBG will be updating Triad’s logo, photography, and website in addition to hosting Triad’s new site. We can’t wait to make something amazing!

Posted By
Jason Schwartz

New Business: Bright Bright Great Announces New Creative Partnership with Amanecer Yacht Charters

Bright Bright Great is proud to begin work on a new creative partnership with Amanecer Yacht Charters the premier private yacht charter in Puerto Vallarta, Mexico.

Formerly Mondrian Yacht Charters, BBG will be working with Amanecer’s owners to provide strategy and design updates for the new brand, and to create a new, visually-engaging and luxurious experience for the website as well as the on-board experience on the yacht and providing hosting support for the new website.

Amanecer yacht

Amanecer Yacht Charters is the premier private yacht charter in Puerto Vallarta, Mexico in addition to a handful of other ports and we couldn’t be more thrilled to begin work on this project (and to live vicariously through the photography during the cold Chicago winter).

amanecer sailing

Amanecer yacht 2

Posted By
Jason Schwartz