Use an HTML Element To Filter Taxonomies In WP Search

I have a WP search form where I would like to add a <select> element for a particular taxonomy and its terms (salary bands) for a custom post type of ‘jobs’.

The current standard input search uses the following code to search the jobs custom post type for keywords:

<form method="get" action="<?php echo esc_url(site_url('/')); ?>">
    <div id="form-wrapper">
        <label id="searchlabel" for="s">Search</label>
        <input id="s" name="s" type="search">
        <input type="hidden" name="post_type" value="jobs" />
        <input class="td search-jobs-button" type="submit" value="Search Jobs">
    </div>
</form>

How would I add a <select> element that will show custom salary taxonomies in salary bands (e.g: £20-40k, £40 – 60k, £60-80k etc). The taxonomy terms will be added in the back end of the site obviously.

What I would like to happen is for people to be able to search keywords in the search input field and effectively filter these results by salary band using the select options.

Is there any way of adding each salary banding to an individual select option which is then included in the search when they click the submit input button?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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(); ?>">

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0