Recreate Event Search bar in page template

[Carly]

Hi,

I have used the code from bar.php to use in a theme file.

You can see it on this page http://g1.carlyblack.net (dot) au/

I can’t get the datepicker to function correctly however.

Compare it to http://g1.carlyblack.net (dot) au/events/ to see what I mean.

These are the JS and CSS I am using. All are pulled through to the page successfully.

//Add the stylesheet into the header
wp_enqueue_style(“tribe.homepage”,WP_PLUGIN_URL.”/the-events-calendar/src/resources/css/tribe-events-full.css”);

wp_enqueue_style(“tribe.homepage.filter”,WP_PLUGIN_URL.”/the-events-calendar-filterbar/src/resources/css/filter-view.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/src/resources/js/tribe-events-bar.js”,
array(“jquery”), “1.3.1”,1);

wp_enqueue_script(
“tribe.homepage.events”, WP_PLUGIN_URL.”/the-events-calendar/src/resources/js/tribe-events.js”,
array(“jquery”), “1.3.1”,1);

wp_enqueue_script(
“tribe.homepage.datepicker”, WP_PLUGIN_URL.”/the-events-calendar/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.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);

}

Am I missing a JS or CSS file that is needed to make this work?

Thanks

wp_enqueue_script(
“tribe.homepage.bar”, WP_PLUGIN_URL.”/the-events-calendar/src/resources/js/tribe-events-bar.js”,
array(“jquery”), “1.3.1”,1);

wp_enqueue_script(
“tribe.homepage.events”, WP_PLUGIN_URL.”/the-events-calendar/src/resources/js/tribe-events.js”,
array(“jquery”), “1.3.1”,1);

//wp_enqueue_script(
//”tribe.filter.events”, WP_PLUGIN_URL.”/the-events-calendar-filterbar/src/resources/js/filter-scripts.js”,
//array(“jquery”), “1.3.1”,1);

wp_enqueue_script(
“tribe.homepage.datepicker”, WP_PLUGIN_URL.”/tribe-homepage-search/js/bootstrap-datepicker.min.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);

}

[George]

Hi Carly,

I’m sorry to disappoint here, but these sorts of questions are unfortunately outside the scope of customer support and we are not able to help with this.

Please read more about this here → https://theeventscalendar.com/knowledgebase/what-support-is-provided-for-license-holders/

To make any sort of customization, you have to write that custom code yourself or hire a professional developer to do it for you. We have a list of great developers here → http://m.tri.be/18k1 (and have no affiliation with any of these folks—they’re simply some well-respected names in the community that we’ve compiled to share in situations like this one).

This means that you also are responsible for troubleshooting the customizations along the way as you implement them.

I’m sorry to disappoint, Carly. Please let me know if there are any other issues or questions I can try to help with.

— George

[Carly]

For those interested, I got this working with

function tribehome_enqueue_front_page_scripts() {
// Add these scripts to only the front page — need to customize for your specific use
if( is_home() || is_front_page() )
{

//Add the stylesheet into the header
wp_enqueue_style(“tribe.homepage”,WP_PLUGIN_URL.”/the-events-calendar/src/resources/css/tribe-events-full.css”);

wp_enqueue_style(“tribe.homepage.filter”,WP_PLUGIN_URL.”/the-events-calendar-filterbar/src/resources/css/filter-view.css”);

wp_enqueue_style(“tribe.homepage.date”,WP_PLUGIN_URL.”/the-events-calendar/vendor/bootstrap-datepicker/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/src/resources/js/tribe-events-bar.js”,
array(“jquery”), “1.3.1”,1);

wp_enqueue_script(
“tribe.homepage.events”, WP_PLUGIN_URL.”/the-events-calendar/src/resources/js/tribe-events.js”,
array(“jquery”), “1.3.1”,1);

//wp_enqueue_script(
//”tribe.filter.events”, WP_PLUGIN_URL.”/the-events-calendar-filterbar/src/resources/js/filter-scripts.js”,
//array(“jquery”), “1.3.1”,1);

wp_enqueue_script(
“tribe.homepage.datepicker”, WP_PLUGIN_URL.”/the-events-calendar/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.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’ );

Can you please advise me on which CSS and JS to add for the filter functionality. I have started by adding the code from filter-view-horizontal.php

thanks

[Carly]

Hi George,

A similar question was answered here! https://theeventscalendar.com/support/forums/topic/whole-search-bar-on-another-page/

It would be a useful thing for users to be able to customise 🙂

I have the calendar working now. I’m just looking for a little guidance with the filters, namely the CSS and JS to add for the filter functionality.

I’m not looking for you to write any code for me 🙂

I have started by adding the code from filter-view-horizontal.php

[George]

Hi Carly,

Thanks for your followup. Unfortunately you can’t just migrate the search bay with a simpler filter or hook at this time.

I would recommend the following things:

• The search bar is broken into its own module, and exists in most part in this file within The Events Calendar: /the-events-calendar/views/modules/bar.php

• Check out that PHP there and copy and paste it into your own files, theme, page templates, etc.

• Tinker with things from there, using the functions in that file and HTML structure

☝️ When it comes to adding the extra JS and CSS necessary, this is something we’re unfortunately unable to help with. It is indeed a quite involved customization to make, as our search bar is not built to be used outside out of the main Events Calendar pages.

If you need the assistance of a professional developer to help you make your customizations a reality, we have a list of great developers here → http://m.tri.be/18k1 (and have no affiliation with any of these folks—they’re simply some well-respected names in the community that we’ve compiled to share in situations like this one).

Best of luck with your customizations!
George

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts