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:
<div id="tribe-events-bar"> <form id="tribe-bar-form" class="tribe-clearfix" name="tribe-bar-form" method="get" action="<?php bloginfo('url'); ?>/events/"> <!-- Mobile Filters Toggle --> <div id="tribe-bar-collapse-toggle" <?php if ( count( $views ) == 1 ) { ?> class="tribe-bar-collapse-toggle-full-width"<?php } ?>> <?php _e( 'Find Events', 'tribe-events-calendar' ) ?><span class="tribe-bar-toggle-arrow"></span> </div> <div class="tribe-bar-filters"> <div class="tribe-bar-filters-inner tribe-clearfix"> <div class="tribe-bar-date-filter"> <label for="tribe-bar-date" class="label-tribe-bar-date">Date</label> <input type="text" placeholder="Date" value="" id="tribe-bar-date" data-date-format="yyyy-mm-dd" style="position: relative; z-index:10000" name="tribe-bar-date"> <input type="hidden" value="" class="tribe-no-param" id="tribe-bar-date-day" name="tribe-bar-date-day"> </div> <div class="tribe-bar-search-filter"> <label for="tribe-bar-search" class="label-tribe-bar-search">Search</label> <input data-bind="label" type="text" placeholder="Snorkeling, Dinner Cruise, Ibiza Party" onfocus="this.placeholder = ''" onblur="this.placeholder = ''" value="" id="tribe-bar-search" name="tribe-bar-search"> </div> <div class="tribe-bar-submit"> <input class="tribe-events-button tribe-no-param" type="submit" name="submit-bar" value="<?php _e( 'Find Events', 'tribe-events-calendar' ) ?>" /> </div><!-- .tribe-bar-submit --> </div><!-- .tribe-bar-filters-inner --> </div><!-- .tribe-bar-filters --> </form><!-- #tribe-bar-form --> </div><!-- #tribe-events-bar -->
The main changes that I had to make where to the form this is the original:
<form id="tribe-bar-form" class="tribe-clearfix" name="tribe-bar-form" method="post" action="<?php echo add_query_arg( array() ); ?>">
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:
<form id="tribe-bar-form" class="tribe-clearfix" name="tribe-bar-form" method="get" action="<?php bloginfo('url'); ?>/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.
<?php /* Plugin Name: Tribe Homepage Search Plugin URI: http://gregorypearcey.com/ Description: Add Tribe Events search bar to your home page Version: 1.0 Author: Gregory Pearcey Author URI: http://gregorypearcey.com/ License: Creative Commons Attribution-ShareAlike This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. */ //Add these scripts to only the front page function tribehome_enqueue_front_page_scripts() { if( is_front_page() ) { //Add the stylesheet into the header wp_enqueue_style("tribe.homepage",WP_PLUGIN_URL."/the-events-calendar/resources/tribe-events-full.css"); wp_enqueue_style("tribe.homepage.date",WP_PLUGIN_URL."/tribe-homepage-search/css/datepicker.css"); //Add the scripts in the footer wp_enqueue_script("jquery"); wp_enqueue_script( "tribe.homepage.bar", WP_PLUGIN_URL."/the-events-calendar/resources/tribe-events-bar.js", array("jquery"), "1.3.1",1); wp_enqueue_script( "tribe.homepage.events", WP_PLUGIN_URL."/the-events-calendar/resources/tribe-events.js", array("jquery"), "1.3.1",1); wp_enqueue_script( "tribe.homepage.datepicker", WP_PLUGIN_URL."/tribe-homepage-search/js/bootstrap-datepicker.js", array("jquery"), "1.3.1",1); wp_enqueue_script( "tribe.homepage.footer", WP_PLUGIN_URL."/tribe-homepage-search/js/footer.js", array("jquery"), "1.3.1",1); } } add_action( 'wp_enqueue_scripts', 'tribehome_enqueue_front_page_scripts' ); ?>
You can download the plugin here.
Hi, great stuff!
What would be needed to do if i would like to include the location search as well (from tribe events pro)?
Hi Henrik,
Try using the following:
Hi, thanks for getting back to me.
Yes, fine – i managed to do the same. However – i can’t get the datepicker to work. (doesn’t show)
And – the mobile view mess up the css.
Any advice?
If the date picker is not working there may be an issue with the path to it. I had issues using the date picker path that tribe uses, that was one of the main reasons for the plugin. You could use something like firebug to see if they’re any errors.
Hi, could not find an error with datepicker. However – i thought i should scale it down to only include locations search on homepage.
However – when hitting submit – it does send the right information to /events/ – however it does not generate the results based on that search – it lists all. Another problem is that it does not show (on frontpage) the input selections (if entering a city or street where there are alternatives) when hitting submit – as it should.
Not asking you to solve this for me – just thought i would ask if you might know what the problem is. If you like to see the page under construction – it is here: http://artgoons.com/
You need a password for the site: nyfiken
Just very frustrating this… trying to get a simple search form to work on fronpage… 🙂
Hi, I haven’t had much time to look into this, but a quick fix maybe to set the default view to map. From what I could see the geo location for the longitude and latitude are missing. This could probably be enabled on the home page if you could find out what part of the Tribe plugin controls the Ajax Geo location. When I have time I’ll see if I can figure it out.
Is there a solution for this? I have the same problem. When hitting submit it doesn´t show the filtered events.
Thanks for taking your time.
Yeah, tried changing to map, but no luck im afraid.
I’m also very interested in adding the Tribe search bar to my homepage. I’m not a developer, so I need something that runs out of the box. What would work for me is an events search widget that I could simply add to the main sidebar of my theme. Is something like that available, or could it be?
Hi Rex,
I have not heard of anything like that, but I should be able to adapt the code into a plugin that would allow you to add the tribe search to the widget area, or as a short code in any post/page. I have a couple of other projects going on right now, but I’ll put this on the todo list.
Thanks for all your help, Greg.
I’ve the same problem as Rex, I’m not a developer and would be great to have the search bar in a shortcode or widget… hope you soon have time to adapt your codes.
Thank you again!
No problem Emilio. Trying to spend some time on it this weekend, but I’ve also got a couple of new articles that need publishing, hopefully it’ll all get done this weekend.
#NewYearNewMe
Hello Greg,
I tried to use your method to get this to actually work but no luck.
Would you be interested in custom development?
Hello Abdullateef,
Sorry you weren’t able to get it to work. If you send me a message here http://gregorypearcey.com/contact/ we can work out the details to get your project on track.
Hi!
Great code-work here – helped me a lot!
I implemented the bar on the homepage and another page using the same code like for the homepage.
But on the other page the datepicker isn´t opening.
Also on both pages I get two console errors:
Uncaught ReferenceError: tribe_ev is not defined (tribe-events-bar.js)
Uncaught ReferenceError: tribe_js_config is not defined (tribe-events.js)
Do you have an idea what is causing this problem?
Hi Vivianne,
Sorry for the delayed response, I believe some of the code is written so that it is only called on the home page, something like “is_home”, if I remember correctly. That’s probably what is causing your issue.
You sir are a legend! Tribe are good for feedback but living in England there’s the timezone problem for hearing back from them, and then they don’t always help with custom code. Again, thanks a lot!
No problem Jim.