Select Page

I recently did a project for a company that hosted different events on their yacht. They wanted a way to sell tickets to their events through their website. This was easily accomplished through the use of Modern Tribe’s Event Calendar. This was a great solution except for the fact that the plugin did not come with an option to add a search bar that would allow users to search for events by date or keyword the home page.

This was almost a deal breaker for me as you want to get users to events with as few steps as possible, but the functionality of the plugin was so good I went ahead and used it for the project, and decided to figure out how to add the events search bar to the home page as a side project, then add it to UberVida as a bonus.

How To Added The Search Bar To Your Website

The first thing that you need to do is get the code for the search bar which can be found in the plugin folder the-events-calendar > views > modules > bar.php

This is the modified version that I used on the homepage:

The main changes that I had to make where to the form this is the original:

The  form [su_highlight]method[/su_highlight] and [su_highlight]action[/su_highlight] had to be changed to get and the URL of the events:

Next I had to enqueue the styles for the search bar as well as the scripts for the date picker as is suggested on the Tribe Forum. But for whatever reason the styling worked fine however the datepicker didn’t. I was lucky in the fact that I could see that the datepicker that Tribe uses was an addition to the bootstrap framework that I am familiar with and I was able to download the necessary datepicker scripts. Then I wrote a plugin so that these scripts would only be called on the home page.

You can download the plugin here.