
WordPress search form helps the users to search for the content on the website. Genesis extends the WordPress search form to add features like accessibility and other customization that enhances the user’s search experience.
There are times and use cases when genesis search filter comes in handy to modify the behavior of default search form. For instances, one of my clients recently wanted to use category specific search box on the archives page; so that the site users get the ability to search category specific articles. Here’s the tutorial for the same.
Add the following code to your functions.php to enable the category specific search on the category archives. This will help the site users to search within the context when they’re viewing a category listings (archive) page.
Tweaking the Genesis search form
To enable the category specific search, you need to use the genesis_search_form
filter and include category search parameters in the search form for category archive pages.
add_filter( 'genesis_search_form' , 'bt_search_in_category_form' , 10, 4 ); |
function bt_search_in_category_form( $form , $text , $button , $label ) { |
$current_cat_id = get_query_var( 'cat' ); |
$current_cat_obj = get_category( $current_cat_id ); |
$current_cat_name = $current_cat_obj ->slug; |
$text = get_search_query() ? apply_filters( 'the_search_query' , get_search_query() ) : apply_filters( 'genesis_search_text' , __( 'Search this website' , 'genesis' ) . ' …' ); |
$button = apply_filters( 'genesis_search_button_text' , esc_attr__( 'Search' , 'genesis' ) ); |
$label = apply_filters( 'genesis_search_form_label' , '' ); |
$value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value' ; |
$onfocus = "if ('" . esc_js( $text ) . "' === this.value) {this.value = '';}" ; |
$onblur = "if ('' === this.value) {this.value = '" . esc_js( $text ) . "';}" ; |
$form = sprintf( '<form %s>' , genesis_attr( 'search-form' ) ); |
if ( genesis_a11y( 'search-form' ) ) { |
$label = apply_filters( 'genesis_search_text' , __( 'Search this website' , 'genesis' ) ); |
$form_id = uniqid( 'searchform-' ); |
'<meta itemprop="target" content="%s"/><label class="search-form-label screen-reader-text" for="%s">%s</label><input itemprop="query-input" type="search" name="s" id="%s" %s="%s" /><input type="hidden" name="category_name" id="category_name" value="' . $current_cat_name . '" /><input type="submit" value="%s" /></form>' , |
'%s<meta itemprop="target" content="%s"/><input itemprop="query-input" type="search" name="s" %s="%s" /><input type="hidden" name="category_name" id="category_name" value="' . $current_cat_name . '" /><input type="submit" value="%s" /></form>' , |
'<form method="get" class="searchform search-form" action="%s" role="search" >%s<input type="text" value="%s" name="s" class="s search-input" onfocus="%s" onblur="%s" /><input type="hidden" name="category_name" id="category_name" value="' . $current_cat_name . '" /><input type="submit" class="searchsubmit search-submit" value="%s" /></form>' , |
Once you’ve added this code to your functions.php, the search results page will show the results from specific category only. Ain’t that cool!
How will your visitors know that you are using category specific search on your website?
After configuring the search form to perform category-specific search on category archives, consider changing the default placeholder text for the search forms on category archives pages. This will act as an indicator for the site visitors.
Add the following code to your functions.php to change the default placeholder text for search form:
add_filter( 'genesis_search_text' , 'bt_cat_searchform_text' , 20 ); |
function bt_cat_searchform_text() { |
return __( 'Search this Category' ); |
Do not edit your theme’s core files directly. If your theme does not offer a separate functions.php to tweak the site functionality, you use WP Designer plugin which allows you to add custom functionality and CSS to your theme.