Support Home > Search > Customize Jetpack Inline Search

Customize Jetpack Inline Search

Let’s say you run a blog covering various topics like technology, travel, and food. With Inline Search, you have the power to tailor how your search function operates and appears to your visitors. Want to make it easy for users to narrow down their search results? You can utilize sidebar filters, which are conveniently accessible in the Customizer. Let’s say a visitor lands on your blog and wants to find articles specifically related to technology. With sidebar filters, they can easily select the ‘Technology’ category to refine their search. But if you’re looking to implement more intricate changes, like customizing search behavior based on user interactions, you can delve into the world of custom code. By adding custom code snippets, you can unlock advanced customization options, ensuring your search functionality perfectly aligns with your site’s unique needs and user expectations.

Note: These filters only apply to Inline search, not Instant Search.

Table of Contents

Add sidebar filters using the customizer

Search filters can be enabled through the widget’s 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 (e.g. page/post/product).

Jetpack Search Widget Settings
Screen Shot 2017-12-29 at 2.11.32 PM
Searching for “post” on a test site.

How to add sidebar filters 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' );

The code snippets below provide examples of some of the other filters included for Inline Search. 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.

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

Add WooCommerce product filters to the sidebar

For the 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' );
Jetpack 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.

Customizing the WordPress Search Query

Jetpack Search will only work with the main search WP_Query. If you want to modify the default WordPress search page, for example, including additional post types in search results, we don’t recommend creating a custom WP_Query as this will not work with Jetpack Search. Instead, we recommend using the pre_get_posts filter. By leveraging this filter, you can modify the main search WP_Query to include additional post types seamlessly. This ensures that Jetpack Search continues to operate smoothly while still allowing you to customize the WordPress search page to meet your specific needs.

Debug Search Query

Jetpack Search has built-in support for two plugins for examining the search query and search query results: Query Monitor and Debug Bar.

Once the plugin is enabled, on any search page you can open the tool and go to the Jetpack Search tab to see the queries that were run and their results. This valuable insight allows you to identify any potential issues, fine-tune search parameters if needed, and ensure a seamless search experience for your users.

How to exclude posts by tags/post_id/etc using a Search Algorithm Filter

The posts that are returned as a part of the search can be easily filtered by wrapping the main search query in a bool query that adds some filters.

Here is a simple case that excludes any post with the tag slug exclude_me:

function filter_jetpack_search_query( $es_query_args, $query ) {
	$es_query_args['query'] = array( 'bool' => array(
		'must' => array( $es_query_args['query'] ),
		'must_not' => array(
			array( 'term' => array( 'tag.slug' => 'exclude_me' ) )
		),
	) );
	return $es_query_args;
}
add_filter( 'jetpack_search_es_query_args', 'filter_jetpack_search_query', 10, 2 );

Filtering can be made significantly more complex. Here we exclude: post_ids 3, 4, and 5; the category exclude_me; and the tag exclude_me

function filter_jetpack_search_query( $es_query_args, $query ) {
	$es_query_args['query'] = array( 'bool' => array(
		'must' => array( $es_query_args['query'] ),
		'must_not' => array(
			array( 'terms' => array( 'post_id' => array( 3, 4, 5 ) ) ),
			array( 'term' => array( 'category.slug' => 'exclude_me' ) ),
			array( 'term' => array( 'tag.slug' => 'exclude_me' ) ),
		),
	) );
	return $es_query_args;
}
add_filter( 'jetpack_search_es_query_args', 'filter_jetpack_search_query', 10, 2 );

Search within a single category with an Algorithm Filter

Sometimes you may only want your search results to be within a single category. Similar to excluding posts, we wrap the main query in a bool query. In this case, we will only search for posts that have the category include_me1 or include_me2.

