alessandro melandri

Multiple Categories Filter in WordPress Search

More than two years ago I wrote the post Add a category filter to WordPress search form to explain how I added a category filter to the WordPress search form using WordPress API and some custom code and one of the most asked question was how to add a multiple categories filter to the search form, so here it is, a tutorial that covers all the steps to add multiple category filter to WordPress search.

If you are impatient and want to see the final result, this is a sceenshot of the search page.

Getting the categories list

In the previous post I used the standard method wp_dropdown_categories to get the categories list, now we need to generate a checkbox list instead of a dropdown list so we are going to build a custom method in the functions.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function am_dropdown_categories($args){
 
  // Get all the categories using WP API
  $categories = get_categories( $args );
 
  // Build the select code
 
  $select = '<ul id="catSearchFilters">';
 
  foreach ($categories as $category) { 
    $select .= '<li><input id="filterCat_'.$category-&gt;cat_ID.'" type="checkbox" name="filterCat" value="'.$category->cat_ID.'"'; 
    $select .= '<span>'.$category-&gt;cat_name.'</span></li>';
  } 
 
  $select .= '</ul>';
 
  // Output the select code to the page
 
  echo($select);
}

This method generates a list of categories with a checkbox for every category. The value of the checkbox is the category ID. Now we need to customize the search.php template adding a call to the function am_dropdown_categories:

1
2
3
4
5
6
7
8
9

<form id="adv_searchform" action="<?php echo home_url( '/' ); ?>" method="get" name="adv_searchform" onsubmit="return manageMultipleCategoriesSearch()">
  Search: <input id="adv_s" class="input input_large" type="text" name="s" value="<?php the_search_query(); ?>" />

  <h3>Category filter:</h3>

  <div class="clear"></div>
  <input type="hidden" name="cat" value="" />
  <input class="button" type="submit" name="Search" value="Search" />
</form>

Notice that the checkboxes name is filterCat and that there’s an hidden cat field: this field is used by WordPress to apply the search category filter and accepts multiples values using the sintax cat=1,2,3 so we are going to add a Javascript function that populates the cat field using the proper formatting.

Manage the search form

This JavaScript function is called before submitting the form and sets the cat field value concatenating all the selected checkboxes values into a single string. This function must be included in the page displayng the search form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function manageMultipleCategoriesSearch(){

  var selectedCats = "";
  var isFirst = true;

  for (i=0; i<document.adv_searchform.filterCat.length; i++){
    if (document.adv_searchform.filterCat[i].checked == true){

    if (!isFirst)
      selectedCats += ',';

      selectedCats += document.adv_searchform.filterCat[i].value;
      isFirst = false;
    }
  }

  document.adv_searchform.cat.value = selectedCats;

  return true;
}

The filter is now fully functional, but we need to customize the search result page to list the categories

Display results

Just add this code to the functions.php file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function getCatSearchFilter($pre,$post){
 
    $category = '';
    $catId = htmlspecialchars($_GET["cat"]);
 
    $token = strtok($catId,",");
    $category .= get_cat_name($token);
 
    while($token){
        $token = strtok(",");
 
    if ($token != '0')
        $category .= ', '.get_cat_name($token);
    }
 
      if (strlen($category)&gt;0)
          $category = $pre.$category.$post;
 
      return $category;
}

and call it in the search results page:

1
2

Search results for <?php the_search_query(); ?> 
<?php echo(getCatSearchFilter(' in category <span>','</span>'));?>

That’s it.