What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Add the Instant Search Box in WordPress

How to Add the Instant Search Box in WordPress

Almost all the WordPress sites have the exclusive search box or the search area. With it, you can improve the user experience of your visitors, for people can find their targets on your site easily. For instance, they can enter some keywords to find their desired content. However, the default WordPress search box is plain and basic. In this case, we are looking to introduce an alternative and tell you how to add the instant search box in WordPress.

In fact, as compared with the default WordPress search box, Google search box and many others, the instant search box allows people to find what they want as quickly as typing a few characters. To achieve this, we highly recommend you to use the Algolia searching tool. This is an advanced searching platform that is cloud based. With it, you can achieve the great searching experience for your visitors. Check the following to learn how to make use of it.

Step 1 – Sign Up with Algolia

As the searching tool of Algolia is a third-party one, you have to sign up for it to use the great function. Now, you can visit the Algolia page and click the Sign Up Free button.

Sign Up Algolia

Next, you can sign up for your account using your Google account, Github account or your email address.

Step 2 – Set Up the Plugin of Search By Algolia

Upon the registration of the Algolia tool, now, you should install the Search by Algolia plugin on your WordPress site. This plugin can integrate the great searching tool with your WordPress site. Thus, you can ensure the relevant searching results for your visitors in milliseconds effectively.

After the plugin installation, now, you should click the Algolia Search tab on your WordPress admin panel. Now, you have to set up the credentials of your Algolia account. These include the application ID number, the search-only API key and the admin API key.

Algolia Credentials

To get the needed information, you should go back to your Algolia account page. And then, you need to navigate to the Algolia dashboard, and then, click the API Keys tab from the left-hand column. Here, you can find the information you need.

API Keys

Now, you can copy and paste the keys and ID number to the corresponding fields of your WordPress admin. Do not forget to hit on the Save Changes button.

Step 3 – Configure the Indexing Settings

The next step is to set up the indexing part of this plugin. Here, you should click the Algolia Search > Indexing button.

Algolia Indexing Settings

Note that the more comprehensive indexing of your content means the faster searching experience for your visitors. In this case, when choosing the content types you’d like to be indexed by this plugin, we highly recommend you to choose all the options. As for the prefix of the index name, you can maintain the default one.

Now, you can click the Index button to start the indexing immediately. In addition, the plugin will make the new indexation task automatically.

Step 4 – Set Up the Search Page

This time, you need to click the Algolia Search > Search Page button. Here, you can enable this plugin to override the default searching function of WordPress.

Now, you should choose among the three options for your searching results. Personally speaking, you’d better select the second option – use the Algolia searching in the back-end. This way, all your searching results can be typo tolerant and can be presented quickly just when people type some characters. However, you have to note that this option cannot support the filtering feature.

Set Up the Search Page

Step 5 – Enable and Set Up the Auto-Complete Feature

This plugin has an exclusive auto-complete feature that achieves the find-as-type dropdown listing on the searching bar. This way, people simply need to type the characters in the searching box. And then, the related results can be displayed automatically.

Here, you can enable this feature as you like. In addition, you can decide what content types to be displayed in the dropdown, such as the posts, pages, tags, users, categories and many more. In addition, you can decide the maximum number of results and the display order in the dropdown for each content type.

Auto-Complete Feature

Step 6 – Showcase the Instant Search Box on Your WordPress Site

Here, it is possible that you have already added the searching box on your site from the default WordPress function. If so, you can do nothing as the Algolia searching function will replace that of the WordPress script automatically. This way, your searching form can work just like the following.

Instant Search Box

However, if there is no search box on your WordPress site yet, you should go to the Appearance > Widgets part from your admin panel. And then, you need to drag and drop the Search widget to your sidebar section.

In addition, if you have a search page, it will look like the following.

Search Page


Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.