Show a Google Calendar on WordPress without the iframe

A lot of club, church and studio websites show their events with Google Calendar's embed code. It works, and it's free, but it's also why the events page looks like a different website. Here's what the embed gives you, the other way to put a Google Calendar on a WordPress site, and what to check before you trust a plugin with it.

Disclosure: I build Beacon Events, a WordPress events plugin that syncs calendar feeds. The checklist below applies to whatever you use.

What the embed gives you

Google's embed code is an iframe with a fixed width and height (its customize page asks for at least 500 by 500). Inside it, everything is Google's page:

• It doesn't fit. A fixed-size box needs extra CSS before it behaves on a phone.
• It doesn't match. You can pick colours and hide a few tabs, but not your theme's fonts or layout.
• Your site gets nothing for search. The events live on Google's page, so your site has no page per event and no Event markup for search results.

The other way: sync the feed

Every Google Calendar has an iCal (ICS) address. A plugin can read that address on a schedule and turn each event into a real post on your site. You keep editing in Google Calendar, as you do now, and the website follows.

To get the address: open Google Calendar on a computer, go to Settings, click your calendar on the left, and click "Integrate calendar". The "Public address in iCal format" only works if the calendar is shared publicly ("Make available to public" under access permissions). If you'd rather not make it public, the "Secret address in iCal format" works too. Treat it like a password: anyone who has it can read the whole calendar.

What to check in a plugin that syncs

Google's feed has a few habits that trip up sync code. Try these with a test calendar before you point a plugin at the real one.

1. A repeating event stays one event. A weekly service should arrive as one event with a rule, not 52 separate posts.
2. One changed date doesn't break the series. When you move or cancel a single date of a repeating event, Google sends that date as a separate entry with the same ID as the series. Sync code that matches on the ID alone overwrites the whole series with that one date.
3. Old series still show upcoming dates. A weekly event that started years ago should still show next week. Some plugins only work out dates for a fixed period from the first one.
4. Skipped dates all stay skipped. Google writes one line per skipped date. Code that keeps only the last one brings the others back.
5. Evening events land on the right day. Some feeds write times in UTC, where 7:30 pm in Chicago is already Wednesday. The weekday has to be moved back.
6. Deleted events are handled in a way you can live with. Removed from the site, hidden, or kept: know which before it happens to a real event.
7. You know how often it syncs. WordPress's scheduled tasks run when someone visits the site, so an "hourly" sync on a quiet site can run late unless the host runs a real cron job.

One more thing that's true of any sync: edits you make on the WordPress side get overwritten on the next run, because the feed is the source. Change events in Google Calendar, not in WordPress.

If you want to try Beacon Events

The calendar is free on wordpress.org. Paste the feed address under Events → Settings, optionally followed by a category, and it syncs hourly with a log of what was created, updated or removed each time. A repeating event stays one event, and a moved or cancelled date shows as moved or cancelled on the series. Events that disappear from the feed become drafts rather than being deleted. It shows month, list and day views as blocks or shortcodes in your theme's fonts, and every event gets its own page with Event markup for search.

https://wordpress.org/plugins/beacon-events/

If your calendar does something odd in any plugin, describe it in the comments and I'll look at the feed.