→ Template Configuration

Overview

A template tells FacetWP which posts to filter upon, and is required for facets to appear. FacetWP supports 2 template types:

CSS-based

Use this approach to add facets to existing search or archive pages (category archives, WooCommerce shop page, etc.). It involves adding a CSS class around the result listing.

Shortcode-based

This method is best for creating brand new listing pages. It involves creating a new template within FacetWP’s admin UI (Settings > FacetWP > Templates), then pasting its shortcode into a page.

Option 1: CSS method

Add the facetwp-template CSS class to a new (or existing) element surrounding the Loop.

<div class="facetwp-template">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'post' ); ?>
    <?php endwhile; else : ?>
        <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php endif; ?>
</div>

The file to edit depends on several factors. As a general rule:

  • Search page: search.php
  • Main archive: archive.php
  • Category archive: category.php
  • Blog home: home.php
  • WooCommerce shop: archive-product.php
  • See WP’s Template Hierarchy page to learn more

That’s it! FacetWP will automatically detect the query and display relevant facet choices. Learn how it works, and how to troubleshoot if necessary.

NOTE: Facet shortcodes should NOT be inside the facetwp-template container.

Option 2: Shortcode method

Browse to Settings > FacetWP > Templates to add a new shortcode template.

admin-edit-template

Query Arguments

The Query Arguments field (based on WP_Query) determines the initial bucket of posts to load from the database, how many per page, and in which order. Below, we’ll fetch published posts, and show 15 per page:

<?php
return array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => 15,
);

FacetWP also includes a Query Builder tool if needed.

Display Code

The Display Code field is used for generating the template output. The following example will output the linked title for each post item.

<?php while ( have_posts() ): the_post(); ?>
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<?php endwhile; ?>

Alternatively, you could put your display code into a PHP template file:

<?php
include( get_stylesheet_directory() . '/loop-index.php' );
?>

Shortcode

If your template is named “lessons”, then your template shortcode would be:

[facetwp template="lessons"]

See Also