The default search engine you’ll get from WordPress is decent. It does the job but it’s not that great. If you’re familiar with smooth autocomplete search forms, you expect more than the old school “hit search” which displays a bunch of results in a static list. Introducing Algolia, a product focused on providing an outstanding search UX (disclaimer: it’s not a paid feature, I’m a real fan ;-)). 

Algolia is very easy to implement.

First of all create a free account on Algolia.com. You can skip all tutorials, their WordPress integration doesn’t require any special knowledge. After signing up, jump straight to the API keys section in the side menu. That’s where you’ll find (on the right, here hidden) the 3 credentials you’ll need for the 1-minute setup on WordPress.

algolia search engine api keys wordpress

Then, on your site, simply install and activate the Algolia plugin from the WordPress repository (honestly, I don’t understand why there are only 2,000 active installs at the moment for this kickass product, hence today’s article).

algolia search engine wordpress

After activating the plugin, jump to Algolia / Settings via the dashboard sidebar, copy the info from Algolia’s API keys section and paste it there. Hit “save changes”.

wordpress algolia setup

Just one step left… In the “autocomplete” section of Algolia Search (sidebar of WP dashboard), tick “enable autocomplete” and select which type of content you want to show to your users in the find-as-you-type dropdown menu. I usually stick to POSTS for an editorial website. You can also include pages, portfolio items (projects), etc.

algolia search engine setup wordpress

You’re good to go. Just insert the default Search module from your WordPress theme wherever you want (see here), which will now use the Algolia magic behind the scenes to deliver a gorgeous autocomplete experience.

Additionally you can determine how the results / search page will look like (if you hit “enter” or click/tap on the search button).

I like the third option (Use Algolia with Instantsearch.js). But I’m not a fan of the default look n feel of that page (see below) with a sidebar featuring some cryptic info and all the tags attached to my posts. So I use a little CSS snippet (inserted via “additional CSS” in the website customizer) to hide the sidebar (see the adapted page below).

#ais-facets
{
display:none;
}

algolia default search page

Before, the default version.

 

algolia search page after css wordpress

After applying the CSS modification.

You will see results changing in real time when you type something in the search bar (direct access to my Search page).

The cool thing about Algolia is that they will show you which search queries are typed on your site, a nice way to see what’s popular (and also which content you should create in the event of unsuccessful queries). Algolia stays free as long as you don’t have more than 10K records and 100K operations (record updates & queries) + display their logo. It should be fine for a personal blog.

""
1
Want to get weekly snack tips?
Sign up to my newsletter.
Previous
Next

 

You may also like these tips