How to Implement Faceted Search with FacetWP

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.

FacetWP

facet-wp

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.

Features

  • 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):

  1. Installation
  2. Adding facets
  3. Creating a facet template
  4. Adding facets to your site
Top Article:  How to Start a Gaming Blog?

Installation

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.

Adding Facets

  1. Navigate to the FacetWP Admin Page > Add Facet.
  2. 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).
  3. Click the Save Changes button.

add-facets

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.

  1. Navigate to the FacetWP Admin Page > Templates.
  2. Copy the Query Arguments section.
  3. Click the Add Template button and give your new template a name e.g. Search.
  4. Paste the Query Arguments section in the new template.
  5. Copy the Display Code section from FacetWP’s Admin Page > Templates and paste it in the template.
  6. Add the following code to the template:

    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
    <div class="facet-result">
    <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.
  7. Click the Save button.
Top Article:  Pro Ways to Optimize Your WordPress Website for 2022

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.

  1. Copy and paste the following shortcodes to the page where you’d like to display the faceted search.

    [facetwp template="Search"]
    [facetwp pager="true"]

    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.
    add-short-code
  2. Save changes you made to the page.
  3. Navigate to the Widget Admin Panel and add a text widget.
  4. In Title textbox, type in the name of your facet template.
  5. Copy and paste the following shortcodes in the widget menu.

    [facetwp facet="tags"]
    [facetwp facet="date"]
    [facetwp facet="author"]
  6. 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.

Faceted search not only gets you a higher rating in terms of user experience, but it also increases your site’s usability. By using faceted search, your site’s visitors will be able to search for content more easily.

Do you use faceted search on your WordPress site? Which plugins do you use? Let us know in the comments section below.

Charlie has been building WordPress themes, reviewing web hosts and utilizing social media since their respective inceptions.

5 thoughts on “How to Implement Faceted Search with FacetWP

  1. megha says:

    Hello
    I have problem with facet,
    when i search some text i get result properly but issue is that when i search and after page refresh no data getting

  2. Joro says:

    Hello,
    I have a problem with facet. When I set the plugin he removed pagination. How to do so that I can change my product pages on the site because by clicking on page two or three nothing happens.
    Please help me. I try this for quite some time but I’m at an impasse.

    1. charles Charles says:

      Hi Joro, have you reached out to support at FacetWP? They would be best placed to help you with this.

  3. Johann says:

    Anybody that can point to coding to have a better display of the results, ie the feature image with some text and star rating and price on it.

  4. Agence web Debord says:

    Very interesting plugin. Hope it will implement the radio button too.

Leave a Reply