Anyone who’s ever used WordPress knows that its default search is not ideal. And a sidebar of Recent Posts, Categories, and Tags doesn’t make your full catalog of content easily searchable. If you’ve been busy publishing posts then the chances of all of them fitting into the sidebar are slim. Searching content becomes difficult for your visitors.
A sidebar of facets instead of static links will boost your site’s searching experience and save visitors a significant amount of time and energy trying to find what they’re looking for. In this article, we’ll walk through a simple tutorial on implementing faceted search with FacetWP.
One of the most popular WordPress solutions to implement faceted search is by using the FacetWP plugin. This plugin is a must-have if you find yourself storing a lot of data in custom fields that could potentially be used to narrow down a search query.
You can use faceted search to filter custom post types, categories, tags and custom fields. The feature that really makes it stand out among other searching solutions is that it updates results via AJAX. AJAX ensures that the results are filtered and updated dynamically thus eliminating the need to refresh the page.
- 9 facet types
- Real-time filtering
- Shortcode integration
- Compatible with all WordPress themes
- Advanced Custom Fields (ACF) support
- Integrates with WooCommerce, SearchWP, Easy Digital Downloads and more.
Getting Started With FacetWP
In this section, we’ll walk through a quick tutorial to help you get started with FacetWP. We will take four major steps (each described in detail below):
- Adding facets
- Creating a facet template
- Adding facets to your site
You can head over to FacetWP’s website to buy a license. There are two options available – Basic and Professional. Once you install it to your WordPress site and activate it by entering the license code, you can move on to the next section.
- Navigate to the FacetWP Admin Page > Add Facet.
- Enter the appropriate values in the form that appears on the Add Facet page.
- Label: The name of your facet.
- Data source: Where it will get necessary data from.
- Facet type: Select checkboxes (or any of the nine options depending on the facet).
- Click the Save Changes button.
Repeat steps 1 to 3 to create as many facets as you’d like. To keep things interesting, you can experiment with the other facet types depending upon the kind of content your site has.
By now you’ve successfully created facets for your site and it’s time to create a facet template.
Creating a Facet Template
FacetWP provides a facet template that you can use as it is or edit to fit your site.
- Navigate to the FacetWP Admin Page > Templates.
- Copy the Query Arguments section.
- Click the Add Template button and give your new template a name e.g. Search.
- Paste the Query Arguments section in the new template.
- Copy the Display Code section from FacetWP’s Admin Page > Templates and paste it in the template.
- Add the following code to the template:
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<h3 class="post-title facet-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php endwhile; ?>
This code is a basic loop that will display the filtered post’s title as a hyperlink.
- Click the Save button.
Adding Facets to Your Site
In this part of the tutorial, we will simply add the shortcodes of the facets we created to the site’s page.
- Copy and paste the following shortcodes to the page where you’d like to display the faceted search.
In the first shortcode, “Search” is the name of the facet template we created earlier. Replace “Search” with the name of your facet template if you named it something else. The second short code enables pagination.
- Save changes you made to the page.
- Navigate to the Widget Admin Panel and add a text widget.
- In Title textbox, type in the name of your facet template.
- Copy and paste the following shortcodes in the widget menu.
- Click the Save button.
That’s all there is to it. You’ll see that faceted search is added to the page you added the shortcodes to.
Wrapping It Up
We’ve covered the basics of FacetWP and hopefully you’re now in a good position to take things further yourself.
Do you use faceted search on your WordPress site? Which plugins do you use? Let us know in the comments section below.