isotropic-2022
Share
Blog
Search
Menu

How To Add Algolia To Your WordPress Search

By James LePage
 on March 20, 2022

How To Add Algolia To Your WordPress Search

By James LePage
 on March 20, 2022

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.

algolia dashboard

Click on the Api Keys link

algolia api

You'll need the three strings market above; App ID, search-only API key and the Admin API key.

algolia menu item

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.

algolia api on wp

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.

algolia search page

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.

algolia wp indexer

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.

algolia search autocomplete in wordpress

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.

<form id="searchform" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <input type="text" class="search-field" name="s" placeholder="Search" value="<?php echo get_search_query(); ?>"> <input type="submit" value="Search"> </form>

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.

Algolia WP Search results page

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Alexi
Alexi
1 month ago

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.

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
cross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
0

Your Cart is Empty