Build a Search UI

Algolia doesn’t provide support for WordPress or any WordPress plugin.

If you didn’t index your WordPress content with Algolia yet, see Setting up Algolia.

The easiest way to add a search UI to your WordPress website is by adding InstantSearch.js.

InstantSearch is also available for frontend frameworks.

Include InstantSearch in your theme

1. Download the following libraries and save them in the themes/<your_theme>/js/vendor/ directory:

   • instantsearch.production.min.js
   • algoliasearch-lite.umd.js
   • Optional: satellite-min.css

2. Register both assets in your theme’s functions.php file.

   PHP

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   function algolia_load_assets() {
     $clientPath = '/js/vendor/algoliasearch-lite.umd.js';
     $instantSearchPath = '/js/vendor/instantsearch.production.min.js';
   
     // Create a version number based on the last time the file was modified
     $clientVersion = date("ymd-Gis", filemtime( get_template_directory() . $clientPath));
     $instantSearchVersion = date("ymd-Gis", filemtime( get_template_directory() . $instantSearchPath));
   
     wp_enqueue_script('algolia-client', get_template_directory_uri() . $clientPath, array(), $clientVersion, true);
     wp_enqueue_script('algolia-instant-search', get_template_directory_uri() . $instantSearchPath, array('algolia-client'), $instantSearchVersion, true);
   
     // Optional: default styles for InstantSearch
     wp_enqueue_style('algolia-theme', get_template_directory_uri() . '/satellite-min.css');
   }
   add_action('wp_enqueue_scripts', 'algolia_load_assets');
   

Add HTML containers

1. Add a container for the search box to the header of your theme:

   HTML

   Copy

   1
   <div id="searchbox"></div>
   

2. Add container elements for the search results and tags to the page where you want to display search results:

   HTML

   Copy

   1
   2
   <div id="hits"></div>
   <div id="tags-list"></div>
   

Set up InstantSearch

1. Create a new file js/algolia-search.js and add it to the algolia_load_assets function:

   PHP

   Copy

   1
   2
   3
   4
   5
   6
   7
   function algolia_load_assets() {
     // ...
   
     $algoliaPath = '/js/algolia-search.js';
     $algoliaVersion = date("ymd-Gis", filemtime(get_template_directory() . $algoliaPath));
     wp_enqueue_script('algolia-search', get_template_directory_uri() . $algoliaPath, array('algolia-instant-search'), $algoliaVersion, true);
   }
   

2. Add the following code to the js/algolia-search.js file. The example assumes that the records in your Algolia index have title, content and tags attributes.

   To make the search work, you must declare these attributes as searchableAttributes. The tags attribute should be included in the attributesForFaceting.

   JavaScript

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   const searchClient = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");
   
   const search = instantsearch({
     indexName: "YourIndexName",
     searchClient,
     searchFunction(helper) {
       // Ensure we only trigger a search when there's a query
       if (helper.state.query) {
         helper.search();
       }
     },
   });
   
   search.addWidgets([
     instantsearch.widgets.searchBox({
       container: "#searchbox",
     }),
   
     instantsearch.widgets.refinementList({
       container: "#tags-list",
       attribute: "tags",
       limit: 5,
       showMore: true,
     }),
   
     instantsearch.widgets.hits({
       container: "#hits",
       templates: {
         item: `
           <article>
             <a href="{{ url }}">
               <strong>
                 {{#helpers.highlight}}
                   { "attribute": "title", "highlightedTagName": "mark" }
                 {{/helpers.highlight}}
               </strong>
             </a>
             {{#content}}
               <p>{{#helpers.snippet}}{ "attribute": "content", "highlightedTagName": "mark" }{{/helpers.snippet}}</p>
             {{/content}}
          </article>
         `,
       },
     }),
   ]);
   
   search.start();
   

Send click and conversion events

Complete your Algolia integration by sending click and conversion events. To learn more about events, see Get started with events.