Updated on June 07, 2019

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

Go to Events > Settings > Display.

Set Events template to Default Events Template.

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 ($27/month).

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.

  • Is there a way to change the headings, so instead of Upcoming Events on events archive, it could say, NC Shows?

  • Hello awesome tutorial.

    Question, how do would you set the events archive as the homepage. I created a homepage under the Pages and connected it to the events archive template but nothing appears.

    Thanks
    Kevin

  • Did something change in Tribe events? Seems all templates I assign don’t get picked up.
    Catchall template set to full width but all (single) event template have a 1140 page width.
    assigning to events seems not working, even with high priority numbers.
    Had this before with other builders but seems fixed in Oxy 2.2 and the code here.

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