How to Add Amazon-Like Faceted Search to Your WordPress Site
If you’ve bought anything recently on Amazon or eBay, you’ve no doubt used faceted search. It’s a technique that allows users to narrow down what their searching for using “facets.”
For example, if you’re searching for a new solid state drive you might check options to specify the size you’re after, your price range, and whether shipping is available to your country.
According to design and development website A List Apart, faceted navigation is arguably the most significant search innovation of the past decade. For eCommerce websites, faceted search has become an essential feature, and one that users have come to expect.
While WordPress doesn’t offer faceted search out-of-the-box, FacetWP is a fantastic plugin that lets you add this feature to your site. In this post, I’ll run through some great examples of faceted search online and how to set it up on your own site.
Faceted Search and Navigation
Faceted search and faceted navigation are useful ways of enabling users to filter what they’re searching for by different criteria.
It’s an incredibly handy way of handling search options for large data sets, and you’ll see it in use on the majority of large e-commerce sites – Amazon and eBay being classic examples. It’s a slick way of enabling users to narrow down their selections quickly while still being able to search for very specific items.
“Facets” are essentially categories which objects can be grouped and filtered by in the context of search results or general display. This will usually involve accessing metadata fields under the hood, as in the RAM options highlighted on Amazon below.
The actual implementation of this in terms of UI can vary considerably – you can expect to see checkboxes, drop-down menus, range selectors and sliders all deployed on various sites. Another common option you’ll see is real time filtering of results in response to your actions – a nice touch designed to speed up your overall search.
As Creative Bloq points out in its excellent article on faceted navigation, a couple of key advantages come with this approach:
- The successive nature of faceted search matches the way people tend to naturally approach looking for something – i.e. gradually drilling down to the thing they’re actually after.
- It keeps people on sites longer as they they’ll naturally want to browse within filtered results for the purposes of, for example, product comparison.
Examples of Faceted Search Online
The e-commerce site of fashion giant Prada implements super-speedy, responsive, faceted navigation to help customers find exactly what they’re looking for in a hurry. Click on a facet and the page instantly rearranges itself to show you what’s available. It’s a great example of how faceted options can really excel in an e-commerce setting.
Zappos kicks things up a notch when it comes to faceted options. Browse anywhere on their site and you’ll see a huge range of category options displayed next to actual product listings, covering everything from brand, color and occasion through to highly specific choices such as heel height for boots.
As one of the world’s most successful online retailers, they’ve clearly identified the extra value faceted navigation brings to their customers and decided to go all-in on it.
Just as we saw with Prada’s implementation, any changes made in selection are reflected instantly on the screen to minimize hassle for the eager shopper looking to get right to their purchase.
What About WordPress’ Default Options?
As we all know, WordPress can be made to do pretty much anything you can think of with a little custom coding. Straight out of the box, though, support for faceted navigation or faceted search is pretty much non-existent.
The ability to categorize content is certainly there in the form of creative combinations of categories and tags. Custom fields can also be added to content if you are going down the coding route yourself. There isn’t really an easy combination of these options that gives you the power faceted functionality provides, though.
Options such as categories and tags are navigational devices, but things aren’t great when it comes to default search either. If you’re dealing with a decent amount of content you want users to be able to pull from quickly, you’re usually looking at improving search options via plugin or rolling your own.
FacetWP is a premium plugin that offers advanced filtering options for WordPress sites and true faceted search. Basic licenses cover you for three sites and a year of support and cost $79. A professional license covering unlimited sites is also available for $199.
The software also offers a range of add-ons which enable you to integrate with other search plugins such as SearchWP and Relevanssi, and add additional functionality such as filtering by color and alphabetical listing. Integration with the popular multilingual plugins WPML and Polylang is also available.
You can get a taste of the options available by visiting the demo pages where you’ll see all of the nine available facet types in action. The options at your disposal are checkboxes, dropdowns, hierarchy pickers, sliders, search bars (including autocomplete), date range pickers, number range pickers, and the all-new proximity facet type for geolocation. All of these are AJAX-powered so your users will enjoy instant updates reflecting their choices while they’re browsing.
As you’d expect from a premium plugin, FacetWP also offers solid documentation and a range of hooks for developers to tap into if they are looking to customize. Let’s move on now to actually using the plugin.
Getting Started With FacetWP
After you’ve purchased, installed and activated the plugin, you’ll see a new entry in your admin menu at Settings > FacetWP.
Once you’ve popped in there, select the Settings tab and input your license key in the appropriate box. All being well, you should receive a message saying “All done, thanks for activating!” after the plugin has successfully phoned home.
There are two key concepts to get your head around before we start using FacetWP:
- Facets: These are the UI elements themselves that will be used to sort through your data. You can add them via shortcodes or PHP to widgets and pages.
- Templates: These are the contexts within which the facets are used. You have full control over how the content elements will be displayed via templates.
To take a concrete example, if you had a music site, you would set up individual facets to cover different types of categories you’d like users to be able to search by – genre, artist, price and so on. This is where you control the data integration and decide what the UI options will be.
You’d then set up a music template page where results would be displayed. The template controls the initial selection of content, lets WordPress know that this is content that can be faceted, and enables you to control how items are displayed. In the case of our music listings, we might just decide to show an album cover thumbnail and some artist metadata to keep things simple.
Setting up Facets
When you browse to Settings > FacetWP > Facets, you’ll see that there is a demo facet already set up called Categories. Hover the mouse over the item and you’ll see the shortcode as pictured below. We’ll be making use of that shortly.
Once you pop inside the facet, things are nice and straightforward. You’ll see a label field and options for selecting the facet type (the nine options we mentioned earlier) and data source. Down below, there will be further settings available that vary according to which facet type you’ve opted for.
If we click into the Data Source field, you’ll see that there are a huge amount of options to pick from and that all custom fields are being picked up so you’re free to get as specific as you like here.
Once you’ve made your selections, click Save Changes and Re-index to trigger the magic behind the scenes that makes it all possible. If you’re dealing with a very content heavy site, re-indexing may take a minute or two but a handy progress bar is there to keep you updated.
In terms of adding facets into the system, that’s really all you need to do. A couple of clicks is really all you need in order to set up a new facet and connect it to the right data. Now let’s move on to actually displaying and using the facets.
Creating a Facet Template
You’re not going to be able to use facets without using a facet template – they’re the mechanism by which FacetWP recognises that there is content there to be filtered. In terms of using them, you have two options:
- CSS class method: If you’re integrating with existing search or archive pages, you have the option of simply adding the CSS class
facetwp-templateto a container element surrounding the Loop. That isn’t the road we’ll be going down but you can find more info on it at the FacetWP help pages.
- Shortcode method: With this option you use FacetWP’s powerful built-in Query Builder to take full control over the output of your content. This is the option we’ll be looking at.
When you navigate to Settings > FacetWP > Templates, you’ll see a demo template called Default is already set up. As with our previous facets example, hovering over the item will tell you what its shortcode is. The real action is inside, however.
You’re tackling two problems with your template: which data will be retrieved and how it will be displayed.
The Query Arguments field is based on WP_Query and controls which list of content will actually be retrieved. If you’re not 100% comfortable with constructing these types of queries off the top of your head, a handy Query Builder is also included.
As you can see, you’ve got a solid set of options for retrieving posts here and can add in checks for taxonomies and custom fields if required.
The Display Code part of the template screen enables you to control exactly how the returned results will be displayed. Using this effectively does assume that you have some experience with using templates and aren’t terrified at the thought of breaking out a little PHP. Being comfortable with using WP_Query will be to your advantage here also.
The basic principle is straightforward, though. If we look at the sample code from the default template below, you’ll see it simply outputs a linked title for each result.
Now let’s look at actually adding all of this to a site.
Adding Facets to Your Site
Actually getting the facet options into your site is pretty straightforward. We need to do two things:
- Add the facets themselves via shortcode to a widget.
- Add the template into a page via shortcode.
I’ll begin by popping the shortcode
[facetwp facet="categories"] into a text widget on my sidebar. I’ve then created a custom page called My Facets and added the template shortcode
[facetwp template="default"] to it as pictured below.
A quick visit to the page and I can see my faceted category search options displaying in the sidebar as checkboxes and am able to quickly flick between different views of content on the page itself.
It’s not a search setup that will be giving Amazon sleepless nights quite yet but it shows just how simple getting up and running can be. For a more complete overview of the type of options available to you, be sure to check out the FacetWP demo pages where you’ll see the individual facets in all their glory.
Adding faceted search and navigation into the mix is a no-brainer if you’re running a content heavy site or any kind of e-commerce site with more than small set of products. The option is proven to boost site stickiness and sales and will give your audience a substantially more intuitive way of getting at the best of your content.
Once you’ve understood its core concepts, FacetWP is nice and straightforward to set up while giving you an enormous amount of flexibility in terms of how you can best leverage its power. You’re really only limited by your imagination with this one.
I’d love to hear your thoughts on using faceted search and navigation elements on sites. Are you currently doing it or do you plan to? Let us know in the comments below.
WIN a Share of $5K
Subscribe to our blog this #hostingmonth for a chance to win one of 5 prizes of $1,000 WPMU Dev credit! Learn More.