Embedding a Google Calendar into WordPress
I was working on a project yesterday that wanted to show a Google calendar on a WordPress page. I didn’t expect to run into any problems with this (silly me). I thought I could just paste the calendar embed code into the HTML tab of the WordPress page. The Google calendar embed code is simply an iframe tag which calls your specific public Google calendar with some additional style values such as width and height. However, when I clicked the “Update” or “Publish” button, the HTML code disappeared. It turns out the WordPress editor doesn’t really like iframe tags and will remove them by default. So I pasted my embed code into the HTML tab and clicked update three more times. It didn’t work on the first try, but maybe it will work the second or third one right? My persistence wasn’t producing results so I decided to actually research the problem.
I really didn’t know what else to try at this point. Of course I ran to Google and searched “embedding google calendar into wordpress” to get me started. Well, lots of people have run into this problem and a lot of them have offered solutions. I even ran across several people who claimed the method I had originally tried would work. Maybe that was an earlier version of WordPress. Anyhow, I did finally stumble upon an interesting solution and gave it a shot.
When you create a WordPress page (not a post) there are a group of options under the heading “Page Attributes”. One of those options is a field called “Template” with a drop-down box listing custom template pages which were included with your site template. If this value is set to “Default Template”, the page is rendered with the /wp-content/themes/<yourtheme>/page.php file in your WordPress directory. With this field, you can select a different script to render the page. My template only came with three other options: “Archive”, “Custom”, and “Links”. I knew I could put the Google calendar embed code into a template page so I decided to make a custom page specifically for this purpose.
This is actually very simple to do and there are only three steps. The first two are obvious but it took a bit of searching to discover the final step. The first step is to make a copy of your /wp-content/themes/<yourtheme>/page.php file and rename it. The second step is to open this file in a text editor and paste in the Google calendar embed code. Find the line in that script which looks similar to this:
<?php the_content('<p>Read the rest of this page »</p>'); ?>
You can either paste the embed code just before that line or just below it. If you paste it above that line, any content you enter into the page will display after (or below) your calendar. If you paste it below, your content will show above your calendar.
The third and final step is actually quite important. In order for this new page to show in the “Template” drop-down list for Page Attributes, you have to add a line in a PHP comment at the top of the page. It should look something like this:
/* Template Name: <yourname> */
Without this line, your page won’t show in the list. Whatever you enter as <yourname> is what will display in the drop-down list.
Now you can go back and create your WordPress calendar page. Simply select your new custom template from the “Template” drop-down list and publish. If you don’t enter any content into the editor, only your calendar will show. You may have to edit the embed code to get your calendar to fit within the dimensions of your template. It may be too wide or too high for where you are trying to display it. This all depends on what template you are using.
Hope this helps. There are certainly other solutions to this problem. There are various plug-ins as well which will either allow the iframe tag or pull the Google calendar data some other way. I prefer this solution for several reasons. I don’t really want the iframe code in the HTML tab of the WYSIWYG editor. Some inexperienced site users might accidentally break it while experimenting with their HTML skills. I also didn’t want another plug-in to manage or some other calendar display besides the Google default view. This solution works, it looks great, and none of the site users will understand it which means they won’t be able to break it!
Leave a Reply
-
Sorry about the mess. My WordPress template still needs a lot of work. I'll get around to it eventually. Is the clutter in your way? Click here to clear the desk.