// How to Display Results On a Separate Page

Updated on 2016-02-22

While facets are meant to be displayed on the same page as the results listing, it is possible to display them on a separate “Search” page as well.

1. The setup

Let’s assume we have a FacetWP template named “listing” and a facet named “category”. For simplicity, we’ll use the TwentyTwelve theme.

2. 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”:

<?php get_header(); ?>

<script>
function fwp_redirect() {
    FWP.parse_facets();
    FWP.set_hash();
    var query = FWP.build_query_string();
    window.location.href = '/search-results/?' + query;
}
</script>

    <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 onclick="fwp_redirect()">Search</button>

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

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

3. Create the results page

Add another 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.

Summary

FacetWP needs a template for facets to load. On the filters page, the template is simply hidden with CSS. When the Search button is clicked, the user is redirected to the results page.