Integrations / Platforms / WordPress (deprecated) / Build a Search UI
This integration and its documentation are deprecated and no longer supported.

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:

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

    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:

    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:

    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:

    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.

    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.

Did you find this page helpful?