Insert Google Calendar into WordPress without header bloat

Ever since I discovered how to password protect individual pages on my WordPress blog a few things started to click in my brain. I thought that, if you could use a different template for each page on your WordPress blog, why not extend this to integrating other things as well. The main driving force for me wanting to do this was due me feeling that some features could probably be better integrated without the use of plugins, especially when site performance is an issue. As you may or may not know, a lot of WordPress plugins automatically insert call functions into your site’s header that can have a negative impact on site loading time for your viewers. Furthermore, why add extra call functions for features that your users may never utilize on a particular page if they never visit that page to begin with?

One of the nice features I like about using Google Apps is the Google Calendar. Personally, I am not very organized and do not have really use it to plan my days [yet], but it does come in very handy for the campus organization website I help to manage. Our WordPress site needed a way for our members to view a calendar of events that had a similar graphical structure to the Google Calendar. I found quite a few dedicated calendar plugins and even a plugin that allowed for the integration of your Google Calendar into your website, but the latter did not seem to want to work properly. I removed all of the calendar plugins and recalled how I had used a custom page template for a slightly different purpose some time ago. Why should it not work this time? Here are the steps required to insert the Google Calendar into a WordPress page. Before you continue, you should know that this solution utilizes inserting the Google Calendar as an iframe, so if iframes are “not your thing”, then you probably will not want to use this method.

1. Locate the page.php file for your WordPress theme (usually in /wp-content/themes/<yourtheme>). Open it in your favourite text editor (Notepad works fine) then copy/paste the PHP code contents to a new file.
2. Log into your Google Account and navigate to your Calendar. Select the calendar you want to display and view that calendar’s settings. On the ‘Calendar Details’ page, scroll down to the bottom where you see “Embed this calendar“.
3. You can go ahead and customize how your calendar will appear. You may have to return to customize settings further once you see how it looks when displayed on your page.
4. Copy the generated iframe code and paste it into your new template file as indicated by the comment in this page template sample (.php file).



5. Save your new template file as a .php file and a name you will be able to recognize later.
6. Upload your template file to the directory corresponding to your WordPress site’s theme.
7. Access your WordPress dashboard and choose to create a new page. Give it a title as you normally would and scroll down to the ‘Page Template’ drop-down box. Your new template file’s filename will be listed here. Select it and publish your new page
8. Navigate to your new page’s URI to view your Google Calendar. Voila!

Depending on how your page is laid out, you may have to make adjustments to your height and width dimensions as specified in your iframe code. Play around with a few different dimensions until your calendar fits into your page neatly. You may want to return to the iframe code generator for other minor manipulations.

You have now inserted your Google Calendar into your WordPress blog without the need for using a plugin. This also means that no additional call functions have been placed in your header so the calendar only loads when pages using your custom page template are executed. Great work!

UPDATE [03-Dec-09] – I have posted the PHP code here so you can just copy/paste instead of downloading the .php file from drop.io.