How to Display Results On a Separate Page

The following covers how to display results on a separate page. The most common scenario is showing facets on the homepage that link to a results page.

1. The setup

Let’s assume we have a FacetWP template named listing and a facet named category.

Start by installing our free Submit add-on. This plugin handles the submit button logic.

2. Create the results page

Add a page with the permalink of search-results. This file is named “page-search-results.php”:

<?php get_header(); ?>

    <div id="primary" class="site-content">
        <div id="content" role="main">

              <?php echo facetwp_display( 'facet', 'category' ); ?>
              <?php echo facetwp_display( 'template', 'listing' ); ?>

        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

As you can see, we’ve just added the template and facet shortcodes.

3. Create the filters page

Add a page with the permalink of search-filters. Also create a file in your theme named “page-search-filters.php” with the following contents:

<?php get_header(); ?>

    <div id="primary" class="site-content">
        <div id="content" role="main">

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

        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

We’re hiding the template with CSS. Also notice how the button has class “fwp-submit” as well as a “data-href” attribute. The Submit add-on automatically handles the rest 🙂

Summary

We’ve created 2 WordPress pages, each with a custom template file. Alternatively, you could paste the shortcodes directly into the body field.

If you have an existing archive page, you could link to that instead (if doing so, make sure your shortcode-based template’s query arguments match the archive query).