Skip to content
Transom Transom C7 Calendar

Installation — WordPress

There are two ways to add The Everything Calendar to a WordPress site. Use the Block Editor method if you want the calendar on a specific page. Use the Theme/Plugin method if you want the script tag loaded globally.

Before you start

Follow steps 1–2 of the general installation guide to install the app and find your tenant slug.

Method 1 — Block Editor (recommended)

This is the simplest approach and works with any modern WordPress theme.

  1. In WordPress, go to Pages and open the page where you want the calendar
  2. In the block editor, click the + button to add a new block
  3. Search for and select Custom HTML
  4. Paste the following into the block:
<link rel="preconnect" href="https://theeverythingcalendar.transom.design">
<script src="https://theeverythingcalendar.transom.design/widget/widget.js" data-tenant="YOUR_TENANT_SLUG" defer></script>
<div id="tec-calendar"></div>
  1. Replace YOUR_TENANT_SLUG with your Commerce7 tenant slug
  2. Click Update or Publish

Method 2 — Theme code

Use this method if you want the script tag in the site’s global footer (for example, if you’re embedding the calendar on multiple pages or using a page builder).

Option A — WPCode plugin (recommended for non-developers)

  1. Install and activate the WPCode plugin
  2. Go to Code Snippets → Header & Footer
  3. Paste the script tag into the Footer section:
<script src="https://theeverythingcalendar.transom.design/widget/widget.js" data-tenant="YOUR_TENANT_SLUG" defer></script>
  1. Save changes
  2. On the page where you want the calendar, add a Custom HTML block with just:
<div id="tec-calendar"></div>

Option B — Theme functions.php

Add this to your theme’s functions.php (or a child theme):

function tec_calendar_script() {
    echo '<script src="https://theeverythingcalendar.transom.design/widget/widget.js" data-tenant="YOUR_TENANT_SLUG" defer></script>';
}
add_action( 'wp_footer', 'tec_calendar_script' );

Then add <div id="tec-calendar"></div> to the appropriate page template.

Step 3 — Add your site to Allowed Origins

In The Everything Calendar app in your Commerce7 dashboard, go to the Access tab and add your WordPress site’s URL to the Allowed Origins list (e.g. https://www.yourwinery.com).

Troubleshooting

The calendar isn’t showing up

  • Make sure <div id="tec-calendar"></div> is on the page — the script needs this element to render into
  • Check that your site URL is in Allowed Origins
  • Check the browser console for errors

I’m using a page builder (Elementor, Divi, etc.) Most page builders have an HTML widget or code block — use that to paste the embed code directly on the page.