Redirect a search box to a FacetWP results page

The built-in search widget or other basic text input search form can be directed to a facet search results page without using the facet search filter in the form.  This makes it easy to include a simple search box in your header or sidebar throughout the site without loading FacetWP on every page.

You can import the json below in FacetWP -> Settings -> Backup -> Import if you want a jump start on the facet and template we’re creating in the tutorial.

[search-box-json]

1. Create a search facet

Although the search widget does not need to be a facet, you will need to have a search facet on the results page.  We’ve created a search type facet with “keywords” as the name.

2. Results template

For this tutorial we’re going to create a FacetWP template with the layout builder.  However, you can also direct the search to an existing archive page (such as a Woocommerce shop home page or blog index) or custom query page template.

Create a new template in FacetWP, we’re labeling this one “Site Search”, which gives the template name as “site_search” to use in the shortcode later.

In the query tab, we’re just going to stick with search all posts but this could be set to specific post types or other parameters if you prefer.

In the layout builder, we’ve created a 2 column display to output featured image, post title, and excerpt.

3. Add a new page

Now create a new page and add the shortcodes to create a results page.  Ours is named “Site Search” and gets a permalink of “/site-search/”, which we’ll need to know to modify the search widget.

Publish this page and test the search to make sure it is working as expected.  Note the url that this creates with the facet in it.  Ours becomes “fwp_keywords”.

4.  Search box

We’re using the default WordPress widget for our search.

By default, this widget has a text input field with name “s” and a form action that submits to your home page.  We can modify this with the get_search_form filter.  This will replace the “s” input field name with “fwp_keywords” and change the form action to “/site-search/” to match our new search results page.

[search-form-filter]

Now the search box will submit to your new site search results with the keywords in the url.

If the above filter does not work to apply the changes, 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 and form action as above.

You could also create your own form with HTML or a form builder.  The basic form is

[search-form-html]