*This article is for the ninth day of “Algolia Advent Calendar 2020“.
There are many websites, such as catalog sites and e-commerce sites, that require the ability to search within the site. The search function provided by many CMS is implemented in server-side languages such as PHP and Ruby. But Shifter Static and various Jamstack applications need to implement the search function on their own to some extent.
When using WordPress, you can use the WP Search with Algolia plugin to index your article data to Algolia. However, in order to set up a search form, you still need to write some code in JavaScript, etc.
In order to make the process more easy for users, we released “Search with Algolia Instantsearch Blocks,” a plugin that allows you to easily embed a search form using Algolia Instantsearch in WordPress.
Plugin specialized in displaying the search form and search results
Keep in mind that this plugin specializes in searching articles indexed by the WP Search with Algolia plugin. As such, it does not provide the ability to index articles.
After installing the plugin, a block that shows “Instantsearch” will be added to the editor.
How to setup the plugin
After activating the plugin, a field will be added to [Settings > Reading] where you can enter the settings for using Algolia’s search API.
Copy and paste the “Application ID” and “Search-Only API Key” displayed on Algolia’s Dashboard and enter them respectively, then save the file.
Once you have saved changes, all you need to do is to place the “Instantsearch” block in your posts and fixed pages.
Place the block and publish it to complete the installation of the search form.
Customizing the search results
The list of search results displayed in the Instantsearch block can be customized to some extent.
When you select the block’s configuration panel, you will see various configuration items as shown below.
Search Option: Control what to search for and how many to display
By changing the Index name, you can choose which Index to use in Algolia. This can be set on a block-by-block basis, so please use this option when you want to set up multiple search forms on your page.
The number of items displayed in the search results can also be adjusted by changing the Hit Items.
Hit item: Customize what is displayed in search results
You can also control which items are displayed in the search results. You can toggle them in the configuration panel. You are able to control the display of: author name, submission date, category, and tags.
We also have an option to hide the logo for those who have subscribed to Algolia’s paid plan.
Post content: Controls the display of the article summary.
Post content is used to control the display of the body and summary in the article list.
Controlling the grid and list display
Switching between the list and grid views from the toolbar that appears when you select a block is available.
Display testing within the block editor is also possible.
The changed settings can be tested in the editor.
You can prepare your search page by testing how it will appear on your site.
Is conpatible with Shifter Static and is free
This plugin works with JavaScript. Therefore, it can be used with services such as Shifter Static, which converts your site to static HTML and publishes it.
For headless applications such as Shifter Headless, we recommend using Instantsearch.js in applications such as Gatsby.js and Next.js instead of this plugin.
