Add a Category Select Dropdown Box to Search Form

Last updated December 18, 2018 « Knowledge Base

One of the most popular ways to integrate search is to allow visitors to control the results pool on their own. This usually comes in the form of allowing them to choose a specific Category from a dropdown (select box) to go along with their search.

This article will explain how you can accomplish three different approaches to adding a Category dropdown to your search form.

  1. Build your own search form with a Categories dropdown
  2. Customize the Shortcodes Extension to include a Categories dropdown
  3. Customize the default search form to include a Categories select dropdown

Building your own search form

Building your own search form involves editing your theme files to include the input fields and buttons we want to include. At a most basic level you can add the following to your theme template file where you would like the form to appear:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field" placeholder="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ); ?>" />
</label>
<?php
// output all of our Categories
// for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
$swp_cat_dropdown_args = array(
'show_option_all' => __( 'Any Category' ),
'name' => 'swp_category_limiter',
);
wp_dropdown_categories( $swp_cat_dropdown_args );
?>
<input type="submit" class="search-submit" value="Search" />
</form>
view raw gistfile1.phtml hosted with ❤ by GitHub

Based on the default search form provided by WordPress, this form outputs a field for the search query, a select box containing all of your Categories, and a button to trigger the search. Note the arguments passed to wp_dropdown_categories() that define the ‘Any Category’ label and set the name of the dropdown as swp_category_limiter.

With your form in place, the last step is to tell SearchWP to take the submitted dropdown value into consideration when performing searches. To do that we’re going to use one of SearchWP’s many hooks, searchwp_include.

This hook allows us to limit the search results pool to an array of post IDs. We’re going to use the category ID submitted in the dropdown to limit our search results pool to the chosen category. This can be accomplished by adding the following to your theme’s functions.php (not the theme template file where you added the form code).

Note: notice that the variable we’re looking for was the one we used to set the name of the select which was output by wp_dropdown_categories()

<?php
function my_searchwp_include_only_category( $ids, $engine, $terms ) {
// if and only if a category ID was submitted:
// we only want to apply this limitation to the default search engine
// if you would like to change that you can do so here
if ( ! empty( $_GET['swp_category_limiter'] ) && 'default' == $engine ) {
$category_id = absint( $_GET['swp_category_limiter'] );
$category_args = array(
'category' => $category_id, // limit to the chosen category ID
'fields' => 'ids', // we only want the IDs of these posts
'posts_per_page' => -1, // return ALL posts
);
$ids = get_posts( $category_args );
// if there were no posts returned we need to force an empty result
if ( 0 == count( $ids ) ) {
$ids = array( 0 ); // this will force SearchWP to return zero results
}
}
// always return our $ids
return $ids;
}
add_filter( 'searchwp_include', 'my_searchwp_include_only_category', 10, 3 );
view raw gistfile1.php hosted with ❤ by GitHub

This snippet checks to make sure that the default search engine is being used and that a non-empty value was chosen from the dropdown. If both of those criteria are met, we run a quick query for post IDs that are within the chosen category, and we tell SearchWP to limit the results to those post IDs.

Use SearchWP’s Shortcodes Extension

SearchWP’s Shortcodes Extension allows you to easily output search forms and control search results pages using WordPress Shortcodes. Here is an example search form that includes a Categories dropdown to choose from:

Note: requires Shortcodes version 1.2.1 or higher

<?php
// // ***** UNCOMMENT THIS IF YOU WANT TO USE SHORTCODES IN WIDGETS
// add_filter( 'widget_text', 'do_shortcode' );
// output the categories dropdown
function my_searchwp_shortcodes_inject_categories() {
echo '<p class="searchwp-shortcodes-categories">';
// for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
$swp_cat_dropdown_args = array(
'show_option_all' => __( 'Any Category' ),
'name' => 'swp_category_limiter',
);
wp_dropdown_categories( $swp_cat_dropdown_args );
echo '</p>';
}
add_action( 'searchwp_shortcodes_after_input', 'my_searchwp_shortcodes_inject_categories' );
view raw gistfile1.php hosted with ❤ by GitHub

That takes care of our search form, it will automatically include a dropdown of our Categories between the search field and the submit button. Note that in this snippet we have customized the name of the dropdown to be swp_category_limiter, which we will be using next.

