Customizing Jetpack Search

Jetpack Search and Jetpack Search plugin use an overlay to display all search results. There are a number of configuration options for that overlay available in the Customizer.

Use the “Jetpack Search” top-level menu to configure the colors and styles in the overlay so that they better match your theme.

You can also adjust how your search results are sorted, which post types to exclude from search results, and several additional display settings. Take a look at the following video to learn how to customize Search in different ways.

Configuring Filters

A new sidebar and widget are added to the site as soon as you complete the plan purchase. It even comes complete with preloaded filter types that you can remove and configure as you like.

The new Jetpack Search Sidebar will be displayed on the results overlay once you start searching for something.

You can configure the filters that will be available to your users on both desktop and mobile searches. You can adjust these filters through the Search block settings in the Customizer by going to Customizer > Widgets > Jetpack Search and Customizer > Widgets > Sidebar (if your theme has a sidebar). Each widget is completely independent so they can use different filters in each.

Any filters you configure will open the search overlay automatically no matter where the widget lives.

The available filters are:

• Post types
• Custom Taxonomies (only a subset are supported)
  • Categories
  • Tags
  • Formats
  • Product categories
  • Product tags
  • Product shipping classes
• Date
  • Year
  • Month

Adding a Search Box

The Jetpack Search overlay should get triggered by almost any search box that is on your site’s pages.

If your theme has a sidebar then the easiest way to add a search box is to add the Jetpack Search widget into the sidebar area from Customizer > Widgets > Sidebar. This will let you also configure and display filters so that visitors can quickly discover and browse through content on your site.

If your theme does not have a sidebar or a built-in search box then you can add it by creating a child theme and then adding code to your header that calls get_search_form().

Some themes will have a built-in search box that is not compatible with Jetpack Search. If this is the case for you there are a few things you can try.

Adding a Search Button

Sometimes all you need is a search button on your site to open the overlay. The search button on the top of this page uses this HTML:

<a href="#" class="wp-button jetpack-search-filter__link" style="width: 50px;height:46px; border-color: #c8d7e1; border-style: solid; border-width: 1px 1px 2px;">
	<svg style="fill: #2e4453;" class="gridicon gridicons-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M21 19l-5.154-5.154C16.574 12.742 17 11.42 17 10c0-3.866-3.134-7-7-7s-7 3.134-7 7 3.134 7 7 7c1.42 0 2.742-.426 3.846-1.154L19 21l2-2zM5 10c0-2.757 2.243-5 5-5s5 2.243 5 5-2.243 5-5 5-5-2.243-5-5z"></path></g></svg>
</a>

Opening the Search Overlay from a link

Any link on the page can trigger opening the search overlay as well as applying whatever filters you desire. The link needs a few special attributes to work:

• Set the class to jetpack-search-filter__link and href to #
• To filter by a taxonomy the link attributes are: data-filter-type="taxonomy" data-taxonomy="category" data-val="performance"
• To filter by month the link attributes are: data-filter-type="month_post_date" data-val="2020-01-01"
• To filter by year the link attributes are: data-filter-type="year_post_date" data-val="2020-01-01"
• To filter by post type the link attributes are: data-filter-type="post_type" data-val="jetpack_support"

Here is an example to filter by a post type:

<a href="#" class="jetpack-search-filter__link" data-filter-type="post_types" data-val="jetpack_support" >Jetpack Support</a>

Note: custom filter links will only work if that taxonomy was configured as a filter in one of the Jetpack Search widgets.