How it Works

There are a few different parts working together to create the Algolia search experience on the site:

Custom Plugin

We have built a custom WordPress Algolia plugin to manage the “backend” administration of Algolia such as post indexing and deletion. This plugin can be found in the site repo under plugins/algolia-wordpress-integration.

This plugin…

• Saves posts to the appropriate Algolia index when they are published or updated in WordPress.
• Deletes posts from the appropriate Algolia index when they are deleted in WordPress.
• Exposes CLI commands to manage indices from the command line. See Using the CLI.

Splitting posts into multiple records

One optimization strategy that the plugin uses is splitting up pages with longer content into smaller record “chunks” to limit the size of each record and improve performance. Therefore you might see multiple records for the same post but each with a different content field. We set the distinct setting to true on each index so that these records are de-duplicated or “grouped” together.

You can learn more about this strategy here.

AlgoliaManager

AlgoliaManager.php is a file that lives within the theme code and implements filters/functions that the algolia-wordpress-integration plugin requires. Everything that is used to customize the search experience to the Cornell AAP site lives in this file.

This file tells the Algolia plugin…

• Configuration details like the application ID and API keys
• Which index to use for each post type
• What fields to serialize for each post

InstantSearch

InstantSearch.js is an open source UI library for Vanilla JS that lets you build an Algolia-powered frontend search interface. We are using it in combination with Alpine.js to build out what you see on every search page.

The markup for each search page lives at its corresponding Twig template:

Page	Twig Template
Global Search	search.twig
News Index	page-news-archive.twig
People Directory	archive-person.twig
Upcoming Events Index	archive-event.twig
Past Events Index	archive-event.twig
Student Work Index	page-student-work-index.twig
Faculty Work Index	archive-faculty-work.twig

Each of these templates use InstantSearch widgets which are essentially UI components that we can customize and add to our search pages (ex. the search input box, list of search results, filters, and pagination are all different “widgets”). The JS code that initializes InstantSearch and registers all the widgets lives at static/js/components/algolia/index.js.

We implemented a custom Alpine directive, x-algolia, so that our Twig template can communicate with our JS and tell it where to place each widget.

Here is an example of how a basic search page is implemented:

<div class="search-page" x-algolia="{{env}}_global_search">
    
    <!-- Search input -->
    <div x-algolia:input="{ label: 'Search' }"></div>
    
    <!-- Filters -->
    <div class="search-filter">
	<h3 class="search-filter__label">Departments & Center</h3>
	<div x-algolia:department></div>
    </div>
    <div class="search-filter">
        <h3 class="search-filter__label">Campus</h3>
	<div x-algolia:campus></div>
    </div>
    
    <!-- Results -->
    <div x-algolia:stats></div>
    <div x-algolia:hits></div>
    <nav x-algolia:pagination></nav>
</div>

Each x-algolia directive lets our JS know where to inject each widget. See static/js/components/algolia/index.js for the full implementation.

Algolia Dashboard

Link to the dashboard.

Finally, we have the visual dashboard for the Algolia application. The dashboard is where you can manage all your indices and records without touching the code or command line.

The dashboard will be most useful for…

• Updating the configuration for each index
• Copying configuration settings between indices
• Viewing usage data and search analytics
• Validating fields that are indexed on each record

See the official Algolia guide on getting started with the dashboard.