Jetpack Search is a paid feature of the free Jetpack plugin. If you don’t yet have Jetpack installed, you can install it while purchasing Search.
Search is active and pre-configured as soon as you purchase the product. At the end of the purchase you will be brought to your site’s Customizer to verify that it is working as expected.
Customizing Colors and Search Interactions
Search uses 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.
From here you can also adjust how the search overlay gets triggered and how the search results are displayed.
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 (Jetpack) widget 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
- Categories
- Tags
- Custom Taxonomies (only a subset are supported)
- Dates: by year or month
Adding a Search Box
The Jetpack Search overlay should get triggered by most any search box that is on your site’s pages.
If your theme has a sidebar then the easiest way to add 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__linkand 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>