Customize Search

Like the other Jetpack modules, the Search module includes filters allowing you to customize how Search works and is displayed.

The code snippets below provide examples of some of the filters included in the module. You can add these code snippets to a functionality plugin, or to your theme’s functions.php file.

You can also check Jetpack’s source code to discover more filters.

Please note that these snippets are provided as a convenience and our support team does not offer assistance on customizing them further.

• • Sidebar Filters: add using the customizer
  • Sidebar Filters: add using code
  • WooCommerce Filters: add product filters to the sidebar
  • Adding filters to a template without using the sidebar widget

In order for these filters to appear, you must add the “Search Filters (Jetpack)” widget to your sidebar or other widget area.

Sidebar Filters: Add using the customizer

Search filters can be enabled through the widgets settings or in the customizer. First add the Search (Jetpack) widget to your sidebar, then run a search so that you will be able to customize the results. The filters are only displayed when on a search results page, but the search box (if enabled) in the widget will get displayed on all pages. Also, the filters are only displayed if the current search results would have more than one filter.

Below is an example configuration where we have three types of filters: categories, the month the post was published, and what type of post (eg page/post/product).

Search Widget Settings

Searching for “post” on a test site.

Sidebar Filters: Add using code

You can also enable sidebar filters on your search results page by adding the Search widget and then customizing them with code. Here is a simple example:

function jp_search_setup_filters() {
	if ( class_exists( 'Jetpack_Search' ) ) {
		Jetpack_Search::instance()->set_filters(array(
			'Categories' => array(
				'type'     => 'taxonomy',
				'taxonomy' => 'category',
				'count'    => 10,
			),
			'Tags' => array(
				'type'     => 'taxonomy',
				'taxonomy' => 'post_tag',
				'count'    => 10,
			),
			'Month' => array(
				'type'     => 'date_histogram',
				'field'    => 'post_date',
				'interval' => 'month',
				'count'    => 10,
			),
		) );
	} else {
		error_log("Jetpack search does not exist");
	}
}

add_action( 'init', 'jp_search_setup_filters' );

WooCommerce Filters: add product filters to the sidebar

For filtered search of WooCommerce products we can do something similar to the other coding example:

function woo_search_setup_filters() {
	if ( class_exists( 'Jetpack_Search' ) ) {
		Jetpack_Search::instance()->set_filters(array(
			'Categories' => array(
				'type'     => 'taxonomy',
				'taxonomy' => 'product_cat',
				'count'    => 10,
			),
		) );
	} else {
		error_log("Jetpack search does not exist");
	}
}

add_action( 'init', 'woo_search_setup_filters' );

Search Filters in action on a WooCommerce site.

Adding filters to the page without using a widget

If you want to add a Filters section to your theme, you can use the Jetpack_Search_Template_Tags::render_available_filters() template tag in the search.php theme template like this:

<?php if ( class_exists('Jetpack_Search_Template_Tags' ) ): ?>
<h2>Filter posts</h2>
<?php Jetpack_Search_Template_Tags::render_available_filters(); ?>
<?php endif; ?>

Note that for any filters to appear, you need to have programmatically defined custom filters as per the examples above.

Elasticsearch is a trademark of Elasticsearch BV, registered in the U.S. and in other countries.