How to Filter Posts by Categories using FacetWP in Genesis

Posted on

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.

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;
}