How to Setup Algolia Search on WordPress with Genesis Theme

For those of you new to Algolia, this is another Instant Search solution for WordPress search. It is a 3rd party solution. The plugin is Free. The service is based on the free plugin on the client side communicating with the Algolia servers to retrieve search results for users.

The Algolia setup is very simple. You download the plugin fromĀ https://github.com/algolia/algoliasearch-wordpress. Install the plugin manually via your WordPress Admin. Create a new account on www.algolia.com.

For some reason, my drop down box containing the Search Results was not showing. It would only happen when using a Genesis theme. For other themes (I verified it worked with Storefront), it worked just fine. I posted in the StudioPress forums, but no luck. I inspected the Chrome Inspect Console but saw no JS errors.

I even tried disabling one plugin at a time, trying to figure out a possible conflict. No luck there either.

I decided to seek the help of Algolia’s support team. Sylvain Utard, the VP of Algolia Search came to my rescue. After a few experiements and emails back and forth, he figured out the issue. The issue was CSS related.

From my understanding, the Search Form overflow property was not visible by default in Genesis. The drop down for Algolia Search Results was always there, just invisible!

Here is the fix
.search-form {
overflow: visible !important;
}

Voila! That CSS change did the trick.

Leave a Reply

Your email address will not be published. Required fields are marked *