Insert Google Calendar iFrame into WordPress page [UPDATE]
In 2008, I published an article about one way in which you can go about Inserting your Google Calendar into WordPress without using a plugin. The post generated quite a bit of feedback for which I appreciated very much. Recently, I had to update the calendar on one of the websites I manage because our WordPress theme changed, so I consulted my own article for instruction. After reading through, I realized that illustrations could have been helpful, especially for those of us who need visual cues so we can verify that what we are doing is the correct thing. Therefore, this post will serve as an update to the old one and should be more helpful.
A. Why are you doing this?
If you work with websites belonging to organizations like I do, you realize the importance of having a calendar of events. Not only do calendars give website visitors an overview of what the organization has planned, but they also provide existing members with easy-to-access reminders of key events. Not everyone needs to display a calendar, however. In corporate environments, for instance, calendars may only be necessary for employee eyes only.
B. Why do it this way rather than using a plugin?
Whenever I want to add functionality to WordPress, I try to find solutions that do not require plugins (at least to begin with). It is no big secret that having too many plugins can transform WordPress into a bloated slug, so it helps to minimize their usage especially when simpler solutions are available. I chose to go the iframe route because I only required that the calendar be displayed and nothing else. No need to add more PHP to increase server-side demands on resources. As a matter of fact, you can modify this technique to insert practically any iframe you want. The only part that some persons may feel anxious about is editing WordPress page template files, but once you can follow instructions, the rest will be pretty simple.
C. Let’s get to work!
The reason we cannot insert the iframe code directly into the page/post editor is due to the code stripping that takes place upon publishing. Of course, you can use a plugin to insert the iframe, but we are going to get our hands a bit dirty here. Essentially, you will be creating a new page template derived from your theme that calls for the Google Calendar iframe.
- Access your WordPress themes directory
We will associate our Google Calendar with a WordPress template. Please note that a page template is not synonymous with a theme within WordPress. The files that make up your WordPress theme contain templates for your pages, posts, archives, etc. Access your WordPress theme’s directory and make a copy of the template you wish to modify.
- Make a copy of an existing template
Your theme may have different page templates available. In my case, I have a template that allows me to use the full page width without sidebars, which will be perfect for displaying a large calendar. The page.php should be sufficient if you do not know what to choose.
- Start editing the template
Open the template in a simple text editor and start by assigning a template name at the very top of the file’s contents. If a template name is already there, change it to something else. Here is what I used for simplicity.
<?php /* Template Name: Google Calendar */ ?>
- Set your Google Calendar to ‘public’
Open a web browser and log in to your Google account. Navigate to your calendar. Under ‘My Calendars’, click on the drop-down menu beside the calendar you wish to publish and select “Share this calendar”. Save. Doing this is required for in order for others to see your calendar without having to provide login information. Do not worry, they cannt edit any of the entries.
- Retrieve the iframe code
Return to ‘My Calendars’ and click the drop-down menu beside the calendar you wish to publish, but this time select ‘Calendar Settings’. Scroll down to the area ‘Embed this Calendar’ and copy the iframe code that is there. Alternatively, you can customize how your calendar looks then use the iframe code automatically generated at the end of your customizations.
- Insert the iframe code into the new template
Paste the iframe code into the new page template that you created earlier. The exact location within your page template will vary from theme to theme. Since I want my calendar to appear where the content would normally appear, I inserted the iframe code immediately after the PHP call for
<?php /* Template Name: Google Calendar */ ?> <?php get_header(); ?> <div id="content"> <?php include(TEMPLATEPATH."/breadcrumb.php");?> <div id="contentfull"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post"> <h1><?php the_title(); ?></h1> <?php the_content(__('Read more', 'studiopress'));?><div class="clear"></div> <!-- Insert Google Calendar iframe code here --> <?php edit_post_link(__('(Edit)', 'studiopress'), '', ''); ?> </div> <?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.', 'studiopress'); ?></p><?php endif; ?> </div> </div> <?php get_footer(); ?>
- Save and upload the new template
Save the new template under a unique file name. For simplicity and easy identification later, you can name it page_googlecal.php. Upload this file to your web server and place it within your working theme’s directory.
- Create a new page and apply the template
Log in to your WordPress dashboard and create a new page. Give it a title, but do not add any post content yet. Before publishing, look for the ‘Attributes’ panel and, under the ‘Template’ section, select the Google Calendar template that you recently created. Note that the exact name you see here will depend on what you specified as the template name in step 3.
- Publish and test
Publish the page and navigate to its URL to see your calendar. There you have it! If you were successful in completing the steps your Google Calendar should now be displayed on one of your WordPress pages.
- Go back, manipulate and test
Do not expect the calendar to display properly the first time. It may be too wide or too narrow for your page. Here is where you need to return to the Google Calendar’s iframe generator to select an appropriate width and height. In order to utilize the full page width you can manually change the
widthvalue within the iframe code to reflect
width="100%". This change will allow your calendar to dynamically adjust to your theme’s maximum page width. Give
heightan absolute pixel value that best fits your page. Replace the iframe code within your Google Calendar page template with the modified code until you are happy with the appearance.
The file contains a lot of PHP, but the basic outline of the template will read like this.
<?php /* Template Name: Google Calendar */ ?> <?php get_header(); ?> <!-- Lots of code in between here --> <?php get_footer(); ?>
Well, I hope this updated guide helps you better understand the process of inserting the Google Calendar into your WordPress page without the need for a plugin. Realize that you will have to create a new page template for each theme you use in order for the calendar to display. If you have any questions please do not hesitate to ask within the comments. Constructive feedback is also welcome.