{"id":31394,"date":"2024-01-04T15:30:31","date_gmt":"2024-01-04T21:30:31","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=31394"},"modified":"2025-12-10T17:41:24","modified_gmt":"2025-12-10T23:41:24","slug":"building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/","title":{"rendered":"Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress"},"content":{"rendered":"\n<p>This tutorial will teach you how to build search functionality into your headless WordPress site using <a href=\"https:\/\/wpengine.com\/smart-search\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Engine Smart Search AI<\/a>, <a href=\"https:\/\/faustjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Faust.js<\/a>, and <a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Advanced Custom Fields<\/a>. It assumes a basic understanding of JavaScript, React fundamentals, GraphQL fundamentals, and WordPress.<\/p>\n\n\n\n<p>By the end of this tutorial, you will be able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Configure a WP Engine Smart Search AI license<\/li>\n\n\n\n<li>Create custom post types and fields using Advanced Custom Fields<\/li>\n\n\n\n<li>Run test queries to get ACF data using WP Engine Smart Search AI in the GraphiQL IDE<\/li>\n\n\n\n<li>Use Faust.js and Apollo Client to fetch ACF data<\/li>\n\n\n\n<li>Build out a search page in our Faust.js app<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-54551700 wp-block-group-is-layout-constrained\" style=\"border-radius:8px;margin-bottom:30px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:10px;padding-left:var(--wp--preset--spacing--40)\">\n<p class=\"has-large-font-size\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul style=\"margin-top:12px;margin-right:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--30)\" class=\"wp-block-list\">\n<li><a href=\"#about-wp-engine-smart-search\">About WP Engine Smart Search AI<\/a><\/li>\n\n\n\n<li><a href=\"#requirements\">Requirements<\/a><\/li>\n\n\n\n<li><a href=\"#enable-wp-engine-smart-search-license\">Enable the WP Engine Smart Search AI License<\/a><\/li>\n\n\n\n<li><a href=\"#set-up-faust-js-app\">Set Up a Faust.js App<\/a><\/li>\n\n\n\n<li><a href=\"#set-up-wp-engine-smart-search\">Set Up WP Engine Smart Search<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#how-wp-engine-smart-search-works\">How WP Engine Smart Search AI Works<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#finish-setup-of-headless-plugins\">Finish Setup of Headless Plugins<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#wpgraphql-settings\">WPGraphQL Settings<\/a><\/li>\n\n\n\n<li><a href=\"#faust-js-settings\">Faust.js Settings<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#create-acf-data\">Create ACF Data<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#create-songs-in-acf\">Create Songs in ACF<\/a><\/li>\n\n\n\n<li><a href=\"#create-albums-in-acf\">Create Albums in ACF<\/a><\/li>\n\n\n\n<li><a href=\"#populate-with-data\">Populate with Data<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#configure-search\">Configure Search<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#stemming-vs-fuzziness\">Stemming vs. Fuzziness<\/a><\/li>\n\n\n\n<li><a href=\"#prioritize-content\">Prioritize Content<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#write-test-queries-using-graphiql-ide\">Write Test Queries Using GraphiQL IDE<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#build-a-search-query\">Build a Search Query<\/a><\/li>\n\n\n\n<li><a href=\"#build-a-search-query-with-the-not-operator\">Build a Search Query with the NOT Operator<\/a><\/li>\n\n\n\n<li><a href=\"#build-a-search-query-with-the-and-operator\">Build a Search Query with the AND Operator<\/a><\/li>\n\n\n\n<li><a href=\"#build-a-search-query-with-the-or-operator\">Build a Search Query with the OR Operator<\/a><\/li>\n\n\n\n<li><a href=\"#build-a-search-query-with-a-variable\">Build a Search Query with a Variable<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#build-the-faust-js-frontend\">Build the Faust.js Frontend<\/a><\/li>\n\n\n\n<li><a href=\"#done\">Done!<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"about-wp-engine-smart-search\">About WP Engine Smart Search AI<\/h1>\n\n\n\n<p>WP Engine Smart Search AI is a paid Add-on for WP Engine customers that improves search for both headless and traditional WordPress applications. It takes over the default WordPress search functionality and aims to improve search relevance, support advanced search query operators, and add support for advanced WordPress data types. The key benefit of WP Engine Smart Search AI is that it returns more accurate search results and even integrates with ACF (custom post types, taxonomies, post meta).<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"528\" data-id=\"31408\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1-1024x528.png\" alt=\"\" class=\"wp-image-31408\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1-1024x528.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1-300x155.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1-768x396.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1-1536x793.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1-2048x1057.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You can follow this tutorial without using WP Engine Smart Search AI; however, the ACF data may not return in your search results as expected.<\/p>\n\n\n\n<p>Read the <a href=\"https:\/\/wpengine.com\/support\/wp-engine-smart-search\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Engine Smart Search AI documentation<\/a> for information about how to configure a license.<\/p>\n\n\n\n<p>Read our <a href=\"https:\/\/wpengine.com\/builders\/what-is-wp-engine-smart-search\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u2018What is WP Engine Smart Search?\u2019 article<\/a> for more general information about the plugin.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"requirements\">Requirements<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Node and NPM<\/h2>\n\n\n\n<p>To get started, you must install both <a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node.js<\/a> and <a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\" target=\"_blank\" rel=\"noreferrer noopener\">npm<\/a>. If you aren\u2019t sure whether or not you have this software installed, you can run the following commands in your terminal:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>node -v\n<\/span><\/span><span class='shcb-loc'><span>npm -v\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>The terminal output should either tell you which versions you have installed or that it cannot find the commands <code>node<\/code> or <code>npm<\/code> to run them. Using <a href=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noreferrer noopener\">a tool like nvm (Node Version Manager)<\/a> to install and manage versions of Node.js on your machine can be helpful when working on multiple projects.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress Site and Plugins<\/h2>\n\n\n\n<p>You will also need to have a WordPress instance created in your <a href=\"https:\/\/my.wpengine.com\/sites\">WP Engine Portal<\/a>. Your site should have these plugins already installed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Advanced Custom Fields<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/faustjs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Faust.js<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.wpgraphql.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPGraphQL<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/wp-graphql\/wpgraphql-acf\/releases\/latest\" target=\"_blank\" rel=\"noreferrer noopener\">WPGraphQL for Advanced Custom Fields<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">WP Engine Smart Search AI<\/h2>\n\n\n\n<p>To use <a href=\"https:\/\/wpengine.com\/smart-search\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Engine Smart Search AI<\/a>, you must first purchase a license from WP Engine. Licenses are currently available for <a href=\"https:\/\/wpengine.com\/plans\/\">Premium<\/a> and <a href=\"https:\/\/wpengine.com\/headless-wordpress\/\">Headless<\/a> plans.<\/p>\n\n\n\n<p>To purchase a license for a Headless Platform plan, either select WP Engine Smart Search AI as an Add-on when signing up for a plan or purchase it through the Add-ons page of the existing plan.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"enable-wp-engine-smart-search-license\">Enable the WP Engine Smart Search AI License<\/h1>\n\n\n\n<p>We have a WordPress site in WP Engine\u2019s portal with the required plugins.<br>In the WP Engine User Portal, select the <strong>Add-ons<\/strong> tab in the left menu.<\/p>\n\n\n\n<p>We already have a WP Engine Smart Search AI license, so you can click <strong>Manage<\/strong> and then <strong>Select environments<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1768\" height=\"718\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-2.59.22\u202fPM.png\" alt=\"\" class=\"wp-image-32030\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-2.59.22\u202fPM.png 1768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-2.59.22\u202fPM-300x122.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-2.59.22\u202fPM-1024x416.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-2.59.22\u202fPM-768x312.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-2.59.22\u202fPM-1536x624.png 1536w\" sizes=\"auto, (max-width: 1768px) 100vw, 1768px\" \/><\/figure>\n\n\n\n<p>Find the site on which you want to add WP Engine Smart Search and select the checkbox next to its name. Click <strong>Add Environment<\/strong> and <strong>Confirm<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"215\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.02.35\u202fPM-1024x215.png\" alt=\"\" class=\"wp-image-32031\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.02.35\u202fPM-1024x215.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.02.35\u202fPM-300x63.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.02.35\u202fPM-768x162.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.02.35\u202fPM-1536x323.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.02.35\u202fPM-2048x431.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You should see a banner alerting you that the plugin is being installed and activated. It will take a minute for everything to get set up.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"set-up-faust-js-app\">Set Up a Faust.js App<\/h1>\n\n\n\n<p>While we wait for the WP Engine Smart Search license, we can set up the Faust.js application for the front-end of our site. Faust.js is a JavaScript framework designed to make building headless WordPress sites easy!<\/p>\n\n\n\n<p>To create a new Faust.js project, open up your terminal and run this command:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>npx create-next-app \\\n<\/span><\/span><span class='shcb-loc'><span>    -e https:<span class=\"hljs-comment\">\/\/github.com\/wpengine\/faustjs\/tree\/main \\<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    --example-path examples\/next\/faustwp-getting-started \\\n<\/span><\/span><span class='shcb-loc'><span>    --<span class=\"hljs-keyword\">use<\/span>-<span class=\"hljs-title\">npm<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>You can name the site whatever you want.<\/p>\n\n\n\n<p>Now, <code>cd<\/code> into your new app and copy the sample environment template:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-selector-tag\">cp<\/span> <span class=\"hljs-selector-class\">.env<\/span><span class=\"hljs-selector-class\">.local<\/span><span class=\"hljs-selector-class\">.sample<\/span> <span class=\"hljs-selector-class\">.env<\/span><span class=\"hljs-selector-class\">.local<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Finally, run the dev server:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>npm run dev\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>You can now visit <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000<\/a> to see your new project. Currently, the posts and pages you see come from our WordPress site at <a href=\"https:\/\/faustexample.wpengine.com\/\">https:\/\/faustexample.wpengine.com<\/a>. We will show you how to hook up your own WordPress site later.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"set-up-wp-engine-smart-search\">Set Up WP Engine Smart Search AI<\/h1>\n\n\n\n<p>Let\u2019s check if the WP Engine Smart Search AI license has finished applying to the new WordPress site! Reload the page, and the status symbol should show a green check mark. If you hover over this symbol, a pop-up should say, \u2018WP Engine Smart Search is ready to use.\u2019<\/p>\n\n\n\n<p>Open up the WordPress Admin page for your site. Click on the <strong>Plugins<\/strong> page to see that the WP Engine AI Toolkit plugin was installed for us.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"407\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.06.40\u202fPM-1024x407.png\" alt=\"\" class=\"wp-image-32033\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.06.40\u202fPM-1024x407.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.06.40\u202fPM-300x119.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.06.40\u202fPM-768x305.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.06.40\u202fPM-1536x610.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.06.40\u202fPM-2048x814.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then, go to the <strong>WP Engine AI Toolkit > Smart Search <\/strong>on the left menu. Under the <strong>Plugin Credentials<\/strong> tab, you can see that the URL and Access Token were already set up for you as well.<\/p>\n\n\n\n<p>Go to <strong>Index<\/strong> tab. Click the <strong>Index Now<\/strong> button to connect all the data on our WordPress site with the WP Smart Search AI backend.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.10.22\u202fPM-1024x525.png\" alt=\"\" class=\"wp-image-32034\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.10.22\u202fPM-1024x525.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.10.22\u202fPM-300x154.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.10.22\u202fPM-768x394.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.10.22\u202fPM-1536x788.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.10.22\u202fPM-2048x1050.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You generally only need to run this once &#8211; the sync is automatically updated whenever you add, edit, or delete content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-wp-engine-smart-search-works\">How WP Engine Smart Search AI Works<\/h2>\n\n\n\n<p>When a search request is made to WordPress, WP Engine Smart Search AI intercepts it. We load the search configuration for search, which includes determining the fields to include and weighting configuration from the Search Config page that we will show later. The search query is executed against our ElasticSearch back-end, and results are returned. WordPress hydrates the records for each result returned and returns the data to the original caller, such as HTML search or WPGraphQL.<\/p>\n\n\n\n<p>The index button iterates through all records for posts, pages, custom post types, etc. The plugin extracts data from each object type, including taxonomies and ACF fields. Each record is then indexed. Once completed, any changes to posts\/pages\/CPTs are incrementally indexed as content is created, edited, or deleted.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"finish-setup-of-headless-plugins\">Finish Setup of Headless Plugins<\/h1>\n\n\n\n<p>We just need to finish configuring a few other things before our site is ready to be built.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wpgraphql-settings\">WPGraphQL Settings<\/h2>\n\n\n\n<p>Navigate to the <strong>GraphQL &gt; Settings<\/strong> page. Select the checkboxes to <strong>Enable GraphQL Debug Mode<\/strong> and <strong>Enable Public Introspection<\/strong>. Click <strong>Save Changes<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-6-1024x553.png\" alt=\"\" class=\"wp-image-31414\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-6-1024x553.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-6-300x162.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-6-768x415.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-6-1536x829.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-6-2048x1106.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faust-js-settings\">Faust.js Settings<\/h2>\n\n\n\n<p>Navigate to the <strong>Settings &gt; Faust<\/strong> page. We need to set the Front-end site URL to our localhost where the Faust.js site is running.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"588\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-7-1-1024x588.png\" alt=\"\" class=\"wp-image-31415\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-7-1-1024x588.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-7-1-300x172.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-7-1-768x441.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-7-1-1536x881.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-7-1-2048x1175.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then, copy the Secret Key. Open your Faust.js app in a code editor and paste the Secret Key into the <code>.env.local<\/code> file where it says <code>FAUST_SECRET_KEY=YOUR_PLUGIN_SECRET<\/code> as the new value.<\/p>\n\n\n\n<p>Copy the URL of the WordPress site and paste that as the new value for <code>NEXT_PUBLIC_WORDPRESS_URL<\/code>.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"create-acf-data\">Create ACF Data<\/h1>\n\n\n\n<p>For this tutorial, we must create two Post Types &#8211; Albums and Songs &#8211; with corresponding field groups.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-songs-in-acf\">Create Songs in ACF<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Songs Post Type<\/h3>\n\n\n\n<p>Let\u2019s create our Songs post type first since it\u2019s a bit simpler. We\u2019ll go to <strong>ACF &gt; Post Types<\/strong> in the WordPress Admin sidebar, bringing us to this page where we can add a new post type.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"553\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-8-1-1024x553.png\" alt=\"\" class=\"wp-image-31417\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-8-1-1024x553.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-8-1-300x162.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-8-1-768x415.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-8-1-1536x830.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-8-1.png 2035w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click <strong>+ Add New<\/strong> and fill out the following fields:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set Plural Label to \u201cSongs\u201d<\/li>\n\n\n\n<li>Set Singular Label to \u201cSong\u201d<\/li>\n\n\n\n<li>Set Post Type Key to \u201csong\u201d<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"658\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-9-1024x658.png\" alt=\"\" class=\"wp-image-31418\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-9-1024x658.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-9-300x193.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-9-768x494.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-9-1536x987.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-9.png 2032w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The post type still needs to be shown in GraphQL so we can access the posts we create. Further down on this screen, click the slider for <strong>Advanced Configuration<\/strong>. Select the furthest right tab titled <strong>GraphQL<\/strong> and enable the <strong>Show in GraphQL<\/strong> slider. The autogenerated GraphQL Single Name and GraphQL Plural Name can be kept without editing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"646\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10-1024x646.png\" alt=\"\" class=\"wp-image-31419\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10-1024x646.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10-300x189.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10-768x484.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10-1536x968.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-10.png 2027w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Then click the <strong>Save Changes<\/strong> button to create the new post type.<\/p>\n\n\n\n<p>In the WordPress Admin sidebar, you\u2019ll see that a menu item has been added for our new Songs custom post type.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Songs Custom Fields<\/h3>\n\n\n\n<p>After saving, you will get a success banner on the top of the screen alerting you that the Songs post type was created. There are several options underneath this message. Click on the first option to <strong>Add fields to Songs<\/strong>.<\/p>\n\n\n\n<p>This will navigate you to the form to add a new field group and auto-fill the title of this field group as \u201cSong fields.\u201d We can create all the fields that should belong to a song within this form.<\/p>\n\n\n\n<p>Our only field in this example will be the song\u2019s lyrics. We\u2019ll set the field up like this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select Text Area for the Field Type<\/li>\n\n\n\n<li>Enter a Field Label of \u201cLyrics\u201d<\/li>\n\n\n\n<li>Stick with the auto-generated Field Name of \u201clyrics\u201d<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Scroll down past the Fields section to the Settings section. Ensure the Rules say, \u201cShow this field group if Post Type is equal to Song.\u201d<\/p>\n\n\n\n<p>Then, just below the Settings section (and the ACF PRO ad), in the GraphQL section, check the slider for <strong>Show in GraphQL<\/strong> to access this data in our frontend app.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"719\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-12-1024x719.png\" alt=\"\" class=\"wp-image-31420\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-12-1024x719.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-12-300x210.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-12-768x539.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-12-1536x1078.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-12.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click <strong>Save Changes<\/strong> at the top of the screen.<\/p>\n\n\n\n<p>That\u2019s it for our Songs custom post type and custom fields! Now, let\u2019s turn to the Albums post type.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-albums-in-acf\">Create Albums in ACF<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Albums Post Type<\/h3>\n\n\n\n<p>In the WordPress Admin sidebar, navigate again to <strong>ACF &gt; Post Types<\/strong> to add a new post type.<\/p>\n\n\n\n<p>Click <strong>+ Add New<\/strong> and fill out the following fields:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set Plural Label to \u201cAlbums\u201d<\/li>\n\n\n\n<li>Set Singular Label to \u201cAlbum\u201d<\/li>\n\n\n\n<li>Set Post Type Key to \u201calbum\u201d<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"718\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-13-1024x718.png\" alt=\"\" class=\"wp-image-31421\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-13-1024x718.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-13-300x210.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-13-768x539.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-13-1536x1077.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-13.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Just as we did with the Song post type, we need to enable the Album post type to be shown in GraphQL. Further down on this screen, click the slider for <strong>Advanced Configuration<\/strong>. Select the furthest right tab titled <strong>GraphQL<\/strong> and enable the <strong>Show in GraphQL<\/strong> slider. The autogenerated GraphQL Single Name and GraphQL Plural Name can be kept without editing.<\/p>\n\n\n\n<p>Then click the <strong>Save Changes<\/strong> button to create the new post type.<\/p>\n\n\n\n<p>In the WordPress Admin sidebar, you\u2019ll see that a menu item has been added for our new Albums custom post type.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Albums Custom Fields<\/h3>\n\n\n\n<p>After saving, you will get a success banner on the top of the screen alerting you that the Albums post type was created. Click on the link to <strong>Add fields to Albums<\/strong>.<\/p>\n\n\n\n<p>This will navigate you to the form to add a new field group and auto-fill the title of this field group as \u201cAlbum fields.\u201d We can create all the fields that should belong to an album within this form.<\/p>\n\n\n\n<p>We\u2019ll create the Cover and Track List fields similarly to how we did the lyrics field for Songs.<\/p>\n\n\n\n<p>The Cover field will look like this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select Image for the Field Type<\/li>\n\n\n\n<li>Enter a Field Label of \u201cCover\u201d<\/li>\n\n\n\n<li>Stick with the auto-generated Field Name of \u201ccover\u201d<\/li>\n\n\n\n<li>Select \u201cImage ID\u201d as the Return Format<\/li>\n\n\n\n<li>Select \u201cAll\u201d for the Library<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>The Track List field will look like this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select Relationship for the Field Type<\/li>\n\n\n\n<li>Enter a Field Label of \u201cTrack List\u201d<\/li>\n\n\n\n<li>Stick with the auto-generated Field Name of \u201ctrack_list\u201d<\/li>\n\n\n\n<li>Select \u201cSong\u201d for the Filter by Post Type<\/li>\n\n\n\n<li>Leave Filter by Taxonomy blank and leave all options for Filters checked<\/li>\n\n\n\n<li>Select \u201cPost Object\u201d for the Return Format<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Finally, scroll down past the Fields section to the Settings section. Ensure the Rules say, \u201cShow this field group if Post Type is equal to Album.\u201d<\/p>\n\n\n\n<p>Then, just below the Settings section (and the ACF PRO ad), in the GraphQL section, check the slider for <strong>Show in GraphQL<\/strong> to access this data in our frontend app.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"717\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-14-1024x717.png\" alt=\"\" class=\"wp-image-31422\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-14-1024x717.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-14-300x210.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-14-768x537.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-14-1536x1075.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-14.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Click <strong>Save Changes<\/strong> at the top of the screen.<\/p>\n\n\n\n<p>That\u2019s it for our Albums custom post type and custom fields!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"populate-with-data\">Populate with Data<\/h2>\n\n\n\n<p>You can populate the data with any of your favorite albums or songs. I entered all of Taylor Swift\u2019s songs and albums to show results in this demo project. Here is a completed song with the <code>title<\/code> and <code>lyrics<\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"645\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-15-1024x645.png\" alt=\"\" class=\"wp-image-31423\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-15-1024x645.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-15-300x189.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-15-768x484.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-15-1536x968.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-15-2048x1291.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here is a completed album with the <code>title<\/code>, <code>cover<\/code>, and <code>tracklist<\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-16-1024x604.png\" alt=\"\" class=\"wp-image-31424\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-16-1024x604.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-16-300x177.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-16-768x453.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-16-1536x906.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-16-2048x1208.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Enter enough content into your site that you can search by specific keywords to return different results.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"configure-search\">Configure Search<\/h1>\n\n\n\n<p>WP Engine Smart Search AI provides settings that give us a lot of control over how the search results are returned. Navigate to <strong>WP Engine AI Toolkit > Smart Search > Configuration (tab)<\/strong> to see our options.<\/p>\n\n\n\n<p>After adjusting the settings here, click the <strong>Save Config<\/strong> button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"stemming-vs-fuzziness\">Stemming vs. Fuzziness<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Stemming<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"352\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.16.03\u202fPM-1024x352.png\" alt=\"\" class=\"wp-image-32035\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.16.03\u202fPM-1024x352.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.16.03\u202fPM-300x103.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.16.03\u202fPM-768x264.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.16.03\u202fPM-1536x528.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.16.03\u202fPM-2048x704.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Stemming is the process of reducing a word to its root form or base word. This is the default search method of WP Engine Smart Search AI.<\/p>\n\n\n\n<p>Stemming Search increases search relevancy because the plugin searches for an exact match of what was typed into the search form and a match of the stemmed (or root) word.<\/p>\n\n\n\n<p>For example, if a user types in \u2018<em>running,\u2019<\/em> the results will include all content that contains the word \u2018<em>running\u2019<\/em> \u2013 the exact word they typed. But the results will ALSO include all content that contains the word \u2018<em>run\u2019<\/em> \u2013 the stemmed (or root) word.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fuzziness<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"307\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/15-fuzzy-search-1024x307.png\" alt=\"\" class=\"wp-image-31426\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/15-fuzzy-search-1024x307.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/15-fuzzy-search-300x90.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/15-fuzzy-search-768x230.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/15-fuzzy-search.png 1124w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The Fuzzy Search method, which can be toggled on or off, can be used as an alternative to stemming search.<\/p>\n\n\n\n<p>Fuzziness uses a letter-per-word tolerance (or \u201cdistance\u201d) in the search terms to handle typos in the search. Use the slider to specify the fuzzy distance (1 or 2), which determines how many letters can be wrong in each word users type into the search form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"307\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/16-fuzzy-distance-1024x307.png\" alt=\"\" class=\"wp-image-31427\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/16-fuzzy-distance-1024x307.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/16-fuzzy-distance-300x90.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/16-fuzzy-distance-768x230.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/16-fuzzy-distance.png 1124w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>For example, if the Fuzzy distance is 1, a search for <em>&#8216;Txylor\u2019s Vxrsion&#8217;<\/em> would return results for both <em>&#8216;Taylor\u2019s&#8217; <\/em>and<em> &#8216;Version.&#8217;<\/em> (Each misspelled word in this example contains only one wrong letter.)<\/p>\n\n\n\n<p>If the Fuzzy distance is set to the maximum distance of 2, a search for <em>&#8216;Txxlor\u2019s Vxxsion&#8217;<\/em> would return results for both <em>&#8216;Taylor\u2019s&#8217; <\/em>and<em> &#8216;Version.&#8217;<\/em> (Each misspelled word in this example contains only two wrong letters.)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prioritize-content\">Prioritize Content<\/h2>\n\n\n\n<p>By default, WP Engine Smart Search aI searches all supported WordPress data type objects (such as Posts, Pages, CPTs, ACFs, etc.) by all of their supported fields (such as string, number, boolean, and other WordPress Data Type objects).<\/p>\n\n\n\n<p>To limit what data can be searched or give more importance to specific fields to ensure highly relevant results, use the Searchable toggles and the Weight sliders.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"997\" height=\"1024\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.18.38\u202fPM-997x1024.png\" alt=\"\" class=\"wp-image-32036\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.18.38\u202fPM-997x1024.png 997w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.18.38\u202fPM-292x300.png 292w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.18.38\u202fPM-768x789.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.18.38\u202fPM-1495x1536.png 1495w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/01\/Screenshot-2025-12-10-at-3.18.38\u202fPM.png 1968w\" sizes=\"auto, (max-width: 997px) 100vw, 997px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Searchable Toggles<\/h3>\n\n\n\n<p>The searchable toggles allow for the inclusion\/exclusion of a field from the search. Toggle on the items to be searchable and toggle them off to make them not searchable.\u00a0<\/p>\n\n\n\n<p>For example, for search results to only include songs and albums, keep those checked and uncheck all of the Searchable boxes in the pages and posts lists.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Weight Sliders<\/h3>\n\n\n\n<p>The field-level weight sliders allow for some fields to be considered more relevant when determining the order of search results. Use the sliders to assign different weights to the searchable data fields. A field with a higher weight will be given a higher priority in the search results.&nbsp;<\/p>\n\n\n\n<p>For example, set Album and Song\u2019s <code>post_title<\/code> fields to 20 and their <code>lyrics<\/code> fields to 10 so the Albums and Songs containing the search term in the title will appear before the songs where only the lyrics include the search term.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"write-test-queries-using-graphiql-ide\">Write Test Queries Using GraphiQL IDE<\/h1>\n\n\n\n<p>At this point, our custom post types and custom fields have been created and populated with data, and we have chosen to add them to the GraphQL schema automatically. This means we are already set up to query for Songs or Albums data from our front end JavaScript app! Let\u2019s fire off a test query to try that out.<\/p>\n\n\n\n<p>Head over to the embedded GraphiQL IDE that the WPGraphQL plugin provides and use the Query Composer to build a query using songs or albums. First, let\u2019s just create a basic query to search for all songs and return the <code>databaseId<\/code>, <code>title<\/code>, and <code>lyrics<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>query SONGS_SEARCH_QUERY {\n<\/span><\/span><span class='shcb-loc'><span>  songs {\n<\/span><\/span><span class='shcb-loc'><span>    nodes {\n<\/span><\/span><span class='shcb-loc'><span>      databaseId\n<\/span><\/span><span class='shcb-loc'><span>      title\n<\/span><\/span><span class='shcb-loc'><span>      songFields {\n<\/span><\/span><span class='shcb-loc'><span>        lyrics\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Press the <strong>\u2018play\u2019<\/strong> button to run this query, and we should get these three pieces of information about every song in the database back.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-18-1024x590.png\" alt=\"\" class=\"wp-image-31429\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-18-1024x590.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-18-300x173.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-18-768x443.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-18-1536x885.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-18-2048x1181.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"build-a-search-query\">Build a Search Query<\/h2>\n\n\n\n<p>Now, let\u2019s make this a search query so that the results are limited. In your query, on line 2, add <code>(where: { search: \"running\" })<\/code> after <code>songs<\/code>. Your new query should look like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>query SONGS_SEARCH_QUERY {\n<\/span><\/span><span class='shcb-loc'><span>  songs(where: { <span class=\"hljs-attr\">search<\/span>: <span class=\"hljs-string\">\"running\"<\/span> }) {\n<\/span><\/span><span class='shcb-loc'><span>    nodes {\n<\/span><\/span><span class='shcb-loc'><span>      databaseId\n<\/span><\/span><span class='shcb-loc'><span>      title\n<\/span><\/span><span class='shcb-loc'><span>      songFields {\n<\/span><\/span><span class='shcb-loc'><span>        lyrics\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Run the query, and you should see only results that contain the keyword you searched for (like <em>&#8216;running&#8217;<\/em>) in the title or lyrics of the song.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"578\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-19-1024x578.png\" alt=\"\" class=\"wp-image-31430\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-19-1024x578.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-19-300x169.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-19-768x433.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-19-1536x867.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-19-2048x1155.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"build-a-search-query-with-the-not-operator\">Build a Search Query with the NOT Operator<\/h2>\n\n\n\n<p>A great feature of WP Engine Smart Search is that it allows search operators. After <em>\u2018running\u2019<\/em> in the search string, add <em>&#8216;NOT nothing.&#8217;<\/em> This NOT operator will return songs that contain the word <em>&#8216;running&#8217;<\/em> and do not contain the word <em>&#8216;nothing.&#8217;<\/em><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>query SONGS_SEARCH_QUERY {\n<\/span><\/span><span class='shcb-loc'><span>  songs(where: {<span class=\"hljs-attr\">search<\/span>: <span class=\"hljs-string\">\"running NOT nothing\"<\/span>}) {\n<\/span><\/span><span class='shcb-loc'><span>    nodes {\n<\/span><\/span><span class='shcb-loc'><span>      databaseId\n<\/span><\/span><span class='shcb-loc'><span>      title\n<\/span><\/span><span class='shcb-loc'><span>      songFields {\n<\/span><\/span><span class='shcb-loc'><span>        lyrics\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Hit the <strong>\u2018play\u2019<\/strong> button to view the results of that query. You can check that the second word, <em>&#8216;nothing,&#8217;<\/em> is not included in the search results.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"583\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-20-1024x583.png\" alt=\"\" class=\"wp-image-31431\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-20-1024x583.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-20-300x171.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-20-768x437.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-20-1536x875.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-20-2048x1167.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"build-a-search-query-with-the-and-operator\">Build a Search Query with the AND Operator<\/h2>\n\n\n\n<p>Then, we will do the opposite and use the AND operator. Change the search string to <em>&#8216;sweet AND nothing.&#8217;<\/em> This AND operator will only return results containing the words <em>&#8216;sweet&#8217;<\/em> and <em>&#8216;nothing.&#8217;<\/em><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>query SONGS_SEARCH_QUERY {\n<\/span><\/span><span class='shcb-loc'><span>  songs(where: {<span class=\"hljs-attr\">search<\/span>: <span class=\"hljs-string\">\"sweet AND nothing\"<\/span>}) {\n<\/span><\/span><span class='shcb-loc'><span>    nodes {\n<\/span><\/span><span class='shcb-loc'><span>      databaseId\n<\/span><\/span><span class='shcb-loc'><span>      title\n<\/span><\/span><span class='shcb-loc'><span>      songFields {\n<\/span><\/span><span class='shcb-loc'><span>        lyrics\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Hit the <strong>\u2018play\u2019<\/strong> button to view the results of that query. You can check that both words are contained in the results returned.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"586\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-21-1024x586.png\" alt=\"\" class=\"wp-image-31432\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-21-1024x586.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-21-300x172.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-21-768x439.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-21-1536x879.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-21-2048x1172.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"build-a-search-query-with-the-or-operator\">Build a Search Query with the OR Operator<\/h2>\n\n\n\n<p>The last operator is OR, which will return results that contain either of the two words. Change the search string to <em>&#8216;sweet OR lover.&#8217;<\/em><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>query SONGS_SEARCH_QUERY {\n<\/span><\/span><span class='shcb-loc'><span>  songs(where: {<span class=\"hljs-attr\">search<\/span>: <span class=\"hljs-string\">\"sweet OR lover\"<\/span>}) {\n<\/span><\/span><span class='shcb-loc'><span>    nodes {\n<\/span><\/span><span class='shcb-loc'><span>      databaseId\n<\/span><\/span><span class='shcb-loc'><span>      title\n<\/span><\/span><span class='shcb-loc'><span>      songFields {\n<\/span><\/span><span class='shcb-loc'><span>        lyrics\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Hit the <strong>\u2018play\u2019<\/strong> button to view the results of that query. You can check that either word is contained in the search results.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-22-1024x590.png\" alt=\"\" class=\"wp-image-31433\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-22-1024x590.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-22-300x173.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-22-768x442.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-22-1536x884.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-22-2048x1179.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"build-a-search-query-with-a-variable\">Build a Search Query with a Variable<\/h2>\n\n\n\n<p>Starting fresh on our query, we want to create a search that will return both albums and songs dynamically. The user of our Faust.js site should be able to enter whatever search term they want instead of being locked into one specific string.<\/p>\n\n\n\n<p>We can search through <code>contentNodes<\/code>, including all data rather than only songs or albums. We will return the <code>id<\/code> and <code>title<\/code> for both songs and albums that are returned. Then, replace the hard-coded search term from previous example queries with a dynamic variable called <code>searchTerm<\/code>.<\/p>\n\n\n\n<p>Our completed search query should look like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>query ACF_SEARCH_QUERY($searchTerm: String!) {\n<\/span><\/span><span class='shcb-loc'><span>  contentNodes(where: {search: $searchTerm}) {\n<\/span><\/span><span class='shcb-loc'><span>    nodes {\n<\/span><\/span><span class='shcb-loc'><span>      ... on Song {\n<\/span><\/span><span class='shcb-loc'><span>        id\n<\/span><\/span><span class='shcb-loc'><span>        title\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>      ... on Album {\n<\/span><\/span><span class='shcb-loc'><span>        id\n<\/span><\/span><span class='shcb-loc'><span>        title\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Add the variable to the query variables section underneath our query and set it to a search term.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-attr\">\"searchTerm\"<\/span>: <span class=\"hljs-string\">\"Taylor\u2019s AND Version\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Hit the <strong>\u2018play\u2019<\/strong> button to view the results of that query. You can change the value of the variable to get different results.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"587\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-23-1024x587.png\" alt=\"\" class=\"wp-image-31434\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-23-1024x587.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-23-300x172.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-23-768x440.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-23-1536x880.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-23-2048x1174.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We have the search query that we need to return results from our ACF fields dynamically!<\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"build-the-faust-js-frontend\">Build the Faust.js Front-end<\/h1>\n\n\n\n<p>Now, we can begin building the JavaScript application to display the search page and results!<\/p>\n\n\n\n<p>If the site is not already running locally, start it by running <code>npm run dev<\/code> in the terminal. Navigate to localhost in your browser to see it running. It should currently show you the boilerplate starter project for Faust.js.<\/p>\n\n\n\n<p>Open the Faust.js project in your code editor. First, we must create a new page to hold our search functionality. Inside the <code>pages<\/code> directory, create a new file called <code>search.js<\/code>.<\/p>\n\n\n\n<p>First, we must import <code>React<\/code> and <code>useState<\/code> from <code>\"react\"<\/code> and <code>useQuery<\/code> and <code>gql<\/code> from <code>\u201c@apollo\/client.\u201d<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> React, { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { useQuery, gql } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@apollo\/client\"<\/span>;\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Then, we will use the same query we created in the GraphiQL IDE to get the search results into our Faust.js project. Set the results equal to a <code>const<\/code> variable and wrap it in the <code>gql<\/code> tags like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> searchTaylorSwift = gql`\n<\/span><\/span><span class='shcb-loc'><span>  query ACF_SEARCH_QUERY($searchTerm: String!) {\n<\/span><\/span><span class='shcb-loc'><span>    contentNodes(where: {search: $searchTerm}) {\n<\/span><\/span><span class='shcb-loc'><span>      nodes {\n<\/span><\/span><span class='shcb-loc'><span>        ... on Song {\n<\/span><\/span><span class='shcb-loc'><span>          id\n<\/span><\/span><span class='shcb-loc'><span>          title\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>        ... on Album {\n<\/span><\/span><span class='shcb-loc'><span>          id\n<\/span><\/span><span class='shcb-loc'><span>          title\n<\/span><\/span><span class='shcb-loc'><span>        }\n<\/span><\/span><span class='shcb-loc'><span>      }\n<\/span><\/span><span class='shcb-loc'><span>    }\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>`;\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>After this query, we will open a new function called <code>SongFinder<\/code>. Inside this function, we need to handle the results from that query. We can use React\u2019s <code>useState<\/code> to set the search term value and use <code>useQuery<\/code> to run that search and collect the results. We will check if we get any results back. Then, we can create a function to handle the connection between the search form the user will enter requests into and the search results. Whenever someone submits the form, it will reset the value of the search term and run the new query.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> &#91;searchTerm, setSearchTerm] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> { loading, error, data } = useQuery(searchTaylorSwift, {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">variables<\/span>: { searchTerm }\n<\/span><\/span><span class='shcb-loc'><span>  });\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> results = data?.contentNodes?.nodes;\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> haveResults = <span class=\"hljs-built_in\">Boolean<\/span>(results?.length);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handleSearch<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>    event.preventDefault();\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">const<\/span> values = <span class=\"hljs-built_in\">Object<\/span>.fromEntries(<span class=\"hljs-keyword\">new<\/span> FormData(event.target));\n<\/span><\/span><span class='shcb-loc'><span>    setSearchTerm(values&#91;<span class=\"hljs-string\">\"search-term\"<\/span>]);\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Underneath this, we will create the return statement for the function containing the JSX components the user will see. We will set up a form where <code>onSubmit<\/code> triggers the <code>handleSearch<\/code> function that we just set up to get new search results. Any time someone submits a search request, it will handle the loading time, check for an error or no results returned, and finally return and display the new results. As long as results are returned from the search, we will map through the array and display each album or song title.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">return<\/span> (\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"songs-search\"<\/span>&gt;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\">\"post\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"search-form\"<\/span> <span class=\"hljs-attr\">onSubmit<\/span>=<span class=\"hljs-string\">{handleSearch}<\/span>&gt;<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"search\"<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"search-term\"<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Search for a song\u2026\"<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        \/&gt;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>Search<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"songs-list\"<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        {loading ? (<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Loading...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        ) : error ? (<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Error :(<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        ) : !haveResults ? (<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>No songs found.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        ) : (<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          results.map((item) =&gt; (<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.id}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"songs-list-item\"<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>{item.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          ))<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        )}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">  );<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>In completion, our <code>search.js<\/code> page will look like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> React, { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { useQuery, gql } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@apollo\/client\"<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> searchTaylorSwift = gql<span class=\"hljs-string\">`<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">  query ACF_SEARCH_QUERY($searchTerm: String!) {<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">    contentNodes(where: {search: $searchTerm}) {<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">      nodes {<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">        ... on Song {<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">          id<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">          title<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">        }<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">        ... on Album {<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">          id<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">          title<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">        }<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">      }<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">    }<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">  }<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-string\">`<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">SongFinder<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> &#91;searchTerm, setSearchTerm] = useState(<span class=\"hljs-string\">\"\"<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> { loading, error, data } = useQuery(searchTaylorSwift, {\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-attr\">variables<\/span>: { searchTerm }\n<\/span><\/span><span class='shcb-loc'><span>  });\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> results = data?.contentNodes?.nodes;\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">const<\/span> haveResults = <span class=\"hljs-built_in\">Boolean<\/span>(results?.length);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">handleSearch<\/span>(<span class=\"hljs-params\">event<\/span>) <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>    event.preventDefault();\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">const<\/span> values = <span class=\"hljs-built_in\">Object<\/span>.fromEntries(<span class=\"hljs-keyword\">new<\/span> FormData(event.target));\n<\/span><\/span><span class='shcb-loc'><span>    setSearchTerm(values&#91;<span class=\"hljs-string\">\"search-term\"<\/span>]);\n<\/span><\/span><span class='shcb-loc'><span>  }\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">return<\/span> (\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"songs-search\"<\/span>&gt;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">method<\/span>=<span class=\"hljs-string\">\"post\"<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"search-form\"<\/span> <span class=\"hljs-attr\">onSubmit<\/span>=<span class=\"hljs-string\">{handleSearch}<\/span>&gt;<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"search\"<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"search-term\"<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Search for a song\u2026\"<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        \/&gt;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>Search<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"songs-list\"<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        {loading ? (<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Loading...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        ) : error ? (<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Error :(<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        ) : !haveResults ? (<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>No songs found.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        ) : (<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          results.map((item) =&gt; (<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{item.id}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"songs-list-item\"<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">              <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h2<\/span>&gt;<\/span>{item.title}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h2<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          ))<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        )}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">  );<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Finally, we will add a bit of styling to this page. Open the <code>styles\/_base.scss<\/code> page and copy in the following SCSS declarations. Erase the current styles and copy in the new ones.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-selector-tag\">html<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">box-sizing<\/span>: border-box;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>*,\n<\/span><\/span><span class='shcb-loc'><span>*<span class=\"hljs-selector-pseudo\">:before<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>*<span class=\"hljs-selector-pseudo\">:after<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">box-sizing<\/span>: inherit;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-tag\">body<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">5%<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">font-family<\/span>: -apple-system, BlinkMacSystemFont, <span class=\"hljs-string\">\"Segoe UI\"<\/span>, <span class=\"hljs-string\">\"Roboto\"<\/span>, <span class=\"hljs-string\">\"Oxygen\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">\"Ubuntu\"<\/span>, <span class=\"hljs-string\">\"Cantarell\"<\/span>, <span class=\"hljs-string\">\"Fira Sans\"<\/span>, <span class=\"hljs-string\">\"Droid Sans\"<\/span>, <span class=\"hljs-string\">\"Helvetica Neue\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\tsans-serif;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">-webkit-font-smoothing<\/span>: antialiased;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">-moz-osx-font-smoothing<\/span>: grayscale;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#252527<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#9daf9f<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-comment\">\/* fallback for old browsers *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-tag\">a<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#252527<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-class\">.app<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">60px<\/span> auto;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">40px<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">800px<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-class\">.title<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">text-align<\/span>: center;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-class\">.search-form<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">4rem<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">display<\/span>: flex;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-class\">.search-form<\/span> <span class=\"hljs-selector-tag\">input<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">83%<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1rem<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">25px<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">border<\/span>: none;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-class\">.search-form<\/span> <span class=\"hljs-selector-tag\">button<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">15%<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">border<\/span>: none;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#7d8c7f<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">1.1rem<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">cursor<\/span>: pointer;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-class\">.songs-list<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">4rem<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-class\">.songs-list-item<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#7d8c7f<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">6px<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-class\">.songs-list-item<\/span>+<span class=\"hljs-selector-class\">.songs-list-item<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">margin-top<\/span>: <span class=\"hljs-number\">2rem<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Now, let\u2019s go to the page where the site is running locally and navigate to the <code>\/search<\/code> route.<\/p>\n\n\n\n<p>Try searching for <em>&#8216;Taylor\u2019s AND Version.&#8217;<\/em> It should return the same results as the GraphiQL IDE showed. You can also try searching for other search terms.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-24-1024x591.png\" alt=\"\" class=\"wp-image-31435\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-24-1024x591.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-24-300x173.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-24-768x443.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-24-1536x887.png 1536w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-24-2048x1182.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"done\">Done!<\/h1>\n\n\n\n<p>Congrats! You made a fully functional search page for headless WordPress!<\/p>\n\n\n\n<p>Hopefully, this tutorial helped you understand how to leverage tools like Faust.js, ACF, and WPGraphQL to build headless WordPress sites and implement search functionality. To learn more, check out the <a href=\"https:\/\/wpengine.com\/support\/wp-engine-smart-search\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Engine Smart Search AI documentation<\/a>.<\/p>\n\n\n\n<p>As you continue with headless development, join our <a href=\"https:\/\/discord.gg\/5ZftnG6P2T\" target=\"_blank\" rel=\"noreferrer noopener\">Headless WordPress Discord community<\/a>!<\/p>\n\n\n\n<p>Looking for a place to host your headless WordPress project? Check out WP Engine\u2019s <a href=\"https:\/\/wpengine.com\/headless-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Headless platform<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-group has-base-color has-text-color has-background has-link-color wp-elements-1c64e8656e2adf26d6fee6632ed30e85 has-global-padding is-layout-constrained wp-container-core-group-is-layout-c825ac28 wp-block-group-is-layout-constrained\" style=\"border-radius:12px;background-color:#1a8bec;margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-left is-layout-flex wp-container-core-group-is-layout-8b72b8c1 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-b97f5b79 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container\" style=\"width:52px\"><svg fill=\"none\" viewBox=\"0 0 51 52\" aria-label=\"Frost logo\"><path fill=\"#0076DC\" d=\"M51 26C51 11.917 39.583.5 25.5.5S0 11.917 0 26s11.417 25.5 25.5 25.5S51 40.083 51 26Z\"><\/path><path fill=\"#fff\" d=\"M18.693 43a8.4 8.4 0 0 1-3.701-.944 4.91 4.91 0 0 1-2.044-2.11 2.946 2.946 0 0 1 1.095-3.778 3.386 3.386 0 0 1 4.287.68c.36.423.691.87.991 1.336l.047.071c1.228-2.833 1.785-5.765 2.361-8.838.27-1.417.553-2.875.902-4.325l-2.658-.207a.733.733 0 0 1-.675-.723 1.916 1.916 0 0 1 .52-1.487 1.889 1.889 0 0 1 1.496-.387l.76.07a1.337 1.337 0 0 0 1.416-1.005c.118-.472.232-.944.35-1.45.401-1.99.998-3.937 1.78-5.811 2.001-4.382 5.622-6.01 10.202-4.594.9.28 1.714.787 2.36 1.473a3.41 3.41 0 0 1 .907 2.497 2.973 2.973 0 0 1-1.02 2.082 3.157 3.157 0 0 1-2.318.709 3.485 3.485 0 0 1-2.389-1.214 8.862 8.862 0 0 1-1.067-1.775c-.113-.222-.221-.472-.34-.666-.042-.075-.084-.15-.122-.23l-.302.032-2.116 9.797 2.673.17a.723.723 0 0 1 .67.604 1.78 1.78 0 0 1-.316 1.591 1.716 1.716 0 0 1-1.516.401l-.359-.037-.472-.047c-1.005-.076-1.36.24-1.59 1.416-.1.51-.2 1.02-.293 1.53-.444 2.303-.898 4.683-1.535 6.982a16.486 16.486 0 0 1-2.2 4.835C22.97 41.862 20.955 43 18.693 43Zm-2.946-6.383a2.262 2.262 0 0 0-1.204.34 2.002 2.002 0 0 0-.755 2.568 3.97 3.97 0 0 0 1.62 1.695c3.304 1.624 6.26.878 8.295-2.11a15.411 15.411 0 0 0 2.072-4.552c.628-2.266 1.082-4.627 1.516-6.912l.297-1.53c.227-1.156.709-2.317 2.587-2.176l.51.052.35.038c.368.038.632 0 .736-.113a.854.854 0 0 0 .095-.614l-2.743-.175a.732.732 0 0 1-.652-.878l2.285-10.703 1.653-.189.141.312c.076.165.152.325.236.472.085.146.241.472.36.694.252.564.57 1.098.944 1.59a2.55 2.55 0 0 0 1.742.879 2.229 2.229 0 0 0 1.624-.472 2.031 2.031 0 0 0 .698-1.417 2.484 2.484 0 0 0-.67-1.808 4.557 4.557 0 0 0-1.94-1.204c-4.127-1.28-7.262.133-9.065 4.084a30.694 30.694 0 0 0-1.723 5.637c-.114.473-.232.978-.35 1.464a2.266 2.266 0 0 1-2.412 1.714l-.76-.07a1.034 1.034 0 0 0-.775.145.888.888 0 0 0-.208.581l2.734.198a.728.728 0 0 1 .652.898c-.373 1.51-.666 3.045-.945 4.532-.6 3.12-1.213 6.35-2.606 9.442a.714.714 0 0 1-1.232.114l-.288-.425c-.277-.43-.583-.84-.916-1.228a2.536 2.536 0 0 0-1.903-.873Z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-x-large-font-size\" style=\"font-style:normal;font-weight:800;letter-spacing:-1px\">Faust.js<\/p>\n<\/div>\n\n\n\n<p class=\"has-small-font-size wp-container-content-c86e52ed\" style=\"line-height:1.5\">The JavaScript framework<br>specifically for WordPress.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-right is-nowrap is-layout-flex wp-container-core-buttons-is-layout-b315634e wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline-base\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/faust-builders\/\" style=\"border-radius:99px;padding-top:10px;padding-right:24px;padding-bottom:10px;padding-left:24px\" target=\"_blank\" rel=\"noreferrer noopener\">Download \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial will teach you how to build search functionality into your headless WordPress site using WP Engine Smart Search AI, Faust.js, and Advanced Custom Fields. It assumes a basic [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-31394","post","type-post","status-publish","format-standard","hentry","category-headless"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress - Builders<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress - Builders\" \/>\n<meta property=\"og:description\" content=\"This tutorial will teach you how to build search functionality into your headless WordPress site using WP Engine Smart Search AI, Faust.js, and Advanced Custom Fields. It assumes a basic [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-04T21:30:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-10T23:41:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3182\" \/>\n\t<meta property=\"og:image:height\" content=\"1642\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Grace Erixon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Grace Erixon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/\"},\"author\":{\"name\":\"Grace Erixon\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/238dfb380aff5f2c58b8572d0b661deb\"},\"headline\":\"Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress\",\"datePublished\":\"2024-01-04T21:30:31+00:00\",\"dateModified\":\"2025-12-10T23:41:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/\"},\"wordCount\":3608,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/search-fun-1-1024x528.png\",\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/\",\"name\":\"Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/search-fun-1-1024x528.png\",\"datePublished\":\"2024-01-04T21:30:31+00:00\",\"dateModified\":\"2025-12-10T23:41:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/search-fun-1.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/search-fun-1.png\",\"width\":3182,\"height\":1642},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/238dfb380aff5f2c58b8572d0b661deb\",\"name\":\"Grace Erixon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g\",\"caption\":\"Grace Erixon\"},\"description\":\"Grace Erixon is a Developer Advocate at WP Engine. She has been developing with headless WordPress since 2021. Connect with her on the Headless WordPress Discord community, Twitter, or LinkedIn.\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/grace-erixonwpengine-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress - Builders","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress - Builders","og_description":"This tutorial will teach you how to build search functionality into your headless WordPress site using WP Engine Smart Search AI, Faust.js, and Advanced Custom Fields. It assumes a basic [&hellip;]","og_url":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/","og_site_name":"Builders","article_published_time":"2024-01-04T21:30:31+00:00","article_modified_time":"2025-12-10T23:41:24+00:00","og_image":[{"width":3182,"height":1642,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1.png","type":"image\/png"}],"author":"Grace Erixon","twitter_card":"summary_large_image","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Grace Erixon","Est. reading time":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/"},"author":{"name":"Grace Erixon","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/238dfb380aff5f2c58b8572d0b661deb"},"headline":"Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress","datePublished":"2024-01-04T21:30:31+00:00","dateModified":"2025-12-10T23:41:24+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/"},"wordCount":3608,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1-1024x528.png","articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/","url":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/","name":"Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1-1024x528.png","datePublished":"2024-01-04T21:30:31+00:00","dateModified":"2025-12-10T23:41:24+00:00","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/search-fun-1.png","width":3182,"height":1642},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/building-a-search-page-with-wp-engine-smart-search-faust-js-and-acf-in-headless-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Building a Search Page with WP Engine Smart Search AI, Faust.js, and ACF in Headless WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/238dfb380aff5f2c58b8572d0b661deb","name":"Grace Erixon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85b32abfcbc7a3028fc8a4d3f0f299333783fc24197648f25e75661c9e1a8a97?s=96&d=mm&r=g","caption":"Grace Erixon"},"description":"Grace Erixon is a Developer Advocate at WP Engine. She has been developing with headless WordPress since 2021. Connect with her on the Headless WordPress Discord community, Twitter, or LinkedIn.","url":"https:\/\/wpengine.com\/builders\/author\/grace-erixonwpengine-com\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=31394"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31394\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=31394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=31394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=31394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}