Updated: March 28th, 2023, for v6 of The Events Calendar.
In this tutorial, learn how to set up The Events Calendar to work with Oxygen.
To begin, install The Events Calendar plugin and Oxygen on a website.
After setting up both Oxygen and The Events Calendar, it is time to create an Events template. To do this, go to Oxygen > Templates in /wp-admin and create a new template. In this example, we'll call it "Events," but you can name it whatever you'd like.
Next, set the template to inherit your Main template, and then set the template to apply to the following scenarios:
Lastly, you may also need to set the priority to a higher number if any other templates could be applied to the event pages or events archive on the front end. You can read more about templating in our Templating Overview documentation.
With your template settings complete, save and publish the template. Then open it in Oxygen.
After Oxygen is open, you'll need to add some custom code to the template to display information from The Events Calendar plugin. There are two ways to add this code, and you can choose either option.
First, add a Section element to your template via +Add > Basics > Section. Now, add a Code Block inside the Section element via +Add > Basic > Code Block.
Next, select the Code Block element, go to the PHP & HTML tab, and add the following PHP to the Code Block element:
As an alternative to the steps mentioned above, if you're using Oxygen 4.1 or later, you can import the entire Section with the Code Block mentioned above by copying the JSON below and importing it into your site (how to use Cross-Site Copy and Paste in Oxygen):
After you have added the necessary code using either option above, save your template. You should now see both the Single Event and Events archive pages should work as expected, and no additional steps are necessary.
You should now be able to customize your layouts and site as desired!