To add a Select dropdown field to your text search you can modify the form like this:

  1. add query vars
  2. sanitize the query string
  3. make the form
  4. set the query arguments from the string
  5. run the wp_query

1. add query vars (functions.php)

<?php
 function custom_search_query_vars_filter($vars) {
	$vars[] .= 'cs_text_field';
    $vars[] .= 'cs_category_name';
	return $vars;
}
add_filter( 'query_vars', 'custom_search_query_vars_filter' );
?>

2. sanitize the query string (parts/search/searchform-categories.php)

<?php
$textField = sanitize_text_field(get_query_var('cs_text_field'));
$filterByCategory = sanitize_text_field(get_query_var('cs_category_name'));

3. the form (parts/search/searchform-categories.php)

<form role="search" method="get" action="<?php $_PHP_SELF ?>#searchform" id="searchform" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search">
	<label for="wp-block-search__input-1" class="wp-block-search__label">Search the site</label>
	<div class="wp-block-search__inside-wrapper ">
		<input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="cs_text_field" value="<?php echo $textField ?>" placeholder="Text Search..." >
	</div>
	<hr class="clearfix" />
	<label for="wp-block-search__input-2" class="wp-block-search__label">Category</label>
	<div class="wp-block-search__inside-wrapper ">
		<select name="cs_category_name">
			<option value="" >Select below:</option>
			<?php 
				$args = array(
					'exclude' => '1'
				);
				
				$categories = get_categories( $args );
				foreach ( $categories as $category ) {
				$selected = $category->slug === $filterByCategory ? 'selected' : '';
														
				echo '<option value="' . $category->slug . '" ' . $selected . '>' . $category->name . '</option>';
				} 
				?>
			</select>
	</div>
	<hr class="clearfix" />
	 <button type="submit" class="wp-block-search__button  ">Search this site</button>			
</form> 
<form role="search" method="get" action="<?php $_PHP_SELF ?>#searchform" id="searchform" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search">
	<label for="wp-block-search__input-1" class="wp-block-search__label">Search the site</label>
	<div class="wp-block-search__inside-wrapper ">
		<input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="cs_text_field" value="<?php echo $textField ?>" placeholder="Text Search..." >
	</div>
	<hr class="clearfix" />
	<label for="wp-block-search__input-2" class="wp-block-search__label">Category</label>
	<div class="wp-block-search__inside-wrapper ">
		<select name="cs_category_name">
			<option value="" >Select below:</option>
			<?php 
				$args = array(
					'exclude' => '1'
				);
				
				$categories = get_categories( $args );
				foreach ( $categories as $category ) {
				$selected = $category->slug === $filterByCategory ? 'selected' : '';
														
				echo '<option value="' . $category->slug . '" ' . $selected . '>' . $category->name . '</option>';
				} 
				?>
			</select>
	</div>
	<hr class="clearfix" />
	 <button type="submit" class="wp-block-search__button  ">Search this site</button>			
</form> 

4. set the query arguments from the string (parts/search/searchform-categories.php)

<?php 
$args = array(
	'post_type' => 'post', 
	'posts_per_page' => -1, 
	'post_status' => 'publish',
	'ignore_sticky_posts' => true
);

if (!empty ($textField) ) {
	$newArgs = array(
		's' => $textField,
	);
	$args = array_merge($args, $newArgs);
}
if (!empty ($filterByCategory) ) {
	$newArgs = array(
		'category_name'		=> $filterByCategory,
	);
	$args = array_merge($args, $newArgs);
}

5. the wp_query (parts/search/searchform-categories.php)

<?php 
$q = new WP_Query( $args );
?>
<?php if($q->have_posts()): ?>
    <?php while($q->have_posts()): $q->the_post() ?>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?>
		<?php 
            $categories = get_the_category();
			if ( ! empty( $categories ) ) {
				echo ' - ';
				echo esc_html( $categories[0]->name );	
			}
             ?></a><hr />
    <?php endwhile; ?>
<?php endif; ?>

Below is an example with a post category select field in addition to the free text field:



Results below…



