How to filter results by distance using Toolset and Floox Theme

   Dario

Announcements

June 7, 2018
2

One of the most important features for business and listing websites is the ability to display maps. Toolset Maps can help customers find you, tell them where they can purchase certain items or the location of houses to buy – among many other advantages.

We know that Toolset makes it easy to display maps on the front-end. With Floox Theme it’s now not only easy but it looks great as well.

 

Floox and Toolset
An example of a custom search with results filtered by distance using Toolset and Floox

Floox is an ideal theme if you are looking to build company, corporate agency or business websites. It is packed with important features which you will need in order to ensure that your WordPress website becomes an asset for you and your company. Now that it is custom post types ready thanks to Toolset, Floox becomes an even more powerful tool for your website.

We’ll take a look at exactly how combining Toolset and Floox will give you a website that will keep your customers coming back by seeing how easy it is to create custom searches for your custom post types which you can filter by distance.

First, however, let’s see exactly why Floox is such a great option for your website.

Why Floox is a great theme for your business website

Floox will help you build the website your business deserves thanks to its flexibility and the sheer number of features it offers. It is built by Themeum which is responsible for some of the most robust and popular WordPress themes including Melody, NewsKit and Backer. With a history of producing great options, you can be sure Floox is an effective choice for businesses.

Before we explore its features, one of the most important functions you require from a theme is an aesthetic one. Your website has to look good. Floox comes with five different home variations and two blog variations, offering you the freedom to display your products and services how you wish.

 

Here is how your website could look if you use Floox

 

As well as looking great, Floox offers other elements which make it easier than ever to build and run your company website. Here are a few other features:

 

  • You can use the WP Mega Menu with Floox which helps you create menus which will make it easier than ever for your clients to navigate through your website
  • Its OneClick Demo Import function allows you to import a ready-made Floox website and make slight adjustments to fit your requirements
  • Floox is SEO optimized ensuring your website will be seen by more customers than ever before through organic search
  • A number of other important plugins for businesses are also integrated with Floox such as WPML, and Contact Form 7

Our demo estate agent website which combines Toolset’s functionality with Floox’s design

 

In fact, let’s explore exactly how beneficial being able to implement Google Maps on your website can be by filtering your custom searches by distance.

How customers will benefit by being able to filter results by distance

Your clients will benefit hugely from being able to filter their custom searches by distance because they will be able to instantly discover exactly which results are closest to them. We can add this function to our custom search using the Toolset Maps 1.4 update.

With the filter by distance feature, users will be able to use front-end controls to determine how far from a given location they want to display their results. For example, if you are looking to buy a property in Los Angeles you might elect to only see places which are within 10km of the city.

Furthermore, you can even choose to search for results which are a certain distance from your current location. Indeed, Toolset’s filter results by distance option gives you complete flexibility.

We have adjusted our search so that only properties within a 10km radius of Los Angeles appear:

 

We have adjusted our search so that only properties within a 10km radius of Los Angeles appear

 

Rather than having to manually select which properties will suit them, they can automatically see there is one available which matches their requirements.

The four ways you can filter results by distance

Toolset offers four different ways to filter your results by distance. Let’s take a look at how each one works and exactly when you might use it:

  • Distance center is set using a fixed location: the location cannot be changed meaning the user can only adjust the distance from that point – showing those results. This is a useful option if you are an airport website and only need to show results around the airport.
  • Distance center is set using URL parameter: the user can provide their own location and find results within a radius of it. In our example above, we searched for any houses within a 10km radius of Los Angeles
  • Distance center is set using shortcode attribute: in this case, you can create the listing but leave the location of the filter free, meaning it is only fixed when you insert that listing. To illustrate, you can add this custom search view on multiple occasions with a different location but it will always be 10km radius from that point
  • Distance center is set from user location: the custom search will filter results based on where you are at that moment. Think of when you use Google search to find restaurants near you.

Let’s use our estate agent demo site and filter our custom search results by distance. Given that we will want each user to be able to set their own location, we will use the second option and set the distance center by URL parameter.

Filter results by distance for our estate agent demo site

Note: if you are unsure how to add a map to your website then check out our guide to displaying WordPress content on Google Maps. We will create a custom search which will allow us to filter houses for sale or for rent by distance.

1.Turn on the Query Filter in your View

We will head to the View for our map by going to Toolset -> Views and selecting the one you want add your filters to.

Next, we need to ensure that the Query Filter is enabled. We can do this by clicking on Screen Options and checking the box.

Select the Query Filter option to enable you to filter your results by distance

2. Set your filters

We can now edit the Query Filter to stipulate exactly how we will filter the results. As mentioned, we will use the Distance center is set using URL parameter and we will filter the radius to 5km to make it the default distance whenever a user loads it. We have also added the “property-location” as the Field to compare to.

We will also add a Taxonomy filter which will allow users to select whether they want to filter their results by whether or not the property is available for rent or for sale.

1.We use the Distance filter to adjust exactly how we filter the results based on how far they are from a certain location. 2. The Taxonomy filter determines the listing status of each property

3. Check your template on the back-end

Here is how our newly-adjusted custom search now looks on the back-end after adding our filters.

This is how our custom search looks on the back-end now that we have added the filter results by distance option

4. Test our new custom search

We can now see how our custom search looks on the front-end when combined with our Floox theme.

If we search for houses for sale or rent within 1000km of San Francisco we can check what shows up on the map.

 

Our custom search has now been filtered to show all houses within 1000km of San Francisco. We can use the map to see exactly where they are

 

Using Toolset with Floox gives you the best of both worlds. The ability to create advanced features with Toolset combined with Floox’s great-looking theme and functionalities which will significantly enhance your business. Download Floox and Toolset to create a website which will make customers view your business exactly how you see it.

 

 

 

 

Comments 2 Responses

    • Hello! Unfortunately, this is not available on an archive page yet. Maybe in the future we’ll have more, but for now, distance filter works only on posts, and only in page views. I hope this helps.