Moving Tribe-Bar using Shortcode

[Matt]

Hello,

I am using the Events Calendar Pro and added a Short code to this page.
http://staging.anantacreatives.com/fsny/schedule/class-schedule-registration/

I wanted to move the tribe-bar from the top to the bottom after the calendar.

I tried creating a month.php file into my theme and dropping it here [theme-name]/tribe-events/pro/month.php
and I moved the Tribe bar code to under the Main Events Content

// Main Events Content
tribe_get_template_part( ‘month/content’ );

// Tribe Bar
tribe_get_template_part( ‘modules/bar’ );

How do a move the Tribe bar to under the month using the pro shortcode?

Thank you,

[Nico]

Hi there Mat,

Thanks for getting in touch with us! Interesting question here 🙂

I’ve been diving into the tribe_events shortcode code and found out that the main template (for example month.php) is not used. Basically the shortcode calls the content template part directly from the code and if the tribe-bar attribute is not false, inserts the tribe bar template part before the content. Although there are various filters an actions in place to customize the shortcode output I unsuccessfully tried to use them to modify the output order 🙁

Hopefully I could find a JS workaround for this, basically load the shortcode with the tribe-bar on top of the content and move it after the content using a JS snippet. I’ve also added some CSS so it doesn’t display on top of the content before the JS kicks in. Try pasting the snippet below in your theme’s (or child theme’s) functions.php file and be sure to modify the page slug to fit the one you are using:

/* Tribe, move tribe-bar after content for shortcode page */
function tribe_bar_relocate() {

// bail if not in specific shortcode page
// MODIFY THE PAGE SLUG TO YOUR ACTUAL PAGE NAME
if ( !is_page('sample-shortcode-for-month') ) return;
?>

<style>
#tribe-events-bar:not(.relocated) {
display: none !important;
}

</style>
<script type="text/javascript">

jQuery(document).ready( function ($){

if ( $('#tribe-events-bar').length ) {
$('#tribe-events-bar').insertAfter('#tribe-events-content');
$('#tribe-events-bar').addClass('relocated');
}
});

</script>

<?php
}

add_action('wp_head', 'tribe_bar_relocate');


Give this a try and let me know if it works for you,
Best,
Nico

[Matt]

Hi Nico,
Great, it worked.

I used your code and changed the page slug and it now shows the tribe-bar under the content.

Thank you

[Nico]

Stoked to hear this worked for you! Thanks for confirming Matt 🙂

I’ll go ahead and close out this thread, but if you need help with anything else please don’t hesitate to create a new one and we will be happy to assist you.

Best,
Nico

[Author]

Posts