Customize Jetpack Instant Search

Jetpack Search and Jetpack Search plugin use an overlay to display all search results when the instant search experience option is enabled. There are configuration options for that overlay available in the Customizer.

You can use the Customize Jetpack Search page or the WordPress theme customizer to configure the colors and styles of the Instant Search results overlay to 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 sections to learn how to customize Instant Search in different ways.

Using the Customize Jetpack Search Page

To navigate to the Customize Jetpack Search page:

1. With Jetpack and/or the Jetpack Search plugin installed and active, go to WP Admin → Jetpack → Search.
2. Click Customize search results. See Starting with Jetpack Search plugin for more information.

You can also get to the Customize Jetpack Search page by going to WP Admin → Jetpack → Settings, selecting the Performance tab and clicking Customize your Search experience. For more information, please see Search via the Jetpack plugin.

To the right of the Customize Jetpack Search page, you will see a sidebar that shows you all the available customization options.

Styling: Light and Dark Mode

This allows you to set the display mode for the search results overlay to light or dark mode. In light mode, dark or black text is shown on a white or light background, while in dark mode, white or light-colored text is displayed on a dark or black background.

Styling: Result Format

This allows you to choose the format of the search results:

• Minimal: This shows just the title, slug, and excerpt or product description (for WooCommerce stores).
• Expanded: This shows images along with the search results.
• Product: This shows search results in a grid format rather than linearly and is best for WooCommerce stores.

Styling: Highlight for Search Terms

This allows you to choose the highlight color for search terms as they appear in search results (in the titles and excerpts or descriptions). There are a good number of colors to select from.

Setting: Default Sort

This setting allows you to select the default sort order for the search results:

• Relevance: This is the recommended and default choice. When selected, Jetpack will show results in the order of most relevant to the search term to least relevant.
• Newest first: When selected, Jetpack will sort the results by date and show the newest records first.
• Oldest first: When selected, Jetpack will sort the results by date and show the oldest records first.

Setting: Overlay Trigger

This setting allows you to select your preferred trigger for the search results overlay:

• Open when user submits the form: This is the recommended and default choice. When selected, the overlay shows up when the user submits the search form by either clicking Search or tapping the Enter or return key on their keyboard; in other words, when the user has finished entering their search term or query.
• Open when user starts typing: When selected, the overlay shows up as soon as the user starts typing their search term or query, and the results get updated as the user continues to type.

Setting: Excluded Post Types

This setting allows you to exclude records that belong to one or more post types from the search results. This might be useful when you have private or restricted post types with records you don’t want users to find.

Additional Settings

The additional settings include:

• Show sort selector: This is enabled by default. You can toggle this off to hide the sort selector from the search results overlay if you don’t want users to select how they want the results shown to be ordered.
• Enable infinite scroll: This is also enabled by default. When enabled, as the user scrolls down to the end of the visible list of search results, more results are loaded and displayed. You can toggle this off to disable that behavior.

Configure Instant Search from the Customizer

To navigate to the Customizing Jetpack Search section of the customizer:

1. With Jetpack and/or the Jetpack Search plugin installed and active, go to WP Admin → Appearance → Customize.
2. Click Jetpack Search.

Once there, you will see the same customization options described above:

You can also get to the Customizing Jetpack Search section of the customizer from the Customize Jetpack Search page described above. Select the Jetpack Search tab and click Configure in the Customizer.

You can set the following from the Customizer:

• Theme: This determines whether your search overlay is in light or dark mode.
• Result Format: This determines how the search results look.
• Default Sort: This determines the initial sort for your search results.
• Search Input Overlay Trigger: This determines when your overlay should appear.
• Excluded Post Types: This lets you choose post types to exclude from search results. You must leave at least one post type unchecked.
• Highlight Search Terms: This lets you choose a color to highlight matching search terms.

Configuring Filters

When you enable Jetpack Search, a widget area called Jetpack Search Sidebar will automatically be added to your site. This widget area controls what appears in the right sidebar on the search results overlay. The sidebar comes preloaded with filters that you can remove and configure as you like.

You can configure the filters that will be available to your users on both desktop and mobile searches. You can adjust these filters by going to Customizer → Widgets → Jetpack Search Sidebar.

If you add filters in a different widget area outside of the Jetpack Search Sidebar, 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

If you remove all the widgets from the Jetpack Search Sidebar widget area, the right sidebar will disappear from the search results overlay and your results will span the full width of the overlay.

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 (if available) or block 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 class="header__search-btn jetpack-search-filter__link" href="#">
	<svg class="gridicon gridicons-search" height="24" width="24" 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 for the a HTML tag to jetpack-search-filter__link and the href attribute to #
• To filter by a taxonomy, the link attributes are data-filter-type, data-taxonomy, and data-val. For example, 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 the product post type:

<a href="#" class="jetpack-search-filter__link" data-filter-type="post_types" data-val="product" >Search Products</a>

Note: Custom filter links will only work if that taxonomy was configured as a filter in a Jetpack Search widget or the Jetpack Search Sidebar.