Updated on November 23, 2018

This members-only 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.

Sample screenshots:

Events archive page:

A single event page:

Screencast:

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

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Add support for Events Calendar

Code:

add_action( 'ct_before_builder', 'custom_reset_the_query' );
/**
 * Fix the query issue with The Events Calendar.
 */
function custom_reset_the_query() {
    wp_reset_query();
}

Set it to run on front-end only.

Save and activate.

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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership (one-time payment for lifetime access).

Already a member? Log in below or here.

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

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Dear Sridhar,

    When loading the php code on the archive page in a clode block, a spinning wheel appears and it doesn’t stop. What does this mean? Should I be worried about this? It seams something isn’t right… I can’t provide url, because it’s local.

    What do you think?

    Lara

    • Dear Lara,

      I have updated the tutorial to add a new Step (#3).

      Can you implement that and try again?

      The spinning wheel will continue to appear in the Oxygen editor. You can safely ignore that.

      It should appear fine in the frontend.

  • Ran into an unique issue and thought to post here to save anyone from the same headache I went through, ha. For anyone running into this issue where the Single Events are double-posting on the frontend, make sure to check:
    The Events Calendar Settings > Display > Events Template: Default Events Template.

    Then the code snippets above should run just fine.

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