function filter_jetpack_search_query( $es_query_args, $query ) {
	$es_query_args['query'] = array( 'bool' => array(
		'must' => array( $es_query_args['query'] ),
		'filter' => array(
			array( 'terms' => array( 'category.slug' => array( 'include_me1', 'include_me2' ) ) )
		),
	) );
	return $es_query_args;
}
add_filter( 'jetpack_search_es_query_args', 'filter_jetpack_search_query', 10, 2 );

Searching custom taxonomy with an algorithm

The search tool doesn’t automatically look through custom categories (taxonomies). However, you can tell it to include them in the search. Here’s how you can do that using an example: product_tag:

function set_jetpack_search_fields( $query_args ) {
	$query_args['query_fields'] = array(
		'title.en^2',
		'content.en',
		'excerpt.en',
		'tag.name',
		'category.name',
		'taxonomy.product_tag.name',
	);

	return $query_args;
}
add_filter( 'jetpack_search_es_wp_query_args', 'set_jetpack_search_fields', 10, 1 );

Note that this is boosting the title to have twice the weight of the other fields. This method can also be used to adjust your boosting.

Currently, the search index does not have any view counts available, but you can boost based on the number of comments which often works well:

function boost_jetpack_search_query( $es_query_args, $query ) {
	$es_query_args['query'] = array(
		'function_score' => array(
			'query'     => $es_query_args['query'],
			'functions' => array(
				array(
					'field_value_factor' => array(
						'field'    => 'comment_count',
						'factor'   => 5,
						'modifier' => 'log2p',
						'missing'  => 1,
					),
				),
			),
		),
	);
	return $es_query_args;
}
add_filter( 'jetpack_search_es_query_args', 'boost_jetpack_search_query', 10, 2 );

If you have Jetpack Likes enabled, then you could also boost with a combination of both likes and comments:

function boost_jetpack_search_query( $es_query_args, $query ) {
	$es_query_args['query'] = array(
		'function_score' => array(
			'query'     => $es_query_args['query'],
			'functions' => array(
				array(
					'field_value_factor' => array(
						'field'    => 'comment_count',
						'factor'   => 5,
						'modifier' => 'log2p',
						'missing'  => 1,
					),
				),
				array(
					'field_value_factor' => array(
						'field'    => 'like_count',
						'factor'   => 5,
						'modifier' => 'log2p',
						'missing'  => 1,
					),
				),
			),
		),
	);
	return $es_query_args;
}
add_filter( 'jetpack_search_es_query_args', 'boost_jetpack_search_query', 10, 2 );

Boosting posts with images using a Search Algorithm

For some sites, the best posts are the ones with the most images or galleries in them. We maintain two fields with a count of the number of images and galleries that can be used for boosting.

function boost_jetpack_search_query( $es_query_args, $query ) {
	$es_query_args['query'] = array(
		'function_score' => array(
			'query' => $es_query_args['query'],
			'functions' => array(
				array(
					'field_value_factor' => array(
						'field'    => 'has.image',
						'factor'   => 5,
						'modifier' => 'log2p',
						'missing'  => 1,
					),
				),
				array(
					'field_value_factor' => array(
						'field'    => 'has.gallery',
						'factor'   => 5,
						'modifier' => 'log2p',
						'missing'  => 1,
					),
				),
			),
		),
	);
	return $es_query_args;
}
add_filter( 'jetpack_search_es_query_args', 'boost_jetpack_search_query', 10, 2 );

How to boost pages over posts with a Search Algorithm

Matching any filter can be used as a way to boost search results. Fields such as post_type and post_format are often good choices for boosting certain types of content over others:

function boost_jetpack_search_query( $es_query_args, $query ) {
	$es_query_args['query'] = array(
		'function_score' => array(
			'query'     => $es_query_args['query'],
			'functions' => array(
				array(
					'filter' => array(
						'term' => array( 'post_type' => 'page' )
					),
					'weight' => 10,
				),
			),
		),
	);
	return $es_query_args;
}
add_filter( 'jetpack_search_es_query_args', 'boost_jetpack_search_query', 10, 2 );

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

  • Table Of Contents

  • Contact Us

    Need more help? Feel free to contact us.