In this tutorial we will demonstrate how a WordPress search widget (or any basic text input search form) can be directed to a facet search results page, without using a Search facet in the search form. This makes it possible to include a simple search box in your header, navigation, or sidebar throughout your site, without loading FacetWP on every page.

To jump-start this tutorial, you can import the JSON code below in:

FacetWP -> Settings -> Import / Export -> Import

{"facets":[{"name":"pager_numbers","label":"Pager numbers","type":"pager","pager_type":"numbers","inner_size":"2","dots_label":"…","prev_label":"Prev","next_label":"Next","count_text_plural":"[lower] - [upper] of [total] results","count_text_singular":"1 result","count_text_none":"No results","load_more_text":"Load more","loading_text":"Loading...","default_label":"Per page","per_page_options":"10, 25, 50, 100"},{"label":"Keywords","name":"keywords","type":"search","source":"post_title","search_engine":"","placeholder":"Search ...","auto_refresh":"no"}],"templates":[{"name":"site_search","label":"Site Search","query":"","template":"","layout":{"items":[{"type":"row","items":[{"type":"col","items":[{"type":"item","source":"featured_image","settings":{"image_size":"medium","link":{"type":"post","href":"","target":""},"is_hidden":"","border":{"style":"none","color":"","width":{"unit":"px","top":0,"right":0,"bottom":0,"left":0}},"background_color":"","padding":{"unit":"px","top":0,"right":0,"bottom":0,"left":0},"text_color":"","text_style":{"align":"","bold":false,"italic":false},"font_size":{"unit":"px","size":0},"name":"el-36l12a","css_class":""}},{"type":"item","source":"post_title","settings":{"link":{"type":"post","href":"","target":""},"prefix":"<h2>","suffix":"<h2>","is_hidden":"","border":{"style":"none","color":"","width":{"unit":"px","top":0,"right":0,"bottom":0,"left":0}},"background_color":"","padding":{"unit":"px","top":10,"right":0,"bottom":10,"left":0},"text_color":"","text_style":{"align":"","bold":false,"italic":false},"font_size":{"unit":"px","size":0},"name":"el-mijtwn","css_class":""}},{"type":"item","source":"post_excerpt","settings":{"prefix":"","suffix":"","is_hidden":"","border":{"style":"none","color":"","width":{"unit":"px","top":0,"right":0,"bottom":0,"left":0}},"background_color":"","padding":{"unit":"px","top":0,"right":0,"bottom":0,"left":0},"text_color":"","text_style":{"align":"","bold":false,"italic":false},"font_size":{"unit":"px","size":0},"name":"el-9p7pa","css_class":""}}],"settings":{"border":{"style":"none","color":"","width":{"unit":"px","top":0,"right":0,"bottom":0,"left":0}},"background_color":"","padding":{"unit":"px","top":0,"right":0,"bottom":0,"left":0},"text_color":"","text_style":{"align":"","bold":false,"italic":false},"font_size":{"unit":"px","size":0},"name":"el-68avy","css_class":""}}],"settings":{"grid_template_columns":"1fr","border":{"style":"none","color":"","width":{"unit":"px","top":0,"right":0,"bottom":0,"left":0}},"background_color":"","padding":{"unit":"px","top":0,"right":0,"bottom":0,"left":0},"text_color":"","text_style":{"align":"","bold":false,"italic":false},"font_size":{"unit":"px","size":0},"name":"el-vj6mu","css_class":""}}],"settings":{"num_columns":2,"grid_gap":20,"custom_css":"","border":{"style":"none","color":"","width":{"unit":"px","top":0,"right":0,"bottom":0,"left":0}},"background_color":"","padding":{"unit":"px","top":0,"right":0,"bottom":0,"left":0},"text_color":"","text_style":{"align":"","bold":false,"italic":false},"font_size":{"unit":"px","size":0},"name":"el-k3g93n","css_class":""}},"query_obj":{"post_type":[],"posts_per_page":10,"orderby":[],"filters":[]},"modes":{"display":"visual","query":"visual"}}]}

In FacetWP’s settings, this will create two facets: a Search facet with the name “Keywords”, and a Pager facet facet with the name “Pager numbers”. It will also create a listing template with the name “Site Search”.

1. Create a Search facet

Although the search widget we are going to create in step 4 is not a facet, we will still need to have a Search facet on the results page. See step 5 for the reason why, and how to hide it.

If you have imported the above JSON code, you’ll see that we have already created a Search facet with “keywords” as its name. You can also create it manually by using these settings:

Search facet with the name keywords.
Creating a Search facet with the name “keywords”.

2. Create a results listing

Next, we will create a FacetWP listing template. In this tutorial, we will do this with the Listing Builder, but you can also direct the search to an existing archive page (such as a Woocommerce shop home page or blog listing page) or any custom query page template.

If you have imported the above JSON code, you’ll see that we have already created a listing with “site_search” as its name. You can also create it manually by using these settings:

Creating a site search listing: query arguments.
Creating a site search listing: query arguments.

In the Query tab, we’ve opted to fetch all post types, but this could be set to specific post types. You can adapt the other parameters any way you like.

