WP Engine Smart Search is an enhanced search solution for WordPress that improves search relevancy, supports advanced search query operators, and increases supported data types within the content data search. If you need an overview of WP Engine Smart Search and how to set it up on your headless WordPress site, get up to speed with our What is WP Engine Smart Search? blog post.
There is an exciting new feature in WP Engine Smart Search: facets!
About Facets
Facets are a type of search filter that is used to help website visitors narrow down their search results quickly. They change depending on the context of the search query. This functionality is most commonly seen on eCommerce sites – the website visitor performs a search, views all of the search results, and then has the option to refine these results further based on selecting different attributes.
How Facets Work with WP Engine Smart Search
The WP Engine Smart Search team has developed WPGraphQL Filter Query, an open-source plugin that pairs with the WP Engine Smart Search plugin to provide faceted search through the WPGraphQL API for headless WordPress.
The plugin currently supports four root filter query arguments:
- Two taxonomies: ‘Tag’ & ‘Category’
- Two relational operators: ‘or’ & ‘and’
The relational operators accept an array of root filter query objects. They cannot appear as siblings, so use one or neither per nested object. Nested filter query objects can be recursively nested up to 10 times. If no relation is declared, then ‘and’ is implied.
Setting up Faceted Search
To add the WPGraphQL Filter Query plugin, download the ZIP file from the GitHub repo, navigate to the Plugins tab in the WordPress admin sidebar, and upload the ZIP file as a plugin. If you do not already have the WPGraphQL and WP Engine Smart Search plugins from the previous What is WP Engine Smart Search? post, add, and enable those now.
Then, in the GraphiQL IDE, you can build out the query you want to run. You can filter the search by passing in either category names or tag names. Adding filters by category and tag would look like this:
query postFilterByCategoryAndTag {
posts(
filter: {
category: { name: { in: ["<em>CATEGORY_NAME</em>"] } },
and: [
{ tag: { name: { eq: "<em>TAG_ONE</em>"} } },
{ tag: { name: { eq: "<em>TAG_TWO</em>"} } },
]
}
) {
nodes {
id
status
title
}
}
}
Code language: HTML, XML (xml)In this example query, I searched for posts that have the category category two and the tag of physical activity. WPGraphQL returned the only post that matched those two qualifications in my database.
Headless Faceted Search Example
You do have to build your own front-end facets. For a full example of how faceted search would function in an eCommerce site, Richard McCormack built out this example faceted WP Engine Smart Search site.
Conclusion
Accurate search results are a key aspect of any website with search functionality. It ensures your site visitors can find what they need efficiently, which makes for a good user experience. Hopefully, this post has shown you how the addition of faceted search continues to level up the quality of WP Engine Smart Search!
