Use an HTML Element To Filter Taxonomies In WP Search

by

If you mean a single-selection dropdown menu, then you can add the <select> element using wp_dropdown_categories().

Here’s an example with salary_bands being the taxonomy name/slug, and I’m placing the dropdown above or before the submit button, but you can just place it somewhere else in your form:

<?php wp_dropdown_categories( array(
    'taxonomy'        => 'salary_bands', // taxonomy slug
    'name'            => 'salary_bands', // taxonomy slug or query_var
    'value_field'     => 'slug',
    'selected'        => get_query_var( 'salary_bands' ),
    'hierarchical'    => true, // place each term under their own parent
    'show_option_all' => 'All Salary Bands',
) ); ?>
<input class="td search-jobs-button" type="submit" value="Search Jobs">

See the function reference for the full arguments list, but in the above, I set the name to the taxonomy slug (salary_bands) and the value_field to slug so that the <option> value will use the term slug (and not the default — the term ID).

And with those settings, we don’t need to do the extra work of setting the selected terms via the pre_get_posts hook (or another hook), because WordPress would naturally automatically include the terms in the search query (its SQL statement).

Notes:

  • Make sure you use the correct taxonomy slug which is the first parameter for register_taxonomy() as in register_taxonomy( 'salary_bands', ... ). Otherwise, you’d likely get an empty select menu!

  • If you used a custom query_var value, then set the above name value to the query_var value. And then use get_query_var( 'query_var value' ).

Additionally, you might want to use the_search_query() like so:

<input id="s" name="s" type="search" value="<?php the_search_query(); ?>">