Support Home > Search > Customize Jetpack Instant Search

Customize Jetpack Instant Search

Jetpack Search uses an overlay to display all search results when the Instant search experience option is enabled. This guide demonstrates how to customize this overlay.

You can customize the look and feel of the Search results overlay to ensure it fits in well with 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.

Jetpack Instant Search is used on our support page, you can give it a try at https://jetpack.com/support/.

Install and activate Jetpack or the standalone Jetpack Search plugin on your site and sign up for a Jetpack Search plan. This support guide provides more information about how to do that.

To set up the Jetpack Instant Search options:

  1. From WP Admin, navigate to Jetpack → Search.
  2. Toggle on the option Enable instant search experience.
  3. Then click Customize search results.
  4. On the right sidebar, make sure the Options tab is selected

The Options tab will display all the customization options available, described in the next section.

Overview of the Jetpack Instant Search Options

You can adjust the layout and color schemes as follows:

  • Light and Dark modes: Use this 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, the white or light-colored text is displayed on a dark or black background.
  • Result format: Choose the format of the search results:
    • Minimal – Displays the result title along with either:
      • The matching content or product description (if a keyword is found there), or,
      • An excerpt if the match was found in another field (e.g., custom meta field or title).
    • Expanded – Same as Minimal, but includes an image thumbnail (if available) and a navigation path (breadcrumbs).
    • Product – Displays results in a grid format, ideal for WooCommerce stores. Each result includes the product title, image, and price (if available). This format does not display keyword highlights.
  • Highlight for search terms:
    • You can select the highlight color for search terms as they appear in search results (in the titles, excerpts, or descriptions). You can pick from displayed color options or use the color palette to choose a custom color.
    • Search terms are automatically highlighted in Minimal and Expanded result formats. This behavior cannot be disabled, but you can use jetpack_instant_search_options filter to select which fields should be highlighted. See this example for more details.

Jetpack Search settings

These options help you fine-tune the search results as the user looks for information on your site.

Default sort

In the drop-down options, choose your preferred 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 latest records first.
  • Oldest first: When selected, Jetpack will sort the results by date and show the oldest records first.

Overlay trigger

In the drop-down options, pick your preferred trigger for the search results overlay:

  • Open when user submits the form: This is the 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, that is 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.

There’s also the option to Open overlay from filter links which is toggled on by default. When enabled, the search results overlay opens when any search filters are used as Jetpack Search takes over. If you have custom filters on your Search results page, you may want to turn this off, and do not want Jetpack’s Instant Search to conflict with that. You can read more on how to set up filters in this section.

Excluded post types

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

Additional Jetpack Search 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 enabled by default. When active, more results are loaded and displayed as the user scrolls down to the end of the visible list of search results. You can toggle this off to disable that behavior.
  • Show post date: This is turned on by default and shows or hides the publish date for each post or record in the search results.

Customize Jetpack Search results with the Customizer

This is relevant if your site is using an older non-block theme that doesn’t support full site editing and instead still uses the older WordPress Theme Customizer – as opposed to the newer Site Editor to provide customization settings.

With a non-block theme, you can still access the Search options through Jetpack → Search as described in the earlier section. But, if you prefer using the Customizer to configure the appearance of your site, here’s how to navigate to the Jetpack Search section of the Customizer:

  1. From your WP Admin dashboard, go to Appearance → Customize.
  2. Click on the section Jetpack Search.

The Jetpack Search section in the Customizer will display all the options described in the previous section for you to configure the appearance of the Instant Search overlay.

Configure Jetpack Search filters

Thanks to the filters, visitors can quickly discover and browse through content on your site. This feature is available on desktop and mobile searches.

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 Instant Search results overlay.

The Jetpack Search Sidebar comes preloaded with filters that you can remove and configure as you like. To adjust these filters:

  1. Go to Appearance → Widgets.
  2. Click Jetpack Search Sidebar to expand the widget area if it is collapsed.
  3. Select the Jetpack Search widget block to bring up the different filters.

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. This can be disabled by toggling off the Open overlay from filter links setting as described in the previous section.

The available filters are:

  • Post types
  • Author
  • Blog
  • Custom Taxonomies (only a subset is 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, all the filter options will disappear from the right sidebar of the search results overlay.

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

If you use a block theme with Site Editor support, you can add a search form to any part of your site that your theme allows you to edit with WordPress full site editing capabilities. For example, to add a search box to your navigation menu at the top of your site:

  1. Proceed to Appearance → Editor.
  2. Select Navigation from the menu on the left sidebar.
  3. Click the pencil icon to edit your site’s navigation menu.
  4. Use the plus (+) icon to look for and add the Search block.

If your theme doesn’t support the Site Editor and has a sidebar, you can add a search form to the sidebar:

  1. Go to Appearance → Widgets.
  2. Expand the Sidebar or Blog Sidebar widget area by clicking on it or the arrow icon next to the title.
  3. Add the Jetpack Search widget block into the sidebar area. You can also configure and add filters from here.

If your theme does not have a sidebar or a built-in search box, then you can also 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.

Open the overlay with 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>

Any link on the page can trigger opening the search overlay and 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 of filtering 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.

Still need help?

Please contact support. We’re happy to advise.

  • Table Of Contents

  • Contact Us

    Need more help? Feel free to contact us.