How to Add Google Calendar in WordPress

Calendars are probably one of the most used apps on smartphones and tablets. A lot of our users asked us for a way to integrate their Google Calendar in their WordPress websites. In this article, we will show you how to add Google Calendar in your WordPress website. Following the steps in this post, you will be able to integrate Google Calendar on your website, display it in posts, pages or widgets, and it will always be synced with your Google Calendar.

First thing you need to do is install and activate the Google Calendar Events plugin. Once activated, a Google calendar events menu item will appear under the Settings menu where you can setup and configure the plugin.

To use this plugin, you need to get the public feed for your calendar from Google Calendar and add this feed to the plugin. To get the public feed for your calendar, go to your Google Calendar and click on the arrow next to the calendar you want to share. Click on calendar settings where you will find the XML url of your calendar. Right click on the XML icon and Copy link location.

Copying XML Feed URL of a Shared Google Calendar

Now come back to the plugin settings page and click on the “Add Feed button”. Enter you feed title for the calendar and paste the XML URL you copied from Google Calendar into the feed URL. Click the Add Feed button at the bottom of the page, and you will notice that the page has many other options. The important ones are cache duration and time/date format options. For advance level users there is a display builder which they can use to customize the appearance of their calendars.

Adding Google Calendar Feed into plugin

Google Calendar Events plugin uses shortcodes to display the Calendar grid on any post or page you want. Ideally, you might want to create a page titled Calendar or Events to display the calendar. Go to your post or page edit area and add this shortcode where ever you want the calendar to appear:

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

Google Calendar inside a WordPress post

There are several other options available with the shortcode. Like for example you can choose to either have a grid based display or a simple list, or an ajax powered grid. You can mix different calendars into one grid by adding multiple ids in the shortcode. You can also choose to display feed title and configure other options. For a full list of options check out Google Calendar Events Plugin Guide.

The plugin comes with a widget for those who want to display a Calendar widget showing all the events and happenings. The widget will not appear in your Widgets area unless you add a Calendar Feed. Once you add a Calendar feed, you can add a Google Calendar Events widget to any widget areas, sidebar. The widget has the same configuration options as the shortcode.

Google Calendar Widget settings

To modify the appearance of your calendar you need to provide a custom style sheet url on plugin settings page. Go to Plugins > Editor, select Google Calendar Events from the dropdown menu, click Select and then click google-calendar-events/css/gce-style.css from the list of files.

Copying Calendar Stylesheet

Copy the contents of gce-style.css and paste them into a new .css file. Upload this file to your server, any where but in Google Calendar Events directory. Now edit this newly uploaded css file to change the appearance of calendar.

Small community websites, local government websites, corporate websites, band tour sites, and many others can find this Google Calendar plugin immensely useful. This can be used to organize events and let the world know whats happening. There are many other ways to integrate calendar or time management utilities on a WordPress powered website. How are you doing it on your website? Please let us know in the comments below.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s