We often get asked how to show filters on one page (like the homepage) that redirect to a separate results page. This can be done with the Submit Button add-on.

This add-on generates a submit button that passes chosen facet data from the primary page to a secondary results page.

How to set it up

Step 1: Install the Submit button add-on

First, download, install and activate the Submit Button add-on plugin.

Step 2: Create a listing template

In order for facets to appear on the primary page, there needs to be a listing template so that FacetWP knows which facet choices to display. In most cases you don’t want that listing to be visible on the primary pages, so we will hide it with CSS in step 5.

The easiest way to create this listing template is with FacetWP’s Listing Builder.

Browse to Settings > FacetWP > Listings and add a new listing template. Click on the “Query” tab (you can ignore the “Display” tab for now). Here we’ll tell FacetWP which post type(s) to pull content from. Try to get the query the same or matched as closely as possible to that of the results page you will be redirecting to. It’s also possible to use this same listing template on the results page itself,

Step 3: Create the facets

Next, create the facets you want to place on the primary filtering page and the secondary results page.

Step 4: Set up the results page

Next, set up the results page. It’s possible you already have a results page with facets set up. If so, then all you’ll need to do is add the facets you made in step 3 to the results page. If not, you can create one.

The easiest way is to use the Listing Builder and put the listing shortcode on a basic WordPress page, together with the facet shortcodes made in step 3. You can use the listing template made in step 2 (use the Display tab to build and style the individual results). Or you can create a separate listing.

If you want to use a WP archive or a custom WP_Query instead, just put the facet shortcodes made in step 3 somewhere on the page (e.g. in the sidebar).

No matter what kind of listing template you use for the results page, make sure the query used is exactly the same or as close as possible to the query used on the primary page listing template made in step 2.

Step 5: Set up the primary filtering page

Let’s say you have made a Listing Builder listing named listing in step 2, and two facets named location and categories in step 3. And that the results page you made in step 4 is located at the URI: /listings/.