Algolia is a FaaS (Functional as a Service) that allows you to implement simple and fast search functions based on APIs, and it can be easily installed on WordPress using the 3rd patry plugin, which can be used to increase the functionality of site search.

There is one thing to keep in mind when using Algolia with Headless WordPress. That is that “the domain when indexed by Algolia” and “the domain of the public site” are different.

Index original domain ≠ site domain

The easiest way to index your WordPress posts into Algolia is to use the WP Search with Algolia plugin.

However, if the domain of the WordPress you are editing is different from the domain of the public site, like Headless WordPress or Shifter Static, the index will be created with the domain of the WordPress you are editing as the URL in Algolia.

Therefore, when using Algolia’s Instantsearch.js or similar to display search results, the results will be linked to WordPress for editing.

As a work-around, you can show the result of URL substitution as shown below, but ideally you would want to have the domain of the public site at the time of indexing.

import Link from 'next/link'
import React, { useMemo } from 'react';
import { 
    Highlight,
    PoweredBy, Panel,
    connectHits
} from 'react-instantsearch-dom';

export const AlgoliaHitItem = ({hit}) => {
  const {permalink} =hit
  const slug = useMemo(() => {
    return permalink.replace(/https:\/\/headless.example.com/, '')
  }, [permalink])
  return (
    <Link href={slug}>
      <Highlight attribute="post_title" hit={hit} />
    </Link>
  )

}
export const AlgoliaSearchResult = connectHits(({hits}) => {
  if (!hits || hits.length < 1) return null;
  if (!showResult) return null;
  return (
      <Panel footer={<PoweredBy />}>
        {hits.map(hit => <AlgoliaHitItem key={hit.objectID} hit={hit} />)}
      </Panel>
  )
})

Domain replacement using Filter hook

Fortunately, the WP Search with Algolia plugin provides hooks that allow you to rewrite the data before it is indexed.

So let’s create a plugin that contains the following code.

<?php
/**
 * @package Example_Algolia_Converter
 * @version 1.7.2
 */
/*
Plugin Name: Example Algolia domain converter
Description: Simply replace the domain
Author: Hidetaka Okamoto
Version: 0.0.1
*/

function replace_algolia_permalink_to_public_site_domain ( $url ) {
	$replaced_domain = 'public.example.com';
	$parsed_url     = wp_parse_url( $url );
	$replace_target = $parsed_url['host'];
	if ( isset( $parsed_url['port'] ) && $parsed_url['port'] ) {
		$replace_target .= ":{$parsed_url['port']}";
	}
	return preg_replace( "#{$replace_target}#i", $replaced_domain, $url );
}

function example_replace_algolia_permalink( $shared_attributes ) {
	$shared_attributes['permalink'] = replace_algolia_permalink_to_public_site_domain( $shared_attributes['permalink'] );
	return $shared_attributes;
}

function example_replace_algolia_posts_url( $user ) {
	$user['posts_url'] = replace_algolia_permalink_to_public_site_domain( $user['posts_url'] );
	return $user;
}

add_filter( 'algolia_term_record', "example_replace_algolia_permalink", 10, 1);
add_filter( 'algolia_post_shared_attributes', "example_replace_algolia_permalink", 10, 1);
add_filter( 'algolia_searchable_post_shared_attributes', "example_replace_algolia_permalink", 10, 1);
add_filter( 'algolia_user_record', "example_replace_algolia_posts_url", 10, 1);

If you are worried about creating a new plugin, you can try rewriting the source code of the Hello Dolly plugin from the “Plugin Editor”, in the WordPress dashboard.

By running this plugin, you can rewrite the URL to any domain when indexing it in Algolia.

Shifter Static supports URL translation function by default

If you want to integrate WordPress with Algolia and Jamstack frontend by yourself, you need to create and install the above plugins.

However, Shifter Static has this feature enabled by default to make it more convenient for you. So just install and activate the WP Search with Algolia plugin and index it, and your WordPress site data will be indexed in Algolia as a public site domain in Shifter Static.

We will continue to post tips and information like this on our blog.
If you have any suggestions, please feel free to give us feedbacks.