Create an Advanced Search Box in WordPress
Tags: wordpress
Published: 2020-08-18 02:42:22

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](https://metabox.io/series/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](https://metabox.io/). In this site, the search box in the header will suggest you with products and articles according to the keywords that you enter.

![The advanced search box on metabox.io.](https://cdn-images-1.medium.com/max/600/0*eZj_JLCtcXZdLgS0.png)

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

![The advanced search box will suggested related topics.](https://cdn-images-1.medium.com/max/600/0*eiFa5nkUAyDXQ23w.png)

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

![The search box in the Blog section only suggests you with posts.](https://cdn-images-1.medium.com/max/600/0*g8UF1LBC3VwFQ4I3.png)

### 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 searching. 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.

![SearchWP is a premium WordPress plugin that specializes in creating advanced search boxes.](https://cdn-images-1.medium.com/max/600/0*X6IZ8xeqXAvrlUJM.png)

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](https://wordpress.org/plugins/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](https://wordpress.org/plugins/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.

![Relevanssi is a famous WordPress plugin to creat advanced search boxes.](https://cdn-images-1.medium.com/max/600/1*ecipBS6pUScPlgCdQTZ0Nw.png)

However, the UI of Relevanssi is not as good as the one of Search WP. It also doesn't support 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](https://wordpress.org/plugins/ajax-search-lite/) 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 is a WordPress plugin that specializes in quick suggestions for search results.](https://cdn-images-1.medium.com/max/600/1*nMrzos6gmoRuIpYPIpht5Q.png)

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 2 above plugins. It may be caused by its specializing 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](https://en.wikipedia.org/wiki/Elasticsearch) for quick search. Elasticsearch is a search technique that finds all kinds of content with almost real-time speed.

![ElasticPress is a free WordPress plugin that uses elasticsearch for quick search.](https://cdn-images-1.medium.com/max/600/1*uy5woZZJ7_nW2dZDAZeuLg.png)

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, it provides all the essential features and good experience.

![Jetpack Search is a feature of the Jetpack plugin using to creat advanced search boxes.](https://cdn-images-1.medium.com/max/600/0*NUbsBKIhnFmfwTVM.png)

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](https://www.algolia.com/), a dedicated search service. Algolia has the following advantages:

-   Use elasticsearch;
-   There is a 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](https://metabox.io/), it's quite enough to use. If you want to use more, you should choose a plan for paying as you go;
-   Have 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](https://www.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:

![Sign up for an account in Algolia](https://cdn-images-1.medium.com/max/600/0*eGdzSdNa-2a9QCEJ.png)

### 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](https://wordpress.org/plugins/wp-search-with-algolia/).

![Install the WP Search Plugin with Algolia.](https://cdn-images-1.medium.com/max/600/0*Ix3mr41i6WpHryB3.png)

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.

![Configure the WP Search Plugin with Algolia.](https://cdn-images-1.medium.com/max/600/0*FwkqCNRlxFyjfS2E.png)

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.

![Choose the data types that you want your advanced search box to search from.](https://cdn-images-1.medium.com/max/600/0*aARiSHNcW9THxR2T.png)

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](https://community.algolia.com/wordpress/configuration.html) is the 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:

![The data types display in the profile page of Algolia.](https://cdn-images-1.medium.com/max/600/0*wOabiR9oHTjU1C0J.png)

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:

![Configure the data information by custom fields.](https://cdn-images-1.medium.com/max/600/0*6itqOitQgnvRjZ7C.png)

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](https://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](https://gretathemes.com/wordpress-themes/).

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

![The advanced search box suggests users with related results](https://cdn-images-1.medium.com/max/600/0*CeeIGf_sOFGZk0yj.png)

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` file uses the [JavaScript template of Underscores](https://underscorejs.org/#template), 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](https://community.algolia.com/wordpress/customize-autocomplete.html) for more details.

You can refer to the `autocomplete.php` file that we created for [metabox.io](https://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.