Theme compatibility

How Site Calendar renders inside your theme

Three things have to play nicely with your theme: the calendar grid (the [pro_calendar] shortcode output), the single-event page (auto-rendered for each event post), and a small set of footer-injected elements (the Subscribe to calendar button, the Add to calendar button row, and the credit). The first two are explicit — you place them or visit them. The third is invisible to set up but the most common source of "where did it go?" support questions.

Themes that work without any configuration

The following themes have been verified to render Site Calendar correctly out of the box, with no custom CSS or template overrides needed:

• Blocksy (free + Pro) — full month/week/day/list/photo views, ticket forms, single-event pages, all footer injections
• Astra (free + Pro) — same coverage as Blocksy
• GeneratePress — same; integrates particularly well because it leaves the_content filters untouched by default
• Kadence — same
• Twenty Twenty-Five and earlier official block themes (Twenty Twenty-Four, Twenty Twenty-Three) — Site Calendar's CSS variables integrate cleanly with the theme's global styles
• Hello Elementor (the stripped-down theme designed for use with Elementor) — works correctly because it imposes no opinions on content rendering
• OceanWP, Neve, Sydney — all tested and working

If you're on one of these and the calendar renders correctly on a default install — full grid, view-switcher tabs, Subscribe button at the bottom — there's nothing else to configure. Read on only if you're hitting a specific issue.

Themes and builders that need a small adjustment

The following setups are fully compatible but can require one extra step on the single-event page or the calendar page itself, because they replace WordPress's default content rendering with their own builder canvas.

Elementor (single-event templates)

If you're using Elementor Pro's Theme Builder to design custom single-event templates, the auto-injected Add to calendar button row may not appear. Elementor replaces the_content with its own widget rendering, and the injector script can't find the standard .entry-content anchor.

Fix: Inside your Elementor template, add a Shortcode widget where you want the Add to calendar buttons to appear, and paste:

[pro_calendar_addtocal]

This explicitly outputs the same Add to calendar HTML the injector would have produced. It also gives you control over exactly where it lands — under the event description, before the ticket form, in a sidebar column, wherever fits your design.

Bricks Builder (single-event templates)

Same situation as Elementor — Bricks owns the content area, so the injector can't auto-place the Add to calendar buttons. Same fix: add a Shortcode element with [pro_calendar_addtocal] inside your single-event template.

Blocksy Page Builder layouts on the events page

If you've built a custom layout for the events page using Blocksy's Page Builder mode, place the calendar with a Shortcode block containing [pro_calendar]. The Subscribe to calendar button auto-injects next to the calendar wrapper as usual. If you want the Subscribe button in a specific other location, add a separate Shortcode block with:

[pro_calendar_subscribe]

Divi (Theme Builder single-event templates)

Divi replaces single-page rendering with its own Theme Builder output. To re-add the Add to calendar buttons, drop a Code Module or Text Module into your Divi single-event template containing [pro_calendar_addtocal].

Avada (Layout Builder single-event templates)

Avada's Layout Builder is the same pattern. Add an HTML or Shortcode element to your single-event layout: [pro_calendar_addtocal].

WPBakery Page Builder

WPBakery generally leaves the_content alone, so the footer injections work. But if you've wrapped the event content in a custom row/column structure that strips classes, add a Shortcode element with [pro_calendar_addtocal] as a safety net.

Themes with known quirks

The following themes have minor styling or layout interactions with Site Calendar. None are blockers — they're cosmetic, with one-line fixes.

Themes with very narrow main content areas

Themes like older versions of Twenty Twelve, Twenty Sixteen, and some niche bloggy themes constrain content to ~600px. The month-grid view becomes uncomfortably squashed below that width. The calendar still works — dates wrap correctly, view-switcher tabs remain functional, ticket forms render fine — but visual density suffers.

Fix: Set the calendar page to a full-width template. Most themes offer this through Page Attributes → Template → Full Width on the page editor. Alternatively, add custom CSS to widen just the calendar wrapper:

.pcal-archive-wrap { max-width: 100%; padding: 0 12px; }

Themes that force-style all buttons

