0

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?

4
  • You mean, a single-selection <select>?
    – Sally CJ
    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
    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
    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
    Feb 24, 2021 at 22:02

1 Answer 1

2

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(); ?>">
8
  • Hi @SallyCJ Thanks for this. The select element is showing, but the <option> elements that hold the terms is empty. I wondering if it's because of how I'm integrating it with the code in the original question? I can't seem to get it to work though.
    – pjk_ok
    Feb 25, 2021 at 17:05
  • What do you mean by "empty"? No label? No value? Can you include a screenshot and/or HTML for the <select> that you see in the page source? Did you change all the "salary_bands" to the correct taxonomy slug? And can you show your current form code?
    – Sally CJ
    Feb 25, 2021 at 22:42
  • hi @SallyCJ I've cut and pasted the code into this pen: codepen.io/emilychews/pen/QWGQJXe?editors=1010 although I appreciate it won't render properly. The actual form has a little bit more to it than the original code such as SVG graphic etc. And the screenshot of what is happening is here: snipboard.io/Z4dqJ1.jpg (excuse the bad form styling).
    – pjk_ok
    Feb 27, 2021 at 0:37
  • 1
    Thanks @SallyCJ. I thought I had actually called the taxonomy 'salary_bands', but had actually named it 'salary_levels'. Thanks for all of your help.
    – pjk_ok
    Mar 4, 2021 at 2:10
  • 1
    One final comment @SallyCJ - having applied this something else has occurred to me which I've posted under a new question wordpress.stackexchange.com/questions/384435/… , namely that people will most likely want to search under multiple job types / salary bands
    – pjk_ok
    Mar 4, 2021 at 4:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.