Falcon1986-Online

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

Insert Google Calendar iFrame into WordPress page [UPDATE]

with 36 comments

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

  1. 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.
    FTP layout of theme directory

    Sample WordPress theme files as seen over FTP

  2. 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.
  3. 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
    */
    ?>
  4. 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(); ?>
  5. 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.
    Google Calendar Share Settings

    Google Calendar Share Settings

  6. 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.
    Google Calendar iFrame

    Google Calendar iFrame retrieval

  7. 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 the_content();.

    <?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(); ?>
  8. 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.
  9. 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.
    Change WordPress page template

    Change the WordPress page template

  10. 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.
  11. 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 width value 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 height an 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.

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.

About these ads

Written by falcon1986

19 February, 2010 at 5:24 PM

Posted in Wordpress

Tagged with , ,

36 Responses

Subscribe to comments with RSS.

  1. Excellent! Thank you very much. This worked perfectly and was just what I was looking for.sk

    Al

    31 December, 2011 at 12:10 PM

  2. Hi, I do believe your blog may be having web browser compatibility problems.
    When I look at your website in Safari, it looks fine however when opening in IE,
    it has some overlapping issues. I merely wanted to give you a quick heads up!

    Other than that, wonderful blog!

    chat video online

    4 August, 2013 at 3:09 AM

  3. It’s a pity you don’t have a donate button!
    I’d most certainly donate to this fantastic blog! I suppose for now i’ll settle for bookmarking and adding
    your RSS feed to my Google account. I look forward to
    brand new updates and will talk about this site with my
    Facebook group. Talk soon!

    Kian

    18 December, 2013 at 9:16 AM

  4. Repeat process of resting and whisking 2 more times
    until mixture is thick, smooth, and shiny, will look like a melted caramel
    square. This handy grill is very awesome with regards
    to cooking regardless of what time of your day
    it is. Smartie cookies are deliciously soft, which enable it to be substituted for M&M’s.

    Corine

    5 April, 2014 at 4:22 PM

  5. For that very reason, you happen to be seeking a great investment in the guests, not merely a good investment
    time for attending the shower but in addition a smart
    investment of the money for buying the right gift to the bride.
    This handy grill is completely awesome when it comes to cooking whatever time of the afternoon it really is.
    The basic point of holding a shower would be to indulge the bride.

    fourfootedfotos.com

    16 April, 2014 at 11:22 AM

  6. I just couldn’t leave your website before suggesting that I extremely loved the standard
    information a person provide on your guests? Is gonna
    be again often in order to inspect new posts. Over the internet can easily facebook likes for a discount?

    affordable and also effective facebook likes
    If you want in order to facebook likes, we are able to assist you!

    facebook likes

    29 May, 2014 at 7:50 AM

  7. This method is generally not adopted due to
    the large size of the tank required to hold the wastewater generated.
    This recycled water is not considered potable water to be used
    as drinking H2O. Water is one of our most if not the most precious commodity that we have.

    Deloras

    2 June, 2014 at 9:07 PM

  8. celine 2015
    I am extremely impressed with your writing skills
    and also with the layout on your blog. Is this a paid theme or did you customize
    it yourself? Anyway keep up the nice quality writing,
    it’s rare to see a nice blog like this one nowadays.

    celine 2015

    4 July, 2014 at 11:08 PM

  9. Hello there, just became alert to your blog through Google, and found
    that it’s truly informative. I’m going to watch out for brussels.
    I will be grateful if you continue this in future. A lot of people will be
    benefited from your writing. Cheers!

    note

    25 August, 2014 at 5:32 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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: