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?

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?

• custom-taxonomy
• search
• forms

• You mean, a single-selection <select>? – Sally CJ Commented Feb 23, 2021 at 9:16
• hi @SallyCJ it would be a series of salary bands e.g. 20-40k, 40-60k, 60-80k, 80k+ (i'll amend the question to make that clearer) – pjk_ok Commented Feb 23, 2021 at 23:13
• So you're saying, you do want to allow users to select multiple options (i.e. one or more salary bands)? See the second and third examples here. Also, is your taxonomy hierarchical? – Sally CJ Commented Feb 24, 2021 at 3:15
• @SallyCJ No, it will just be one salary band selected from the multiple options available. Yes it is hierarchical. – pjk_ok Commented Feb 24, 2021 at 22:02

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