WordPress Search using multiple select options and no text search

258 views Asked by At

I'm trying to utilise the searchform.php and search.php templates within WordPress to return search results based on categories of 2 select inputs and no text input. Within this custom searchform.php template I'm also using a hidden field to filter by a specific post type.

Currently the search form will return the selected options within the URL and the post type I'm search for, the issue is that the URL itself it malformed and it placing the 's=' parameter at the end, see the example below.

https://dev.warrenpartners.picl.co.uk/?category_service=executive-search&category_sector=financial-services&post_type%5B%5D=insight&s=

I'm a bit confused here as I've copied many examples of the base WP searchform template but all seem to have the same issue. See my searchform.php template file below:

<form role="search" id="searchform" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>" class="flex flex-wrap flex-col">
    <span class="lg:text-6xl text-4xl text-white">Locate our expertise</span>
    <p class="lg:my-8 my-4 text-white lg:text-xl text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed libero ac magna ultricies vulputate eget sed diam. Vestibulum ipsum nisl, varius euismod purus posuere, aliquet facilisis nibh.</p>

    <div class="relative w-full mb-8 search-form-input">
        <select name="category_service" id="Service" class="custom-select sources">
            <option value=""></option>
            <option value="Chair & NED Search">Chair & NED Search</option>
            <option value="executive-search">Executive Search</option>
            <option value="Leadership Coaching">Leadership Coaching</option>
            <option value="Consultancy Services">Consultancy Services</option>
            <option value="Interim Management & Advisory">Interim Management & Advisory</option>
          </select>
    </div>
    <div class="relative w-full mb-8 search-form-input">
        <select name="category_sector" id="Sector" class="custom-select sources">
            <option value=""></option>
            <option value="financial-services">Financial Services</option>
            <option value="Industrial">Industrial</option>
            <option value="Retail, Consumer & Wellbeing">Retail, Consumer & Wellbeing</option>
            <option value="Property & Real Estate">Property & Real Estate</option>
            <option value="Technology & Digital">Technology & Digital</option>
            <option value="Professional Services">Professional Services</option>
            <option value="Memberships & NPO's">Memberships & NPOs</option>
          </select>
    </div>
    <input type="hidden" name="post_type[]" value="insight" />
    <div class="relative w-full mt-4">
        <button type="submit" value="<?php echo get_search_query(); ?>" name="s" id="searchsubmit" class="btn-red cursor-pointer search-form-submit">Submit</button>
    </div>
</form>
0

There are 0 answers