Algolia is a powerful search tool that uses AI to provide the most relevant suggestions to visitors. In this post, we'll show you how to integrate this tool with your WordPress website.For large e-commerce websites running WooCommerce with hundreds of products, or content websites that have been around for years, Algolia will ensure that the most relevant results are shown instantly. For example, our blog has over 500+ posts, and querying a search is instant.
One of the best parts about this integration is that there is a free plan that allows for up to 10,000 searches a month. If you ever exceed that quota, you can choose to pay for more, but by default this integration will switch back to the standard WordPress search, meaning that there will be no interruption to your users.
With that said, this is a tool that should be integrated with virtually every WordPress website as there is no downside to it.
First, let's install the plugin that connects Algolia with WordPress. This is a forked (maintained) version of the Official WordPress plugin, which Algolia stopped supporting a few years ago.
You can also choose to build your own plugin, but this method is just simpler and easier, while still being massively flexible.
Now, you'll need to sign up for a new Algolia account. Once you've completed that, you'll end up on a screen like this.
Click on the Api Keys link
You'll need the three strings market above; App ID, search-only API key and the Admin API key.
Go to the Algolia Search -> Settings tab from the Admin menu.
On the settings page, paste in the strings in their respective fields. Keep everything else in the default form.
The plugin will check that the API is functional and connected, letting you know in a success message. It will then redirect you to the search page settings.
We suggest turning on search results with using Algolia in the backend or using instantsearch.js. This means that any results on the WordPress search page will utilize the engine, and query accordingly.
Now, go to the autocomplete settings, and turn it on. This will find any instance of a WordPress search form on your website, and add an auto complete field that gives suggestions in real time. To make sure that everything works, we will need to Index all of the content on the WordPress website. This allows the tool to generate the API recommendations and display them in real time.
Index all posts, and then enable (via the checkboxes) the various content types that you want to display on your website. For us, we are displaying only posts and products. You can choose to show any custom post type or taxonomy.
After everything is indexed, you will be up and running. The above image is an example of the automatic suggestions that you'll get when searching in a WordPress search box. Note, we are using Oxygen Builder which disables themes, and this is working fine! If you have issues, hardcode the search form by using this code in a code block.
You will also see that we are applying the results to our search page. Instead of using the standard WordPress search engine which isn't great, we are using Algolia in the background to query and sort any results based on relevancy. You'll notice that the tool is applying highlights for the search term too.
Depending on the theme that you are using, you can use the instantsearch.js view which will display various filters and facets. However, if you have a custom coded website, you will likely need to use it in the backend or implement it into the search page template.
This plugin is created for developers by developers, and there's a robust wiki on GitHub which shows you how to do many different things. For example, you can easily implement custom fields into the Algolia indexer by following the instructions below.
We hope that this tutorial was helpful in walking you through the steps necessary to install Algolia search on a WordPress website. Feel free to leave any questions in the comments below.
Thank you for the tutorial! It's fine when you only need ability to search for the blog posts, but what about pages? Would be nice if you could show how to make it work for the content of pages created in Oxygen.
Thanks for the nice tutorial. I am used to Jetpack search for my site's search. But now my site was powered by algolia; it seems much more powerful than the pricey Jetpack search