Atlas Search: Facets

Grace Erixon Avatar

·

Atlas 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 Atlas Search and how to set it up on your headless WordPress site, get up to speed with our What is Atlas Search? blog post.

There is an exciting new feature in Atlas 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.

Example website screen with filtering search options

How Facets Work with Atlas Search

The Atlas Search team has developed WPGraphQL Filter Query, an open-source plugin that pairs with the Atlas 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 Atlas Search plugins from the previous What is Atlas 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.

Results from a faceted search query in GraphiQL IDE

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 Atlas 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 Atlas Search!