theme.json naming (slugs) – Uncategorised
Slick slider block settings – Uncategorised
Naming conventions for wordpress files form Chat GPT – Uncategorised
Block Annimation Plugin – Uncategorised
Grid Classes – Uncategorised
GSAP parallax – Uncategorised
Cover Styles – Uncategorised
Block Class Helper (Plugin) – Uncategorised
– Uncategorised
block.json config – Uncategorised
Block Query Loop – Uncategorised
Cumulative Layout Shift – Uncategorised
Align cover content to bottom of cover area – Uncategorised
Cover block under the site header (not recomended) – Uncategorised
Using icons or images from theme folders – Uncategorised
Search page for an example race site – Uncategorised
Zoom on hover for columns block – Uncategorised
Parallax Cover Image with GSAP – Uncategorised
Sticky columns – Uncategorised
Taxonomy Widget – 3 ways – Uncategorised
Search & Replace between tags – VSCODE
only Reusable Blocks in acf relationship fields – Uncategorised
Get all terms and post terms – Uncategorised
Querry posts 2 ways with ACF field – Uncategorised
Theme media assets and SVG icons – Uncategorised
Icons – Uncategorised
FSE page template – Uncategorised
Gomo Aspect Square blocks – Uncategorised
Gomo parallax cover images – Uncategorised
Content Security Policy Manager – Uncategorised
ACF Relationship if published – Uncategorised
Oliver Twist – Book Reviews
Snow white – Book Reviews
Adventure of Huckleberry Finn – Book Reviews
Advanced Query Loop plugin – Uncategorised
Best Practice – Code styling and formatting – Uncategorised
Component Address details – Uncategorised
Simple GSAP text animation on scroll (2 ways) – Animation
Equal Height – jQuery – Code Snippets
Widgets in Gutenberg – issues – Uncategorised
Co Blocks Plugin – Plugins
Browser Shots – Plugins
Using the WP flexbox grid – Uncategorised
GSAP animated Separator – GSAP
Customizer settings – functions – Code Snippets
Image sizes – functions – Code Snippets
Additional Functions php – Functions
General Functions php – Functions
Match height for cards in a slick slider – jQuery – Code Snippets
Card links – jQuery – Code Snippets
Sticky Header – jQuery – Code Snippets
Accordion – jQuery – Code Snippets
Adding a down arrow to cover blocks – jQuery – Code Snippets
Adding iframe video through jQuery – Code Snippets
Blocks Animation Plugin – Code Snippets
Add class to external links – Code Snippets
Loading a template file from a sub folder
Helpers
Adding reusable blocks to headers, content or footers
GSAP animated separator
GSAP reveal image on scroll
GSAP Image with parallax effect
Check if a specific block is in the_content
Animation Effects (Block Transitions Plugin) – Animation
Query Vars
Mobile Column Classes with Flex basis
Timeline plugins
news 1 – Uncategorised
news 2 – Uncategorised
A test post – Uncategorised
Alignments and Margins
Order custom post type by title
Google Circle Videos
GSAP Pinning Hero Panels with Zoom on images.
GSAP parallax
gravity form on dark background
Anchor offset for sites with Fixed header
Cover page template
ACF Inner blocks example
svg animation
GSAP Pinning Hero Panels (like google store)
GSAP Pictures (like google store)
Scroll Progress Bar with gsap
GSAP ScrollTrigger
Block Lab Plugin
Cursor dots
Wave divider
SVG divider
Header test post – none – Uncategorised
Header test post – reusable block – Uncategorised
Header test post – custom – this is an extra long title just to test and see how it looks – Uncategorised
Entry Header test – custom 1 – Uncategorised
Entry Header
Social Menu (old)
Social Links with Yoast
Icon Test – Uncategorised
Flex Grid – Uncategorised
Float Grid
Adding page or post styles
Visibility SASS – Uncategorised
Buttons test – Uncategorised
Audio file
Content width Alignments
Video background
Color and Gradient Palettes
Block Patterns
Cover
Gradient text
Clouds Over Image
Animated Gradient Cover Background
Animated Text
Query Block Test – Uncategorised
Separator
Font family SASS for different webfonts
Featured Post – Uncategorised
Headers
Welcome to the Gutenberg Editor 2 – Uncategorised
Query (Cards, Testimonials etc)
Sitemaps in WP
PX vs REM vs EM etc
Nav menu classes
SVGs on WordPress and for icons
Browse Happy
Image loading and device sizes
Added security
Website Email through a verified sender – SendGrid
Gutenburg reusable blocks
Example Twitter feed – Uncategorised
Search and Filter Pro
Team
Full Screen Cover
Custom ACF blocks – Uncategorised
Custom Taxonomies
Browser Prefix SCSS Mixin
Animation
Welcome to the Gutenberg Editor – Uncategorised
Search and filter (basic) CPT
Back to Top Button
Forms
Icons
Testimonials
Accordion
Maps
Sliders
Widgets
Images, embeds and Galleries
Buttons
Colours
Kitchen Sink
Typography
Custom Post Types
Header test post – default – Uncategorised
Hello world! – Uncategorised
Social media basics – Social Media
Why you need an SSL in 2017 – Hosting
Website maintenance checklist – Backups
Google Merchant Center shopping advertisments – Advertising and Marketing
SEO basics – SEO
Slim Menu – Uncategorised
Imsanity – Uncategorised
Updating Staging to Live – WP engine and Gravity forms – Uncategorised
Accessability
Our favourite plugins – WordPress Plugins
Post Format: Image (Caption) – Uncategorised

Search the site


Address

123 Main Street
Town
City
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899

Email: ben@gomopress.com


Copyright 2023. Blah blah blah Company Limited