How to Add a Google Calendar to Your WordPress Page

Sometimes I need to put a calendar on client’s website. This is helpful for fitness trainers, event planners, etc. A Google Calendar is super easy for the client to update without logging into the website. It’s a handy tool.

Now, it’s not hard to embed a Google Calendar, because Google generates the code for you. However, WordPress makes it a little tricky. Here’s why.

A lot of my clients don’t know how to edit code, so they like to edit their pages and posts in the WordPress visual editor. The only problem with this is that the embed code from Google is an iframe, and WordPress doesn’t like iframes. The result is that when you add the code in the HTML editor and save the page, the calendar displays as planned. But if you then switch to the visual editor, the code gets deleted.

That’s pretty lame.

So what’s the fix? It involves a little custom coding, but it’s worth avoiding the hassle of re-creating your embed code every time you log onto that page in the visual editor by mistake.

I’m using the Thesis Theme for WordPress, and because you’re reading this blog I’m going to assume you’re using Thesis too. So here’s what to do:

In your custom_functions.php file, add this code:

function g_calendar() {
return 'PASTE YOUR GOOGLE CALENDAR EMBED CODE HERE. INCLUDE THE OPENING AND CLOSING BRACKETS FROM THE IFRAME' ;
}
add_shortcode ("gcalendar", "g_calendar") ;

Then using the HTML editor, add this code in the content area of a post or page – wherever you want the calendar to appear:

[gcalendar]

Save the post/page, and that’s it. Now when you need to edit, you can safely use the visual editor without breaking the calendar.

Are there any specific tips you’d like to hear more about? Leave them in the comments!