Single Event Template for The Events Calendar in Bricks

Updated on 19 Sep 2024

The Events Calendar is one of the most popular event plugins for WordPress.

With The Events Calendar active, single event pages appear fine out of the box in Bricks.

However, in certain situations, you may want to customize the layout inside the Bricks editor and in this Pro tutorial, we share how this can be done.

Step 1

Go to Events → Settings → Display.

Set Events template to “Default Page Template”.

Step 2

Create a file named single-event.php in your child theme’s directory having this code:

<?php
get_header();

$bricks_data = BricksHelpers::get_bricks_data( get_the_ID(), 'content' );

if ( $bricks_data ) {
	// echo '<main id="brx-content">' . BricksFrontend::render_data( $bricks_data ) . '</main>';
	echo BricksFrontend::render_data( $bricks_data );
} else {
	if ( have_posts() ) :
		while ( have_posts() ) :
			the_post();
			get_template_part( 'template-parts/page' );
		endwhile;
	endif;
}

get_footer();

Step 3

Add the following at the end of child theme’s style.css:

.single-tribe_events #tribe-events-pg-template {
  max-width: none;
  width: 100%;
  padding: 0;
}

.organizer-address > span:not(.tribe-events-divider) {
  display: block;
}

Step 4

Whitelist the functions.

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'tribe_events_event_schedule_details',
    'tribe_get_cost',
    'tribe_get_embedded_map',
    'tribe_get_end_date',
    'tribe_get_full_address',
    'tribe_get_gcal_link',
    'tribe_get_ical_link',
    'tribe_get_map_link_html',
    'tribe_get_next_event_link',
    'tribe_get_organizer',
    'tribe_get_organizer_details',
    'tribe_get_prev_event_link',
    'tribe_get_start_date',
    'tribe_get_venue',
    //'bl_get_tec_organizers_names'
  ];
} );

You should also add other functions (native or custom) being used in your Bricks instance besides the above. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.

More info on whitelisting can be found here.