ThemeLab's Blog

Stay up to date with our newest WordPress themes, WordPress plugins, WordPress tutorials, and other announcements.

How to Add Google Calendar in WordPress

Last Updated on by

How to Add Google Calendar to a website

Calendars are used by just about everybody for scheduling events and sometimes you want everyone to know about what is on your calendar. A few of you out there may want to add your Google Calendar to your WordPress website for just this reason. So in this article I plan on showing you how to sync and integrate Google Calendar into your WordPress site.

Start by installing the Google Calendar Events plugin. This will add a new section under Settings called Google Calendar Events where you can edit a few settings.

To use this plugin properly you will need to go into your Google Calendar, on the left hand side you will choose which calendar you want to share. Ensure this calendar is public for the plugin to be able to see it properly, the “Share this Calendar” page is where you would ensure it is public. Click the arrow next to the calendar of choice and go to settings. From the settings page you can see a section called “Calendar Address”, you want to press the XML button and copy the link given to you.

Google Calendar XML Button

With that information in hand you will want to go to your Google Calendar Events settings page and click on the Add Feed button under Add New Feed. Choose a title for your feed and insert the URL from your Google Calendar into the Feed URL box. While there are a plethora of other options and boxes below this, most those are for advanced adjustments and I will not delve into those today.

Google Calendar Feed

Now that you have set up your calendar for your site you will need to display it on your site. The plugin uses shortcode to display the calendar so you may want to consider having a page titled calendar and simply add the shortcode to the text editor of that page. While that is one way to show the calendar placing the following shortcode anywhere will make it appear:

[google-calendar-events id="1"]

Google Calendar Sample

This shortcode has a wide array of possible options such as setting it as a grid, a simple list, or an ajax powered grid. For the full list of options you can use go and check the Google Calendar Events Plugin Guide.

If you would prefer to place the calendar as a widget, this plugin can accommodate your needs. The widget will not appear if you don’t have a calendar feed. When you have a calendar feed you can add the widget to any widget area, it even has the same options as the shortcode.

Google Calendar Widget

For advanced users if you want to change the appearance of your calendar you will need to provide a custom style sheet url in the settings of the plugin. To create one go to Plugins >> Editor and select Google Calendar Events from the dropdown menu, then choose google-calendar-events/css/gce-style.css from the list of files. Copy that file’s contents into a new .css file and upload your new file to your server anywhere that is not in the Google Calendar Events directory. Edit this new file to change the appearance of the calendar.

If your site is one that requires multiple people to know the dates for your events like a band, local government, or even a restaurant with specials Google Calendar can be useful to you. It can be an incredible tool for organizing events or time management.

I hope you liked the article and have found the Google Calendar plugin useful to you.

If you liked this article, then join ThemeLab on Twitter and Google+.

About

Jeremy is a WordPress fanatic. He enjoys League of Legends and roaming through random games he gets his hand on.