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.
Headless WordPress sites that use the native REST API or WPGraphQL to perform searches without any other performance optimizations suffer from several issues. These include:
- Unexpected search results. The default search may have trouble locating what the user was looking for, or return too many irrelevant results.
- Inability to search more than one word at a time due to lack of support for operators (AND, OR, or NOT).
- Lack of support for custom data. For instance, an additional plugin or custom code is required to add data to search results from other tools, such as Advanced Custom Fields (ACF) or Atlas Content Modeler (ACM).
Introducing Atlas Search
Atlas Search (currently in beta) is an enhanced search solution for WordPress that solves these problems. It takes over the default WordPress search functionality and aims to improve the search relevancy, support advanced search query operators, and increase supported data types within the content data search. The key benefit to Atlas Search is that it returns more accurate search results.
Atlas Search includes both a SaaS ‘Atlas Search server’ and a per-client WordPress ‘Atlas Search’ plugin. It enables a variety of configuration options and is compatible with a variety of popular plugins such as Custom Post Type UI, Advanced Custom Fields (ACF), and Atlas Content Modeler (ACM).
Atlas Search can be used with or without Atlas hosting; you’ll benefit from more accurate search results either way.
Setting Up Atlas Search
Getting an Atlas Search Account
To get started with Atlas Search, you’ll first need to fill out this Atlas Search enrollment form. Shortly after submitting this form, you will receive an email containing your own personal provider backend URL and access token. Do not share this email or your Atlas Search credentials!
Create a WordPress Instance in Local
Local is WP Engine’s local development tool, and it makes it very easy to work with WordPress locally. You can install the app and create a new WordPress site in a few steps.
Click the + button at the bottom left corner of the window. Select Create A New Site then click Continue.
Choose a name for your new site, and then click Continue.
Select Preferred to set the environment to the default versions.
Lastly, specify values for the WordPress Username and WordPress Password, and be sure to remember these values. Once that is complete, click Add Site.
Depending on your permissions, Local may ask for permission to make modifications to your system. After your site has been successfully installed, you will see it in the Local dashboard.
To access the WP Admin panel of your new site, click WP Admin in the site details pane. You will need to authenticate with the username and password you created in the previous step.
Install and Configure Plugins
In the WordPress Admin dashboard, we need to add two plugins: WPGraphQL and Atlas Search.
From the Plugins > Add new menu, search for wpgraphql in the WordPress plugin repository. Install and activate the plugin, which will add a GraphQL tab to your WP Admin sidebar.
Then, from the same Add new menu, search for Atlas Search in the WordPress plugin repository. Install and activate the plugin, which will add a Atlas Search tab to your WP Admin sidebar.
Navigate into the Settings section within the Atlas Search tab. Enter the values that you received in the initial Atlas Search enrollment email. Make sure to click Save Settings.
Finally, navigate to the Sync section within the Atlas Search tab. We need to run an initial content sync, which will send all pre-existing content on the WordPress site to Atlas Search for indexing. Click Synchronize Now and await the Sync Completed Successfully status message.
After this initial sync, the Atlas Search plugin will continue to auto-sync content in real-time whenever content additions or modifications occur on WordPress.
Build a Search Query
With Atlas Search installed, we can now start looking at the query! To start with, a basic query that would return all of the posts in a WordPress backend would look like this:
query MyQuery {
posts {
nodes {
id
status
title
}
}
}To limit the posts returned to only the ones that match a certain search term, we can specify the search term as an argument, like this: where: {search: "hello"}. The completed search query is below.
query MyQuery {
posts(where: {search: "hello"}) {
nodes {
id
status
title
}
}
}Using the GraphiQL IDE in the WordPress admin, we can paste in the search query we built and execute it to see the posts that are returned, like this:
Search Config
Fuzziness
Fuzziness employs a one-letter-per-word tolerance (“distance”) in the search terms. If Fuzziness is not enabled, then Atlas Search will attempt to search for a match to every word in a search query exactly. You can specify the distance setting for the Fuzziness to either 1 or 2 on the slider, which determines how many letters can be off in each word. For example, with Fuzziness enabled and distance set to 1, the search term ‘hxllo’ would still return results containing ‘hello.’
Prioritizing Models and Fields
The terms you search for can appear in different locations throughout the content you are searching through. In the example query above, the word ‘hello’ is in the title of some posts and only in the post content of others.
You can limit the searchable data fields using the Searchable checkbox. If you only wanted to return posts that contained the keyword in the title, you could uncheck all of the other boxes to limit the query.
You can also assign different weights to the searchable data fields using Weight . If you give title a greater weight than content, then the results containing the keyword in the title will appear before the results containing the keyword only in the content.
Make any adjustments to the search you want and click Save Config.
Atlas Search Demo
For an example of a very simple one-page headless WordPress application that dynamically displays the results of a search query, check out this CodeSandbox project. You will need to swap out the uri defined in the /lib/apollo.js file with the GraphQL endpoint for your own WordPress site that has Atlas Search installed and configured according to the steps above.
Conclusion
Hopefully, this post has given you a good sense of the benefits of Atlas Search and how to implement it on your site! Our team at WP Engine plans to add additional features to Atlas Search, so stay tuned!