Updated on February 06, 2020

This tutorial provides the steps to set up templates for displaying archives and single event pages when using The Events Calendar plugin by Modern Tribe, Inc in Oxygen.

Sample screenshots:

Events archive page:

When an event is hovered:

A single event page:

Step 1

Install and activate The Events Calendar.

Step 2

Go to Events > Settings > APIs.

Click on the link to obtain a Google Maps API key and paste it in.

Note: In addition to Maps JavaScript API, you may also have to enable Geocoding API.

This is for the Google Map of the Venue (if you choose to show it) to be rendered.

Step 3

Go to Events > Settings > Display.

Set Events template to Default Events Template.

Tick “Use updated calendar designs”.

Step 4

Go to Oxygen > Templates.

Add a new Template named say “Events Archive”.

Set it to inherit from your Main Template having the sitewide header and footer.

Apply it to tribe_events post type’s archive.

Give it a priority of 1 (or higher depending on how your Template for archives is setup).

Edit with Oxygen.

Add a Section.

Add a Code Block inside the Section.

Advanced > Size & Spacing. Set Width to 100%.

PHP & HTML:

<?php
	use Tribe\Events\Views\V2\Template_Bootstrap;

	echo tribe( Template_Bootstrap::class )->get_view_html();
?>

CSS:

.ct-code-block .tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
  padding: 0;
}

The preview will appear unstyled in the Oxygen editor but should be fine on the frontend.

Now visit yoursite.com/events to see the events archive.

Step 5

Now let’s create a Template for single events.

Add a new Template named say, “Single Event”.

Inherit from your Main Template, apply it to Singular > Events.

Give it a priority of 1 (or higher depending on how your Template for archives is setup).

Edit with Oxygen.

Add a Section.

Add a Code Block inside the Section.

Advanced > Size & Spacing: Width: 100%.

PHP & HTML:

<?php
$events_label_singular = tribe_get_event_label_singular();
$events_label_plural   = tribe_get_event_label_plural();

$event_id = get_the_ID();

?>

<div id="tribe-events-content" class="tribe-events-single">

    <p class="tribe-events-back">
        <a href="<?php echo esc_url( tribe_get_events_link() ); ?>"> <?php printf( '« ' . esc_html_x( 'All %s', '%s Events plural label', 'the-events-calendar' ), $events_label_plural ); ?></a>
    </p>

    <!-- Notices -->
    <?php tribe_the_notices() ?>

    <?php the_title( '<h1 class="tribe-events-single-event-title">', '</h1>' ); ?>

    <div class="tribe-events-schedule tribe-clearfix">
        <?php echo tribe_events_event_schedule_details( $event_id, '<h2>', '</h2>' ); ?>
        <?php if ( tribe_get_cost() ) : ?>
            <span class="tribe-events-cost"><?php echo tribe_get_cost( null, true ) ?></span>
        <?php endif; ?>
    </div>

    <!-- Event header -->
    <div id="tribe-events-header" <?php tribe_events_the_header_attributes() ?>>
        <!-- Navigation -->
        <nav class="tribe-events-nav-pagination" aria-label="<?php printf( esc_html__( '%s Navigation', 'the-events-calendar' ), $events_label_singular ); ?>">
            <ul class="tribe-events-sub-nav">
                <li class="tribe-events-nav-previous"><?php tribe_the_prev_event_link( '<span>«</span> %title%' ) ?></li>
                <li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>»</span>' ) ?></li>
            </ul>
            <!-- .tribe-events-sub-nav -->
        </nav>
    </div>
    <!-- #tribe-events-header -->

    <?php while ( have_posts() ) :  the_post(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <!-- Event featured image, but exclude link -->
            <?php echo tribe_event_featured_image( $event_id, 'full', false ); ?>

            <!-- Event content -->
            <?php do_action( 'tribe_events_single_event_before_the_content' ) ?>
            <div class="tribe-events-single-event-description tribe-events-content">
                <?php the_content(); ?>
            </div>
            <!-- .tribe-events-single-event-description -->
            <?php do_action( 'tribe_events_single_event_after_the_content' ) ?>

            <!-- Event meta -->
            <?php do_action( 'tribe_events_single_event_before_the_meta' ) ?>
            <?php tribe_get_template_part( 'modules/meta' ); ?>
            <?php do_action( 'tribe_events_single_event_after_the_meta' ) ?>
        </div> <!-- #post-x -->
        <?php if ( get_post_type() == Tribe__Events__Main::POSTTYPE && tribe_get_option( 'showComments', false ) ) comments_template() ?>
    <?php endwhile; ?>

    <!-- Event footer -->
    <div id="tribe-events-footer">
        <!-- Navigation -->
        <nav class="tribe-events-nav-pagination" aria-label="<?php printf( esc_html__( '%s Navigation', 'the-events-calendar' ), $events_label_singular ); ?>">
            <ul class="tribe-events-sub-nav">
                <li class="tribe-events-nav-previous"><?php tribe_the_prev_event_link( '<span>«</span> %title%' ) ?></li>
                <li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>»</span>' ) ?></li>
            </ul>
            <!-- .tribe-events-sub-nav -->
        </nav>
    </div>
    <!-- #tribe-events-footer -->

</div><!-- #tribe-events-content -->

Step 6

If you want to assign Tags to your Events, you need to create a Template for the Tag archive pages.

Add a Section having a Heading and an Easy Posts element.

Double click on the Heading text, click on “Insert Data” button in the top toolbar, and click on “Archive Title”.

That’s it!

References:

/wp-content/plugins/the-events-calendar/src/views/v2/default-template.php

/wp-content/plugins/the-events-calendar/src/views/single-event.php

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: