Add The Events Calendar to Another Page

In a recent website redesign project for small business that does mainly in person CPR training we needed to replace paypal buttons with a more professional onsite checkout system.  Since his classes were calendar based (past events automatically fall off the event page) we decided on Woocommerce for his store (75 products) and The Events Calendar with Events Ticket Plus to sell “tickets” to his classes which are limited to 9 students. This involved some customization. Although I knew upfront that The Events Calendar did not use shortcodes and generated the event page as a virtual page it did what I need most of all and that was integrate with woocommerce. The rest I would figure out.

I thought I would share how I did one of the more vexing issues which was to put the class event list on a page underneath the existing content. My client had a SEO rich landing page which generated a lot of his conversions. We need to keep this page and have the events show below the content.

My plan was to utilize the list widget that already existed but I wanted the sidebar lists to just be the class name and the date and time information. I knew I could add the event content so it needed to be conditional to just the page I wanted the information to appear on.

My Plan of Attack:

  1. Copy the files to be edited to my theme folder.
  2. Edit the list-widget.php file to show content conditionally.
  3. Create a custom widget area to appear below the content on the “Open Class” landing page.
  4. Hook that custom widget area to that page.
  5. Add the list widget to the widget area.
  6. Apply any necessary style changes via CSS.

Step by Step Detail

I wanted to share how I did it. (I use Genesis Framework so the hooks mentioned are from Genesis)

1.The first step was to copy the needed files into my theme folder. I created a folder named “tribe-events” in my theme folder. Inside that I created another folder named “widgets” . I copied the file list-widget.php from the plugin folder to the widgets folder I just created via FTP. Whatever changes you make in this file will override the plugin file. See The Events Calendar Themer’s Guide.

2. I opened the list-widget.php file from the tribe-events/widgets folder in my theme folder. Down around line 55 the code ends for the event duration (date and time). I added the code for adding the content along with the code to make it conditional – only show on one page. I still wanted the list widgets in my sidebar to the title and duration only. I showed the code before and after so you can see the placement of the code in context. My code starts on line 4 and ends on line 11.

3. In my themes function.php file I created a widget area.

4. Added a conditional hook to add the widget area to the specific page after the content. This is also in the functions.php file.(97 refers to the page ID). If you are not sure how to do this I suggest you google it or look here.

5. Added the The Events Calendar List Widget to the new sidebar under Appearance > Widgets.

Screen Shot 2016-03-15 at 5.00.33 PM

6. Styled the button with css.

In this case I just needed to add some code to style the link to buy tickets.

Here is the result:

Screen Shot 2016-03-15 at 5.04.25 PM

Scroll to Top