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 facet data to a secondary page.

How to set it up

In order for facets to appear, there needs to be a template on the page so that FacetWP knows which choices to display.

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

Next, browse to Settings > FacetWP and add a new template. Click on the “Query” tab (you can ignore the “Display” tab).

Here we’ll tell FacetWP which post type(s) to pull content from. Try to get the query to match as closely as possible to that of the results page you’re wanting to redirect to.

Using the query builder

Filters page

Let’s say you’ve named your FacetWP template listing, the results page is located at /listings/, and you have facets named location and categories.

Edit the appropriate template file (homepage.php?) and add the following to output your template, facet, and submit button:

<?php echo facetwp_display( 'facet', 'location' ); ?>
<?php echo facetwp_display( 'facet', 'categories' ); ?>
<div style="display:none"><?php echo facetwp_display( 'template', 'listing' ); ?></div>
<button class="fwp-submit" data-href="/listings/">Submit</button>

Or you could use shortcodes instead (if using the WYSIWYG, Gutenberg, or a page builder plugin):

[facetwp facet="location"]
[facetwp facet="categories"]
<div style="display:none">[facetwp template="listing"]</div>
<button class="fwp-submit" data-href="/listings/">Submit</button>

Results page

If your /listings/ page is an archive, then all you’ll need to do is add your facet shortcodes somewhere on the page (e.g. in the sidebar).

If it’s a standard page, you could just drop in the listing template shortcode that we created earlier, along with the facet shortcodes.

Listify and Listable themes

The themes Listify and Listable both have their own implementation of facets on the homepage with a submit button that redirects to a separate results page. Check our Listify or Listable pages for some known issues with these themes.

Changelog

0.4

  • Fixed support for FacetWP 3.9

See also