Sridhar Katakam

Genesis and WordPress Tutorials

How to Filter Posts by Categories using FacetWP in Genesis

by 4 Comments

Updated on July 05, 2017

FacetWP is a premium plugin for setting up fast and easy facets (filters) of various kinds like select menus, checkboxes and radio buttons.

This tutorial covers the steps to display categories’ checkboxes in a text widget on Posts page, archives and search results pages using FacetWP. Posts can be filtered by ticking/selecting one or more checkboxes.

Screencast:

While the tutorial has been written for Genesis Sample, it works with a few modifications in any Genesis child theme.

Step 1

Install and activate FacetWP.

Step 2

Go to Settings > FacetWP > Facets.

FacetWP comes with a Categories facet out of the box. Since we want to filter the posts by categories, we do not need to create a new Facet.

Click on Re-index.

Step 3

Go to Appearance > Widgets and drag a text widget where you want to display the filters, enter a widget title like “Filter by Categories” and paste the following:

[facetwp facet="categories"]

<button value="Reset" onclick="FWP.reset()" class="facet-reset" />Reset Filters</button>

You might want to restrict this widget to appear on Posts page, archives and search results pages using the Widget Visibility module of Jetpack or an equivalent plugin.

Step 4

Add the following in child theme’s style.css and modify to suit:

body .facetwp-facet {
    margin-bottom: 20px;
}

.facet-reset {
    text-align: center;
    color: #555;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    box-shadow: 0 1px 0 #ccc;
    vertical-align: top;
    font-size: 13px;
    padding: 0 10px 1px;
    border-radius: 3px;
    font-weight: normal;
}

.facet-reset:hover,
.facet-reset:focus {
    background-color: #fafafa;
    border-color: #999;
    color: #23282d;
}

  • Hi Sridhar,

    Any chance you can create a tutorial showing how FacetWP can work with SearchWP on global search? The tricky part, according to FacetWP’s support people, is that “FacetWP uses WP’s default WP_Query… but SearchWP cancels this query and builds its own query”.

    I know you already have a tutorial with FacetWP and SearchWP for Custom Post Types, but not one for global search.

    Thanks, and keep up the great work!

    Reply

    • Just to follow up on this, if you add this to your child theme’s functions.php file, FacetWP and SearchWP will play nicely together:

      add_filter( ‘searchwp_short_circuit’, ‘__return_true’ );

      Hope someone else find this useful too.

      Reply

  • I have one question

    I have one image.. I want reload that on everytime i click on facet filters and it reloads…

    any solution..? i added facetwp-facet class to image div …on filter it goes for loading but never come back ..although whole facet tempalte loads back immediately

    Reply
    • >