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 and traditional 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).
Introducing WP Engine Smart Search
WP Engine Smart Search is an enhanced search solution for WordPress that solves these problems. It takes over the default WordPress search functionality and aims to improve search relevancy, support advanced search query operators, and add support for advanced WordPress data types. The key benefit of WP Engine Smart Search is that it returns more accurate search results.
WP Engine Smart Search Search includes both a SaaS ‘WP Engine Smart Search server’ and a per-client WordPress ‘WP Engine Smart Search’ plugin. It enables various configuration options and is compatible with various popular plugins such as Custom Post Type UI and Advanced Custom Fields (ACF).
WP Engine Smart Search comes as an Add-on for WP Engine customers with a Premium or Atlas plan.
Setting Up WP Engine Smart Search
Getting an WP Engine Smart Search License
To get a WP Engine Smart Search license, you can either select WP Engine Smart Search as an Add-on when signing up for your WP Engine hosting plan or you can purchase it through the Add-ons page of your existing plan. You are granted 3 licenses per site when you sign up.
For more information on purchasing WP Engine Smart Search, check out the WP Engine Smart Search documentation.
Applying a WP Engine Smart Search License
After you have purchased WP Engine Smart Search as an Add-on, you will see it available in the WP Engine dashboard on the “Add-ons” page under the “My Add-ons” tab.
Click “Manage” and select which environments you would like to apply it towards.
After confirmation, you will be navigated to the “WP Engine Smart Search” page where you can see all of the environments that are using WP Engine Smart Search.
For more information on applying an WP Engine Smart Search license, check out the WP Engine Smart Search documentation.
Installing the WP Engine Smart Search Plugin
When you purchase and apply an WP Engine Smart Search license to one of your environments, the plugin will be automatically installed on the site’s WordPress backend.
Content Sync
We need to run an initial content sync, which will send all pre-existing content on the WordPress site to WP Engine Smart Search for indexing.
Navigate to the WordPress admin dashboard and then to the “Sync” page within “WP Engine Smart Search.” Click the Synchronize Now button and wait for the “Sync Completed Successfully” status message.
After this initial sync, the WP Engine Smart Search plugin will continue to auto-sync content in real-time whenever content additions or modifications occur on WordPress.
Using WP Engine Smart Search
Prerequisites
WP Engine Smart Search requires the WPGraphQL plugin. To enable WP Engine Smart Search debugging information for WPGraphQL queries, navigate to the WPGraphQL settings page and check the setting Enable GraphQL Debug Mode.
Build a Search Query
With WP Engine Smart Search installed, we can now start looking at how to use it in the search query! WP Engine Smart Search has taken over the default WordPress search functionality.
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
}
}
}
Code language: JavaScript (javascript)The WPGraphQL plugin is a good place to test search queries. WPGraphQL provides a ‘GraphiQL IDE’ in the WordPress dashboard where you can interact with the WPGraphQL Schema in the browser. Using the GraphiQL IDE, we can paste in the search query we built and execute it to see the posts that are returned, like this:
Querying with WP Engine Smart Search
You can use WP Engine Smart Search to query for posts and pages, custom post types, and ACF types. WP Engine Smart Search supports the query operators AND, OR, and NOT. The WP Engine Smart Search documentation contains examples of queries utilizing each of these cases.
Search Config
To adjust any of these specific configurations to WP Engine Smart Search, navigate to the ‘Search Config’ tab of WP Engine Smart Search. The Search Config page shows options for changing your search method along with a list of models which is populated from your standard WordPress post types and custom post types.
Stemming or Fuzziness
Stemming is the default search method of WP Engine Smart Search. It is the process of reducing a word to its root form or base word. For example, the words ‘running’ and ‘runs’ would be reduced to run. Using stemming can increase search relevancy as it will search for both exact matches and matches on stemmed words.
Fuzziness employs a letter-per-word tolerance (“distance”) in the search terms to handle typos in the search. 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.
Saving Configuration Changes
Remember to press the “Save” button to persist any edits to the search configuration!
WP Engine Smart 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 WP Engine Smart Search installed and configured according to the steps above.
Conclusion
Hopefully, this post has given you a good sense of the benefits of WP Engine Smart Search and how to implement it on your site! For more information about WP Engine Smart Search, check out the WP Engine Smart Search documentation or check it out on the Add-ons page of your WP Engine hosting portal.
