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