Add Tribe Events Search Bar To Your Home 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:

<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.