In the Display tab, we’ve created a 2-column grid. For each individual post we will output the Featured Image, Post Title, and Post Excerpt. You can adapt the elements and settings as you like.

Creating a site search listing: display settings.
Creating a site search listing: display settings.

3. Add a new page for the search results

Next, we create a new page that will function as the search results page.

In this tutorial, we’ve set the page title to “Site Search”, so the permalink will be “/site-search/”. We are going to need this permalink to modify the search widget (see the code in step 4 below).

Add the following three shortcodes to the body text and save the page. The first is for a Search facet, then the listing template, and then the Pager facet, all three of which we created in step 1 and 2.

[facetwp facet="keywords"]
[facetwp template="site_search"]
[facetwp facet="pager_numbers"]

Publish this page and test the Search facet to make sure it is working as expected. Note the URL that this creates has a query variable that contains the facet’s name: “keywords”:

https://yourdomain.com/site-search/?_keywords=hoodie

Next, we are going to add a simple search box. There are a few ways to do this:

Option 1: Add a Search widget

Adding a default WordPress search widget.
Adding a default WordPress Search widget.

One way is to use a WordPress Search widget: add it to your sidebar or any other widget area of your theme.

By default, this widget has a <form> tag with an action attribute that submits to your home page, and a text <input> tag with a name attribute with the value s. We will modify both with the get_search_form filter.

Add the following code to your (child) theme’s functions.php. It will replace the Search widget’s s input field name with _keywords, the name of the Search facet created in step one, preceded by _, FacetWP’s URL prefix.

It will also change the form action to /site-search/ to match the permalink of the new search results page we created in step 3.

/** Filters the search form to replace the "s" input with your Search facet. Change "_keywords" (the Search facet's name) as needed.
 ** This also replaces the default action with the page URL of your custom search results page. Change the "/site-search/" permalink as needed.
 ** This code may need adjusting if the search is already modified by another plugin or theme */

add_filter( 'get_search_form', function( $form ) {
  $form = str_replace( 'name="s"', 'name="_keywords"', $form );
  $form = preg_replace( '/action=".*"/', 'action="/site-search/"', $form );
  return $form;
} );

Now the Search widget box will submit the entered search keywords to your new site search results, with the keywords added to the Search facet’s query variable in the URL.

If the above filter does not work, your theme or another plugin may already be modifying the search form. Another way to modify the search form is to use the searchform.php template in your theme. Copy the template from your parent theme and change the input field name attribute and form action as in above code.

Option 2: Add a Search block

Adding a Gutenberg Search block.
Adding a Gutenberg Search block.

Instead of a WordPress search widget, you can also use the Gutenberg block editor to add a Search block to specific pages.

If you opt for this approach, add the following code to your (child) theme’s functions.php. Using the render_block filter, it will replace the Search block’s s input field name with _keywords, the name of the Search facet created in step one, preceded by _, FacetWP’s URL prefix.

It will also change the form action to /site-search/ to match the permalink of the new search results page we created in step 3.

/** Filters the search block form to replace the "s" input with your Search facet. Change "_keywords" (the Search facet's name) as needed.
 ** This also replaces the default action with the page URL of your custom search results page. Change the "/site-search/" permalink as needed. */

add_filter( 'render_block', function( $block_content = '', $block = [] ) {
  if ( isset( $block['blockName'] ) && 'core/search' === $block['blockName'] ) {
    $dom = new DomDocument;
    $dom->loadHTML($block_content);
    $form = $dom->getElementsByTagName('form');
    $form[0]->setAttribute('action', '/site-search/');
    $input= $dom->getElementsByTagName('input');
    $input[0]->setAttribute('name', '_keywords');
    return $dom->saveHTML();
  }
  return $block_content;
}, 10, 2 );

Now the Search block box will submit the entered search keywords to your new site search results, with the keywords added to the Search facet’s query variable in the URL.

Option 3: Create your own search form

Instead of using a WordPress Search widget or block, you can also create your own search form with HTML or a form builder. The HTML for a basic search form looks like this:

<form action="/site-search/" method="get">
  <input type="search" placeholder="Search &hellip;" value="" name="_keywords">
  <button type="submit">Search</button>
</form>

5. Optional: hide the Search facet

On the /site-search/ results page, we included a shortcode for the “keywords” Search facet we created in step 1. You may be tempted to remove it because you already have a search box on the page, depending on the way you added a Search widget, Search block or custom search form.

However, we actually do need the Search facet on the page, because the Pager facet we also added needs the Search facet to maintain its search keywords in the URL. Without it, the search terms will be lost as soon as you click through to a paged page.

The same is true for any other facet you may want to add to the results page (including for example a Sort facet). Without the Search facet present, interaction with other facets will cause FacetWP’s URL string to lose the query variable with the search keywords.

Fortunately, we can easily hide the Search facet with a few lines of CSS, while keeping its functionality. Add the following to your (child) theme’s, or page’s CSS:

/* Option 1: Hide the Search facet with the name: "keywords" */
.facetwp-facet-keywords {
    display: none;
}

/* Option 2: Hide any Search facet */
.facetwp-type-search {
    display: none;
}

See also