Adding a Google Calendar to WordPress with short codes

You can easily add a Google calendar to your wordpress blog using this handy plugin.   All you have to do is download the plugin, add it to your wordpress plugins folder like usual and activate it.  You’ll then have to grab a Google data api key here, then create a public calendar in Google Calendars where you’ll need to grab the public XML feed for your calendar.

That’s all cool and everything but what if you wanted to have some form of filter for the calendar. For example you have a school blog and you want to show only the calender entries for trips on the trip page.
So that is what we are going to do today. We will be making a WordPress function that is called with a short code.

So what you will need is :

Thickbox Plugin – Just making it easy for you, you can include the normal jQuery Thickbox yourself if you like
A Google calendar Feed

So lets start

Install the plugin Thickbox Plugin.
Go to Google Calendar and login your Google Calendar and go to Settings > Calendar settings

cal settings

Go to calendars and change your calendar settings to shared.

After you have shared your feed click on the calendar icon. scroll down and you will see your calendar address.
Calendar Address :xml cal
Click on the XML button and copy the address.

Edit your Functions.php

Now open your theme functions file and copy the following in there.

function feeder($atts){
 
 extract(shortcode_atts(array(
		'feed' => '',
		'number' => '',
 
), $atts));
 
 
 
$feed123 = urlencode($feed);
 
//v1.01: Some small bugfixes//30 Jun 2010
//v1.00: Rewrite to remove SimplePie completely, and simply use PHP's inbuilt XML parser.
//       Updated 29 June 2010
//v0.93: Added "make email addresses clickable". Thank you, Bjorn!
//v0.92: Fixed an issue with 'a section of dates' in amendable code. Thank you Kevin!
//v0.91: Nice error message if there are no events to display, requested by Tomas. Thanks!
//v0.90: Feature: clickable links in descriptions (start them http://). Thank you, Adam!
//       Feature: display end times, requested by Lucy. Thanks!
//       Feature: group by date, requested by Lucy. Thanks!
//       http://james.cridland.net/code
 
 
/////////
//Configuration
//
 
 
// Date format you want your details to appear
$dateformat="l, F d, Y"; // 10 March 2009 - see http://www.php.net/date for details
$timeformat="g.ia"; // 12.15am
 
//Time offset - if times are appearing too early or too late on your website, change this.
$offset="+1 hour"; // you can use "+1 hour" here for example
// you can also use $offset="now";
 
// How you want each thing to display.
// By default, this contains all the bits you can grab. You can put ###DATE### in here too if
// you want to, and disable the 'group by date' below.
$event_display="<div class='caldate'>###FROM### <a classname='thickbox' class='thickbox calllink' href='#TB_inline?height=400&width=300&inlineId=hiddenModalContent&modal=true'  value='Show' title='add a caption to title attribute / or leave blank'>###TITLE###</a></div>
<div id='hiddenModalContent' style='display:none'>
 <p>###TITLE###</p>
 <p><strong>When</strong> ###DATE### ###FROM### - ###UNTIL###<br/>
 <strong>Where</strong> ###WHERE### (<a href='###MAPLINK###'>map</a>)</p>
 <p>###DESCRIPTION###</p>
 <p style='text-align:center'><input type='submit' id='Login' value='&nbsp;&nbsp;Close&nbsp;&nbsp;' onclick='tb_remove()' /></p> 
 </div>";
 
// What happens if there's nothing to display
$event_error="<P>There are no events to display.</p>";
 
// The separate date header is here
$event_dateheader="<P><B>###DATE###</b></P>";
$GroupByDate=true;
// Change the above to 'false' if you don't want to group this by dates,
// but remember to add ###DATE### in the event_display if you do.
 
// ...and how many you want to display (leave at 999 for everything)
$items_to_show= $number;
 
// Change this to 'true' to see lots of fancy debug code
$debug_mode=false;
 
//
//End of configuration block
/////////
 
if ($debug_mode) {error_reporting (E_ALL); echo "<P>Debug mode is on.</p>";}
 
// Form the XML address.
$calendar_xml_address = 'your xml feed adress/public/full?q='.$feed123.'&singleevents=true&futureevents=true&orderby=starttime&sortorder=a'; //This goes and gets future events in your feed.
 
if ($debug_mode) {
echo "<P>We're going to go and grab <a href='$calendar_xml_address'>this feed</a>.<P>";}
 
// Set the offset correctly
$offset=(strtotime("now")-strtotime($offset));
if ($debug_mode) {echo "Offset is ".$offset;}
 
$xml = simplexml_load_file($calendar_xml_address);
 
if ($debug_mode) {echo "<P>Successfully retrieved it.</p>";}
 
$items_shown=0;
$xml->asXML();
?>
<div id="call">
<?php
foreach ($xml->entry as $entry){
    $ns_gd = $entry->children('http://schemas.google.com/g/2005');
 
    //Do some niceness to the description
    //Make any URLs used in the description clickable: thanks Adam
    $description = eregi_replace('(((f|ht){1}tp://)[-a-zA-Z0-9@:%_\+.~#?,&//=]+)','<a href="\\1">\\1</a>', $entry->content);
    // Make email addresses in the description clickable: thanks, Bjorn
    $description = eregi_replace('([_.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3})','<a
href="mailto:\\1">\\1</a>', $description);
 
    // These are the dates we'll display
    $gCalDate = gmdate($dateformat, strtotime($ns_gd->when->attributes()->startTime)-$offset);
    $gCalStartTime = gmdate($timeformat, strtotime($ns_gd->when->attributes()->startTime)-$offset);
    $gCalEndTime = gmdate($timeformat,strtotime($ns_gd->when->attributes()->endTime)-$offset);
 
    // Now, let's run it through some str_replaces, and store it with the date for easy sorting later
    $temp_event=$event_display;
    $temp_dateheader=$event_dateheader;
    $temp_event=str_replace("###TITLE###",$entry->title,$temp_event);
    $temp_event=str_replace("###DESCRIPTION###",$description,$temp_event);
    $temp_event=str_replace("###DATE###",$gCalDate,$temp_event);
    $temp_dateheader=str_replace("###DATE###",$gCalDate,$temp_dateheader);
    $temp_event=str_replace("###FROM###",$gCalStartTime,$temp_event);
    $temp_event=str_replace("###UNTIL###",$gCalEndTime,$temp_event);
    $temp_event=str_replace("###WHERE###",$ns_gd->where->attributes()->valueString,$temp_event);
    $temp_event=str_replace("###LINK###",$entry->link->attributes()->href,$temp_event);
    $temp_event=str_replace("###MAPLINK###","http://maps.google.com/?q=".urlencode($ns_gd->where->attributes()->valueString),$temp_event);
    // Accept and translate HTML
    $temp_event=str_replace("&lt;","<",$temp_event);
    $temp_event=str_replace("&gt;",">",$temp_event);
    $temp_event=str_replace("&quot;","\"",$temp_event);
 
    if (($items_to_show>0 AND $items_shown<$items_to_show)) {
                if ($GroupByDate) {if ($gCalDate!=$old_date) {$retval .='<div class="datehead">'.$temp_dateheader."</div>"; $old_date=$gCalDate;}}
       $retval .= $temp_event;
        $items_shown++;
    }
 
}
return $retval."</div></div>";
?><?php
if (!$items_shown) { return $event_error; }
 
}
 
add_shortcode('calendar', 'feeder');

Replace “your xml feed address” with your XML address.

$calendar_xml_address = ‘your xml feed adress/public/full?q=’.$feed123.’&singleevents=true&futureevents=true&orderby=starttime&sortorder=a’;

Calling your calendar

In your post edit box copy the following:

[calendar feed="key word" number="number"]

feed is the key with which you feed is going to be queried.

number is the number of entries to show.

Below I’m pulling 4 post form a demo with the query “something more”

[calendar feed="somthing more" number="4"]

[calendar feed="somthing more" number="4"]

Credit to James Cridland for the feed handling code. You can get the original code here

Related Posts

2 thoughts on “Adding a Google Calendar to WordPress with short codes

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy this password:

* Type or paste password here:

2,574 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">