Some opinionated themes apply a global button style to every <a class="button"> or <button> on the site. This can override the calendar's branded buttons (Subscribe to calendar, Buy tickets, view-switcher) with theme-default styling — usually fine, occasionally jarring.

Fix: If the theme styling clashes badly, scope a higher-specificity override in Appearance → Customize → Additional CSS:

.pcal-archive-wrap .pcal-btn,
.pcal-subscribe__btn,
.pcal-viewbtn {
    /* Pull values from your Site Calendar → Settings → Appearance */
    background: var(--pcal-primary);
    color: #fff;
    border-radius: 4px;
}

Dark-mode themes

Site Calendar's defaults assume a light page background. On dark themes (or themes with user-toggleable dark mode), event chips and the month-grid headers can have poor contrast. The fix is to set the Appearance colours to values that work on the dark background, and optionally add:

.pcal-archive-wrap { color: #f0f0f0; }
.pcal-archive-wrap .pcal-event a { color: #9ec5ff; }

If your theme has a [data-theme="dark"] attribute on the body or root element when dark mode is active, scope the overrides to that attribute so the colours only apply in dark mode.

Block-theme integration (Full Site Editing)

Block themes (Twenty Twenty-Three and later, and any modern theme using the Full Site Editor) render every template through the block editor. Site Calendar works inside these themes the same way it works in classic themes — drop a Shortcode block into the page where you want the calendar.

For deeper integration, if you want the calendar to appear automatically on a custom post-type archive, edit the relevant block template (Appearance → Editor → Templates → archive-event or similar) and add a Shortcode block with [pro_calendar] inside the template's main query loop wrapper. This makes the calendar render automatically for any URL matching the template.

The Appearance colour settings in Site Calendar interoperate with the block theme's global styles — they're emitted as CSS custom properties on :root, so they cascade through the block editor's style hierarchy without conflict.

The missing RSVP form — most common single-event issue

By far the most common theme-compatibility support request is: "My event has tickets configured but no Register / RSVP form appears on the front-end." This is almost always a custom-template issue.

Site Calendar Pro auto-injects the Register form below the main event content on the default single-event template. If you (or your theme) use a custom layout — Elementor Theme Builder, Bricks single-event template, Divi Theme Builder, Blocksy Page Builder for events, etc. — the auto-injection has nowhere to anchor, and the form silently fails to appear.

Three things to check, in order

1. Verify the event uses the default single-event template. Edit the event, look at the right-hand sidebar for a Template selector under Page Attributes or your theme's template options. The default option (usually labelled "Default" or "Single Event") includes the auto-injected form. If a custom template is selected, switch back to default and reload the front-end.
2. If you must use a custom layout, add the RSVP form shortcode manually wherever you want it to appear: [pro_calendar_rsvp event_id="123"] — replace 123 with the event's post ID. You can find the post ID in the URL of the event editor (e.g. post=2854 means the ID is 2854). For builder templates that render dynamically per event, use [pro_calendar_rsvp] with no event_id attribute and the shortcode auto-detects the current event.
3. Confirm at least one ticket row has a price and a capacity. Rows where both Price and Capacity are blank are treated as placeholder rows and skipped. Use 0 for free tickets and 0 for unlimited capacity — don't leave either field empty.

If the form is still missing after all three checks, the theme may be filtering the_content in a way that strips the auto-injected output. Add the shortcode manually as in step 2.

Caching plugins and page builders

Site Calendar's footer injections rely on JavaScript running after page load. Some aggressive caching setups can interfere with this. The two patterns to watch for:

Asynchronous / deferred JavaScript loading

Plugins like Autoptimize, WP Rocket, LiteSpeed Cache, and Perfmatters offer a "defer all JavaScript" or "delay JavaScript until user interaction" feature. If enabled, Site Calendar's injector script may not run until the user scrolls or clicks — which means the Subscribe button doesn't appear until then.

Fix: Exclude Site Calendar's injector script from defer / delay rules. In WP Rocket, this is Settings → File Optimization → Excluded JavaScript Files; in LiteSpeed Cache it's Page Optimization → JS Settings → JS Excludes. Add this exclusion:

ical-injector.js

HTML minification stripping the template element

Rare but documented. Some minifiers remove HTML5 <template> elements treating them as dead code. If you're using HTML minification and the Subscribe button stops appearing immediately after enabling it, that's the cause. Either disable HTML minification, or add an exclusion rule for template elements.

Server-side caching variants

SG Optimizer's Dynamic Caching, WP Engine's full-page caching, Cloudflare's APO, and similar services serve the same HTML to every visitor until invalidated. Calendar dates that should advance day-to-day can appear frozen on Today's pill or the active month. This isn't a Site Calendar issue but it surfaces here. The fix is server-side: add the calendar page URL to your cache plugin's "never cache" list, or set a shorter TTL for that specific page.

Troubleshooting

"The Subscribe to calendar button is missing on my events page"

Three possible causes in order of likelihood. (1) You're on Site Calendar Lite 1.1.1.12 — that version has a known regression that prevents the injector script from loading. Update to 1.1.1.13 or later. (2) Your theme's events page doesn't use the [pro_calendar] shortcode wrapped in .pcal-archive-wrap — verify by viewing page source and searching for that class. (3) A caching plugin is excluding the injector script — see "Caching plugins" above.

"Add to calendar buttons missing on single-event pages"

Same root cause as the Subscribe button — Lite 1.1.1.12 regression. Update to 1.1.1.13+. If on a newer version, your single-event template may not expose .entry-content or an <article> wrapper that the injector can find — drop in [pro_calendar_addtocal] manually.

"Calendar renders but looks visually wrong — colours, fonts, or spacing"

Your theme's CSS is overriding the calendar's default styles. Open browser DevTools, inspect the broken element, look at the Styles panel to see which rule is winning. Add a higher-specificity override via Appearance → Customize → Additional CSS using class selectors prefixed with .pcal-archive-wrap for scope.

"View-switcher tabs (Month/Week/Day/List/Photo) overflow on mobile"

Five tabs is tight on a 320px-wide phone screen. Most themes handle this with horizontal scrolling or a wrap-to-two-rows layout. If yours doesn't, add:

@media (max-width: 480px) {
    .pcal-toolbar__views { flex-wrap: wrap; gap: 4px; }
    .pcal-viewbtn { flex: 1 1 30%; font-size: 13px; }
}

"Event chips overlap each other in Week view"

This usually means the theme is setting an unusual line-height or font-size on the calendar wrapper that the chip layout doesn't account for. Reset it locally:

.pcal-archive-wrap { line-height: 1.4; font-size: 14px; }

"Theme's global container width is breaking the month grid"

Set the calendar page to a full-width or no-sidebar template. If your theme doesn't expose one, add CSS to force the calendar to break out of its container:

.pcal-archive-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 20px;
}

"Page builder template strips all my Site Calendar styles"

Some page builders enqueue their own CSS reset that nukes plugin styles. Check the builder's settings for "Inherit plugin styles" or "Enable theme CSS" options and turn them on. If the builder doesn't expose this, add Site Calendar's CSS files manually via Code Snippets or your child theme's functions.php:

add_action( 'wp_enqueue_scripts', function () {
    if ( has_shortcode( get_post()->post_content ?? '', 'pro_calendar' ) ) {
        wp_enqueue_style( 'pcal-frontend' );
    }
}, 99 );

"How do I test my theme is compatible before going live?"

Three quick smoke tests on any new theme. (1) Create a test page with [pro_calendar], view it, click each view-switcher tab — all five should render without console errors. (2) Open a single-event page from the calendar — the event details, featured image, and (if Pro) Register form should all appear. (3) Scroll to the bottom of the calendar page — Subscribe to calendar button visible. If all three pass, your theme is compatible.

What's next

• Match your brand colours — the Appearance tab integrates with your theme's palette
• White-labelling your event calendar for client sites — hide the Powered by Site Calendar credit cleanly
• Creating your first event — covers the standard template that always works
• Branded confirmation emails — also picks up your theme's brand colours automatically