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, see step 4.

Using the Query tab in the Listing Builder.
Using the Query tab in the Listing Builder.

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/.

First, edit the appropriate template file where you want the facets and submit button to appear (for example homepage.php). Add the following code to output your listing template, facets, and the 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>

Alternatively, you could use shortcodes (if you are using the WP editor, a Gutenberg block, or a page builder plugin like Bricks, Elementor or Beaver Builder):

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

Make sure that the results page URI (in this example /listings/) is the button’s data-href attribute. This will make the button redirect to the results page on click.

Notice that we’re hiding the listing template with CSS. It’s only needed for the facets to know what content to filter.

If everything is in place, when using the facets and then clicking the submit button, the page will redirect to the results page, with the selected facet options pre-selected on the results page.

Optional: Submit on Enter

If you want the submit button to work not only when clicked, but also when a user presses Enter, add the following code to your (child) theme’s functions.php. The code first checks if any facets are in use, to prevent redirects without facet selections:

<?php
add_action( 'wp_footer', function() {
  ?>
    <script>
      (function($) {
        $(document).keyup(function(event) {

          var keycode = (event.keyCode ? event.keyCode : event.which);
          if (keycode == '13') {

            // Optional: first check if any facets are in use
            var in_use = false;
            $.each(FWP.facets, function(name, val) {
              if (val.length > 0) {
                in_use = true;
              }
            });
            if (in_use) {
              FWP.parseFacets();
              FWP.setHash();
              $(".fwp-submit").trigger("click");
            }
          }
        });
      })(jQuery);
    </script>
  <?php
}, 100 );

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