Falcon1986-Online

Home of a med student who likes to manage websites and talk tech!

Insert Google Calendar into WordPress without header bloat

with 9 comments

WordPress LogoEver 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.

Advertisements

Written by falcon1986

22 July, 2008 at 5:30 PM

9 Responses

Subscribe to comments with RSS.

  1. hello,
    is this for wordpress.com blogs? if so, how do you get to the page.php site? thansk!
    mike

    Michael Koch

    6 October, 2008 at 7:27 PM

  2. Unfortunately, you cannot edit these files for WordPress.com blogs by default. I’m not sure what the situation is if you choose to upgrade various parts of your WordPress.com account so you are more free to edit files. However, this information was meant for a WordPress installation on your own web server.

    falcon1986

    10 October, 2008 at 8:41 PM

  3. Just a question what theme do you use? Is it a expensive template? Did you hire a freelancer to create that? I like that design. My website is http://www.wordpressrobot.com/

    Wordpress Autoblog Plugin

    2 December, 2009 at 2:54 PM

    • Since this is a blog hosted with WordPress.com, all themes are also hosted by them. The exact theme name is ‘The Journalist v1.9’ by Lucian E. Marin.

      falcon1986

      3 December, 2009 at 8:47 PM

  4. Good post mate!! Keep ’em flowing!

    Attili Sattibabu

    2 December, 2009 at 11:44 PM

  5. your theme is giving me php errors ?

    thatflash

    3 December, 2009 at 11:48 AM

    • Are you confusing the words “theme” and “template”? Remember, the code for the template file was derived from my own WordPress theme’s page.php file. You may have to create a template using your own page’s template then proceed with inserting the iframe code.

      falcon1986

      3 December, 2009 at 8:56 PM

  6. Well very odd behavior. I did this and the preview works fine, however once I post it, the Calender is gone.. Very strange..

    jpc

    28 August, 2010 at 3:29 PM

  7. You had me up until

    # Upload your template file to the directory corresponding to your WordPress site’s theme.

    How do I do this exactly??

    chris

    20 November, 2011 at 6:34 PM


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

%d bloggers like this: