Category Specific Search on Category Archives in WordPress

Search form in WordPress comes in real handy when you’d like to allow users to navigate through your website content. If the site structure is not so intuitive or even otherwise, when a user wants to quickly look for something specific on your website, the search form is really helpful.

For developers, there’s whole bunch of awesomeness with the default search form because it has plenty of scope for customization via hooks and filters.

In this tutorial, we will tweak the default search form in WordPress to fetch search results specific to the category on a category archives page. This way, the visitors on your site will be able to make a category specific search on a category archive page such that the results are displayed from within that particular category.

Customizing the default search behavior

We will make use of the get_search_form filter to achieve the desired results. Tweaking the search form to restrict the results specific to a particular category involves passing additional parameters to the search form. Add the following code to your functions.php to implement the category specific search through search form.

<?php
add_filter( 'get_search_form', 'cr_category_specific_search', 10, 4 );
function cr_category_specific_search( $form, $text, $button, $label ) {
	// Only run on category archives
	if ( ! is_category() )
		return $form;

	// Get the current category from query variable
	$category_id = get_query_var( 'cat' );
	$category_data = get_category( $category_id );
	$category = $category_data->slug;

	// Get search query; allow users to filter the placeholder text when idle
	$text = get_search_query() ? apply_filters( 'the_search_query', get_search_query() ) : apply_filters( 'cr_search_text', __( 'Search this website', 'cloudredux' ) . ' &#x02026;' );

	// 'Submit' button label
	$button = apply_filters( 'cr_search_button_text', esc_attr__( 'Search', 'cloudredux' ) );

	// Input label
	$label = apply_filters( 'cr_search_input_label', '' );    
	$value_or_placeholder = ( get_search_query() == '' ) ? 'placeholder' : 'value';

	// Default behaviour for form inputs
	$onfocus = "if ('" . esc_js( $text ) . "' === this.value) {this.value = '';}";
	$onblur  = "if ('' === this.value) {this.value = '" . esc_js( $text ) . "';}";

	// Search form
	$form  = sprintf( '<form class="search-form" itemprop="potentialAction" itemscope="" itemtype="http://schema.org/SearchAction" method="get" action="%s" role="search">', home_url( '/' ) );

	if ( '' == $label )  {
		$label = apply_filters( 'cr_search_text', __( 'Search this website', 'cloudredux' ) );
	}    

	$form_id = uniqid( 'searchform-' );

	// Add category slug as a hidden field to implement category specific search
	$form .= sprintf(
		'<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="%s" /><input type="submit" value="%s" /></form>',
		home_url( '/?s={s}' ),
		esc_attr( $form_id ),
		esc_html( $label ),
		esc_attr( $form_id ),
		$value_or_placeholder,
		esc_attr( $text ),
		esc_attr( $category ),
		esc_attr( $button )
	);

	return $form;
}

Displaying the category specific search form to visitors

We have already configured our search form to display category specific search results. Just to let the users know that they have the ninja ability to search within a category on our site, we may want to add a search form to category archive pages and indicate by modifying the placeholder text to guide the users. Add the following code to your functions.php to display a search form on category archive pages.

add_filter( 'cr_search_text', 'cr_category_archive_search_form_text', 20 );
function cr_category_archive_search_form_text( $search_text ) {
	if ( ! is_category() ) {
		return $search_text;
	}

	return __( 'Search this Category', 'cloudredux' );
}