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.
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.
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"]
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.
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.
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.
I will admit to being largely computer-illiterate. I don’t understand about 80% of the lingo. Despite these shortcomings, I somehow miraculously subscribed to Google Calendar AND got it onto my WordPress blog on a page. (I assure you it was accomplished by fumbling my way through for nearly 4 hours. Sigh!
) Here’s what I don’t quite understand: When I make changes or updates to my calendar through Google Calendar, how do I make it change on WordPress? Do I have to go through all those steps of making, copying and pasting that letter/number/symbol code again? I also, through many trials and many, many errors, got it to go onto my sidebar thing. It’s not in calendar form, though; it’s just almost like a bullet-pointed listing. How do I make that change, too? Do they change simultaneously or do I have to deal with them separately? Oh, woe is me with my past-the-half-century-mark brain! Can you please help me out with any answers?
Hey Alycia,
Good job on sticking with it, and working through the steps. When setup properly, the plugin should be able to extract your calendar feeds for events, so you do not have to update the calendars manually on your WordPress end. The reason why it doesn’t update right away is because this plugin caches the data.
The plugin does this so that it doesn’t need to retrieve the data from Google’s servers every time someone views a page of your site that utilises the plugin. This reduces page load times a little, uses less of your bandwidth and prevents the possibility of being blocked by Google for ‘spamming’ their servers with requests.
Thank you! I checked again, and I see that the updates ARE on there!!! I guess it just took a little time! Thank you SO much for following up with me! I will hopefully get better with all of this in time. You know the old saying: “It’s hard to teach an old dog new tricks.” Woof!
Thanks again so much for your help!
Love it! What would you guys recommend for a professional service provider that would like to let clients book appointments on his Google Calendar?
Great write up. the only thing I don’t like about this plugin is that you can’t see the events unless you roll over them, using the “tooltip” type of viewing. This makes it more difficult to see on mobile devices. I like this plugin but may have to find another for large event heavy sites.
Thanks.