How to Update a WordPress Event Sidebar from iCal using Google Calendar (and other Google Fun!)

This week I signed my personal site up for Google Apps. I’ve been getting a mountain of Spam since my email address hasn’t changed in years and my host (though I love them) will charge $1.99 per email address for Spam Protection, something that Gmail does for free. As well, with Gmail, you’re working with algorithms built by millions of other users so it’s quite accurate!

Google Talk Badge

There’s been additional benefits to moving to Google Apps that I did not realize, though! The first is the ability to integrate Google’s Instant Messaging application, called Talk, directly in my sidebar via a Google Talk Badge.

Google Notifier

As well, I’ve now got Google Notifier, which alerts me when I have email and, as of today, integrates with Google Apps and alerts me when I have calendar events as well. It’s a great little application.

Google Calendar iCal Synchronization

Perhaps the biggest news this week was when my friend, Bill, posted about Google Calendar’s support of CalDav and the ability to synchronize iCal and Google Calendar. It’s pretty simple:

  1. Open iCal Preferences
  2. Add an Account
  3. Enter your Google Email Address and Password
  4. Enter your Calendar address:

ical google

I didn’t want to share my primary calendar on my WordPress sidebar, so I added another Calendar to my Google Calendar and then add it to iCal as well. There are directions for synching your secondary calendars with iCal. It’s simply a different URL.

Google Calendar WordPress Integration

The last step is to install the Google Calendar WordPress Plugin to add a widget to your Sidebar that parses and displays the events from your Calendar. There are some nuances with this plugin, though, that should be paid attention to:

  1. Sign up for a Google Data API Key, you’ll need it to enter into the Plugin’s settings.
  2. When you enter the XML address for your Calendar’s feed, be sure you replace the last node of the url with ‘full’ so that the address looks like this:
  3. The widget displays the month and date pretty ugly. This is due to formatting in the JavaScript and it can be easily modified. In functions.js at line 478, you will find the formatting of the date. If you’d like to have the date displayed in a different format, you can modify the output string. Example:
    dateString = displayTime.toString('dddd, MMMM dd, yyyy');
  4. The widget title is not displayed in accordance with WordPress API and default widget functionality. Someone was nice enough to post the correction for this in Google Code but it’s not been released yet. Here are directions on what code to replace to correct the widget title issues.

With this fully integrated, I can now utilize Google Notifier or iCal and add an event that will display on my sidebar! The amount of time it takes depends on your synchronization settings between iCal and Google.


  1. 1
  2. 2

    That was great. Tried many event calendars, found none suitable. The Google wpng plugin was ideal except for the points above. And, I have zero knowledge of scripting. So…
    My heartfelt Gratitude.

  3. 3

    …adding my thanks to the above posters….

    Your quick and effective visual examples were incredibly helpful to a webmaster switching from html to wordpress.

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.