So far we have only set up the form to output a dropdown that will let the visitor define a category for results restriction, we still need to grab that information when the form is submitted and tell SearchWP about it. This can be done by adding the following to your theme’s functions.php (not the theme template file where you added the form code).

Note: notice that the variable we’re looking for was the one we used to set the name of the select which was output by wp_dropdown_categories()

<?php
function my_searchwp_include_only_category( $ids, $engine, $terms ) {
// if and only if a category ID was submitted:
// we only want to apply this limitation to the default search engine
// if you would like to change that you can do so here
if ( ! empty( $_GET['swp_category_limiter'] ) && 'default' == $engine ) {
$category_id = absint( $_GET['swp_category_limiter'] );
$category_args = array(
'category' => $category_id, // limit to the chosen category ID
'fields' => 'ids', // we only want the IDs of these posts
'posts_per_page' => -1, // return ALL posts
);
$ids = get_posts( $category_args );
// if there were no posts returned we need to force an empty result
if ( 0 == count( $ids ) ) {
$ids = array( 0 ); // this will force SearchWP to return zero results
}
}
// always return our $ids
return $ids;
}
add_filter( 'searchwp_include', 'my_searchwp_include_only_category', 10, 3 );
view raw gistfile1.php hosted with ❤ by GitHub

That snippet will intercept SearchWP’s processing and tell it to limit the results pool to the posts within the submitted category.

Modify the default search form to include a Categories dropdown

WordPress allows us to filter the default search form found in many themes. It’s generated by a call to get_search_form() which can be completely customized either by including a file named searchform.php in your theme directory, or via the get_search_form filter. For this example we will be using the get_search_form filter. To use this filter you will be working in your theme’s functions.php file.

To include a Categories dropdown in your site’s default search form, add the following to your theme’s functions.php:

<?php
// adds a Categories dropdown to the search form
function my_searchwp_get_search_form_with_categories_dropdown( $form ) {
ob_start(); ?>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<span class="screen-reader-text">Search For</span>
<input type="search" class="search-field" placeholder="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:" />
</label>
<?php
// for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
$swp_cat_dropdown_args = array(
'show_option_all' => __( 'Any Category' ),
'name' => 'swp_category_limiter',
);
wp_dropdown_categories( $swp_cat_dropdown_args );
?>
<input type="submit" class="search-submit" value="Search" />
</form>
<?php return ob_get_clean();
}
add_filter( 'get_search_form', 'my_searchwp_get_search_form_with_categories_dropdown' );
view raw gistfile1.php hosted with ❤ by GitHub

The form code used here is based on the default search form that ships with WordPress. There is a chance your theme previously customized the form, and you simply want to add the dropdown to it. You can simply modify the form code to match what shipped with your theme and adding lines 11-18 from that code sample where you want your Categories dropdown to appear.

This snippet only modifies the search form, we still need to capture the value from the dropdown and tell SearchWP to limit results to a specific Category. We can do that by adding the following to your theme’s functions.php (not the theme template file where you added the form code).

Note: notice that the variable we’re looking for was the one we used to set the name of the select which was output by wp_dropdown_categories()

<?php
function my_searchwp_include_only_category( $ids, $engine, $terms ) {
// if and only if a category ID was submitted:
// we only want to apply this limitation to the default search engine
// if you would like to change that you can do so here
if ( ! empty( $_GET['swp_category_limiter'] ) && 'default' == $engine ) {
$category_id = absint( $_GET['swp_category_limiter'] );
$category_args = array(
'category' => $category_id, // limit to the chosen category ID
'fields' => 'ids', // we only want the IDs of these posts
'posts_per_page' => -1, // return ALL posts
);
$ids = get_posts( $category_args );
// if there were no posts returned we need to force an empty result
if ( 0 == count( $ids ) ) {
$ids = array( 0 ); // this will force SearchWP to return zero results
}
}
// always return our $ids
return $ids;
}
add_filter( 'searchwp_include', 'my_searchwp_include_only_category', 10, 3 );
view raw gistfile1.php hosted with ❤ by GitHub
Fix Search on Your Site. No Coding Required!

Now you can utilize all of the content that's gone unrecognized by native WordPress search instantly with SearchWP

Get SearchWP