Simple search form with results page
To add a Select dropdown field to your text search you can modify the form like this:
- add query vars
- sanitize the query string
- make the form
- set the query arguments from the string
- 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>
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…
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 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
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 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
Markup: HTML Tags and Formatting – Uncategorised
Markup: Image Alignment – Uncategorised
Markup: Text Alignment – Uncategorised
Markup: Title With Special Characters – Uncategorised
Markup: Title With Markup – Uncategorised
Template: Featured Image (Vertical) – Uncategorised
Template: Featured Image (Horizontal) – Uncategorised
Template: More Tag – Uncategorised
Template: Excerpt (Defined) – Uncategorised
Template: Excerpt (Generated) – Uncategorised
Template: Paginated – Uncategorised
Template: Sticky – Uncategorised
Protected: Template: Password Protected (the password is “enter”) – Uncategorised
Template: Comments – Uncategorised
Template: Comments Disabled – Uncategorised
Template: Pingbacks And Trackbacks – Uncategorised
Media: Twitter Embeds – Uncategorised
Post Format: Standard – Uncategorised
Post Format: Gallery – Uncategorised
Post Format: Gallery (Tiled) – Uncategorised
Post Format: Image – Uncategorised
Post Format: Image (Caption) – Uncategorised
Post Format: Image (Linked) – Uncategorised
Post Format: Audio – Uncategorised
Post Format: Video (WordPress.tv) – Uncategorised
Post Format: Video (VideoPress) – Uncategorised
Post Format: Video (YouTube) – Uncategorised
Post Format: Aside – Uncategorised
Post Format: Status – Uncategorised
Post Format: Link – Uncategorised
Post Format: Quote – Uncategorised
Post Format: Chat – Uncategorised
Antidisestablishmentarianism – Uncategorised
Edge Case: No Content – Uncategorised
Edge Case: Many Categories – Uncategorised
Edge Case: Many Tags – Uncategorised
Edge Case: Nested And Mixed Lists – Uncategorised