Wordpress Algolia — Add Existing Indices to Your Search Engine — codementor.tech
This is just an overview. If you want to read the article please go through THIS link.
Add All Data to Algolia (Create New Indices) :
If you want to use algolia in your WordPress website or WordPress blog, You just need to install Algolia WordPress Plugin.
You can simply download a plugin from HERE. Or else just go to Dashboard -> Plugins -> Add Plugin and search for “Search by Algolia — Instant & Relevant results.”
You can find an installation guide from its documentation, useful filter and hooks as well. After installing the plugin you can able to see “Algolia Search” tab on Admin dashboard sidebar.
After installing, If you don’t have algolia account you need to create one to push your website data to algolia.
After creating algolia account you can find Application ID, Search-Only API Key, Admin API Key and Index Name Prefix. As shown in below image.
In your Dashboard -> Algolia Search -> Settings, You have to add your Algolia account credentials shown in below image.
In Dashboard -> Algolia Search -> Autocomplete click on Enable Autocomplete and you can click index from configuration section as shown in below image.
In Dashboard -> Algolia Search -> Search Page you will need to select Search result as shown in below image. (Choose as per your requirement)
That’s It. Now You can use algolia in your WordPress website or blog for Instant & Relevant results.
Use Existing Indices :
For this, You will need to add
Here is my <script> in footer.php file,
<script>
var client = algoliasearch("application ID", "search-only-api-key")
var listings = client.initIndex('index-name'); autocomplete('#aa-search-input', {}, [
{
source: autocomplete.sources.hits(listings, { hitsPerPage: 3 }),
displayKey: 'name',
templates: {
suggestion: function(suggestion) {
console.log(suggestion);
return '<a href="suggestion.slug" target="_blank">' +
suggestion._highlightResult.title.value + '</a>';
}
}
}
]);
</script>
You can change the code as per your requirement.
Add below scripts in your <head> Tag.
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>And here is the code for search input in my <header> tag,
<div class="aa-input-container" id="aa-input-container">
<input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search for listings.." name="search" autocomplete="off" />
<svg class="aa-input-icon" >
<path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z" />
</svg>
</div>you can add some styling to it as per your requirement.
Conclusion :
After going through this article, you can able to use algolia search in your WordPress website or blog.
Thank You.
Cheers.
Happy Coding!
