Create an Advanced Search Box in WordPress with Algolia

Normally, almost all websites use the searching function supplied by WordPress. It works well with basic needs. But if you want to use advanced features to improve the user experience, the default search box is not enough.

For example:

• Automatically suggesting search results when users enter any characters into the search box. It’s similar to how Google suggests people when they search. The suggestion must be fast to have the best user experience.
• Having the ability to search from various custom fields of articles. The default searching function of WordPress just uses the context from the title and content of posts. It doesn’t support searching from custom fields.
• Searching from many post types.

This article is about creating a search box like that. You can see an example in metabox.io. On this site, the search box in the header will suggest products and articles according to the keywords that you enter.

If you search in the support forum, the suggestion is topics on the forum:

And if you search in the Blog section, only posts are suggested.

Compare Search Plugins in WordPress

First, let’s take a look at some popular search plugins in WordPress. Then, we’ll learn about if they have pros, cons, and meet your needs.

SearchWP

SearchWP is a premium plugin (99$/year) that specializes in search. The best advantage of this plugin is allowing us to search from many custom fields and set the weight to them (thereby knowing what are more important fields). Hence, the search results will be the most appropriate to what users are looking for.

When using SearchWP, you can use the default WordPress searching form. It doesn’t have the searching suggestion feature. To include the suggestion, you should install the SearchWP Live Ajax Search plugin. However, this plugin has a slow suggesting speed because it uses the Ajax of WordPress. Therefore, if you want to use SearchWP, you should have a good hosting/server to have better-suggested speed.

Relevanssi

Relevanssi is another famous plugin for searching. Same as SearchWP, it supports searching from custom fields and setting the weight. It also supports fuzzy search. It means that if you don’t enter complete keywords, it still returns the items that match your partial words.

However, the UI of Relevanssi is not as good as the one of Search WP. It also doesn’t support the search results suggesting. If you want this feature, you can combine SearchWP Live Ajax Search with Relevanssi, as the SearchWP does.

Relevanssi also has a PRO version ($99/year) with some advanced features such as searching from PDF, DOCX, or content of terms. However, these features are not so impressive.

Ajax Search

Ajax Search is a plugin that specializes in quick suggestions for search results. This plugin has a lot of options for fast searching such as templates of displaying results. Besides, Ajax Search also allows users to search from many different post types.

Ajax Search has a PRO version (36$/lifetime). It has a premium feature that allows users to search from custom fields and many kinds of documents. It also has more advanced options.

Ajax Search is smoother than the 2 above plugins. It may be caused by its specialization in the suggestion feature for search results. However, this plugin’s UI is not so beautiful and friendly. In addition, it uses Ajax of WordPress for the suggesting feature so that its speed is quite slow. You have to wait for 3 - 5s to see the suggestions.

ElasticPress

ElasticPress is a free plugin that uses elasticsearch for quick search. Elasticsearch is a search technique that finds all kinds of content with almost real-time speed.

Using elasticsearch meets almost all our needs. However, this technique requests a server for elasticsearch. This server must be configured correctly. After that, you must install ElasticPress to connect to the server. The disadvantage of this technique is the great cost and effort to maintain a server for elasticsearch.

Jetpack Search

Jetpack Search ($5/month) is a feature in the Jetpack plugin. This feature uses elasticsearch of Automatic (the company that developed Jetpack). Therefore, you don’t need to spend time building, configuring, and maintaining the server for elasticsearch. Because of using elasticsearch, provides all the essential features and a good experience.

The first disadvantage of this way is that you must install Jetpack which you may not want because it has a lot of other features and automatically syncs your data to the Automattic’s server. The second disadvantage is the high cost. The cost will depend on the number of records you have (minimum of $5/month).

Quick Search in WordPress

To overcome the above disadvantages, I would like to introduce a new way, which meet all the following requirements:

• Using elasticsearch
• Search results’ suggestion is very fast, almost real-time
• Search from many custom fields
• Set the weight for custom fields

The solution here is to use Algolia, a dedicated search service. Algolia has the following advantages:

• Using elasticsearch;
• There is a free plan for 10.000 searches/month and 10.000 records/month. This limit is quite suitable for medium and small websites. In the case of metabox.io, it’s quite enough to use. If you want to use more, you should choose a plan for paying as you go;
• Having plugins for WordPress;
• Good customization.

To integrate Algolia into WordPress, let’s do as follows:

Sign Up for an Account in Algolia

First, you have to sign up for an account (free) on algolia.com. After that, go to the API Keys section and get the information: Application ID, Search-Only API Key, Admin API Key as follows:

Install the WP Search Plugin with Algolia

After having an account and API Keys from Algolia, enter your website and go to Admin Dashboard > Plugins > Add New then install WP Search with Algolia.

Don’t forget to activate this plugin!

This plugin is a fork version from the official Algolia plugin. However, Algolia has stopped developing the plugin, so WebDevStudios company has forked the plugin and maintained it so far. Currently, this is the best Algolia support plugin.

Configure the WP Search Plugin with Algolia

After activating the plugin, go to Algolia Search > Settings, then enter API Keys that you take from the profile page of Algolia in step 1.

To enable the suggestion feature, go to Algolia Search > Autocomplete and enable it via the Enable autocomplete checkbox. On this settings page, you will see a list of data types that Algolia supports to search, including post types, taxonomies, and users. Just select the types of data you want.

Note that Algolia has a limit to the indexed data in the free edition. It’s 10,000 records/month. Therefore, if you select too many data types, you may exceed this limit and pay a fee for that.

After selecting the data type, you can choose to re-index the data by hitting the Re-index button. In fact, this action is to sync data to Algolia's server. You need to do this once only. Then, whenever you edit or write a new post, the plugin will help you to push the data automatically.

For your quick reference, here is Algolia's documentation.

View and Customize the Search Fields

To see if the data is synchronized correctly, you can go to the profile page on Algolia, then go to the Indices section. Here, you will see the following data types:

For each data type, although the plugin pushes a lot of information (such as title, date, content, taxonomy, etc.), you can configure it to search by some certain custom fields and their priority. To do so, click the Configuration tab, where you will see a list of custom fields as follows:

Here, you can add, delete, and sort fields.

On the left menu, there are many options such as setting the priority for search criteria (Ranking and Sorting), allowing searching with misspelled words (Typo-tolerance), ... You can explore more to find out what to fit your needs. In the case of metabox.io, using the default settings is good enough, so I don’t change anything.

Customize the Search Box of WordPress

Now, back to your website. By default, when Autocomplete is enabled, the WP Search with Algolia plugin will automatically integrate with the theme's search box. Especially, this feature works with most WordPress themes.

When users type something into the search box, they will get this:

However, if you want to customize the list, or just want to display the results in some kind of post type, you need to customize the code a bit. Here are the basic steps:

• In your theme folder, create a folder named algolia;
• Copy the wp-content/plugins/wp-search-with-algolia/templates/autocomplete.php file from the plugin folder then paste it to the algolia folder;
• Edit the autocomplete.php file.

Note that this autocomplete.php the file uses the JavaScript template of Underscores, so you should learn about it a little bit. The plugin allows you to customize the display for each part of the suggestion list, such as a list of posts, users, titles, ... Go to the documentation of Algolia for more details.

You can refer to the autocomplete.php file that we created for metabox.io here:

https://gist.github.com/rilwis/2f9f1690a29fc65d04937b7b9dfd9027

Here, I customize a lot to make search boxes in different locations to suggest different content:

• The search box in the header section suggests products and articles
• The search box in the blog section just suggests articles
• The search box in the forum section just suggest topics

Last Words

Searching is an important part of a website, especially for websites that have many types of information. Finding the right content quickly is not an easy task. With the analysis and methods mentioned in this article, we hope that you will find a way to fit the searching needs of your website.