I’ve blogged in the past about my endless DTLT Web Site Redesign project. And I’ve committed myself to regularly blogging about what I’m doing as part of that project. And then, of course, I’ve promptly broken that commitment. Oops.

I guess it’s time for an update, and, to start, I want to describe how I’m handling event presentation on the new site. (We actually launched it a few weeks ago, but there’s still a lot more work to do.)

I knew that one of the features of the new site needed to be a way to publish information about upcoming teaching and learning technology-related events. I wanted this not only to be a mechanism for publishing information about our own events but for sharing information, particularly with UMW faculty, about events that ELI, NMC, and NITLE were hosting.

To start I played around with a host of Event plugins for WordPress. But they all failed me in one way or another.

Events Calendar, which we’ve had in UMW Blogs for quite some time, has tons of features but there was one thing it didn’t do well. See, I wanted my events to have a post-like presence within the site. In other words, I wanted to be able to use the standard WordPress Loop to filter info about events and I wanted to be able to tag them and categorize them like all the other content on the site. Events Calendar creates a whole separate structure for storing event information. It was also, quite frankly, a beast of a plugin. There were more features then I really needed.

I looked around a bit for a calendar plugin that would actually store events as posts. Event Calendar 3 looked promising, but it wasn’t compatible with the latest version of WP.

Events Category looked really promising — very simple and elegant solution. But it’s not being maintained anymore. Vent also looked like a possibility, but, again, no 2.8.4 love.

Then I stumbled upon this funny, half-baked plugin called Upc0ming. It seemed to allow you to show all upcoming events on a Google Calendar in a sidebar widget. I thought this sounded intriguing. We use Google calendars pretty regularly in DTLT, and I thought it might be nice to publish our events in that application, and then just feed information into the site.

The next challenge was how to get information about those events into the main content stream of the site. Simply displaying Google Calendar events wasn’t going to solve my dilemma of how to tag and categorize event information just like any other post on the site.

Then it occurred to me that I could actually grab an RSS feed from Google Calendar and run it through FeedWordpress. Each event could become a post (that I could automatically stick in an “Event” category with FWP’s settings). As FWP captured those events, I could tag them appropriately. Granted, this requires me to remember to periodically go in and tag posts, but this didn’t seem like to big of a deal. I expect to be spending quite a bit of time in the back-end of this site, anyway. It also meant anyone in DTLT could easily add an event to our Google Calendar (which I shared with everyone in the division) and it would just show up in the site.

This solution took me about halfway to where I wanted to be. At this point, I had a widget on my homepage that would show upcoming events. If someone clicked on the “More information” link, they’d be sent to the Google event page (which I actually programmed to open in a thickbox). However, if they ended up on a tag page where an internal page post (fed by FeedWordpress) for an event showed up, they’d go to that post not the Google calendar. This didn’t seem ideal to me. The information fed in from Google Calendar wasn’t elegant or formatted, so those posts were sort of unappetizing. And I really wanted people’s experience to be consistent.

As a solution, I decided to hack the archive template of my theme. For those of you who don’t know, the archive template (archive.php) is the template that gets used by default whenever a user goes to any category or tag page. So, for example, if a user clicks on a link for the tag “umwblogs,” WP uses the archive template to show all the posts that have been tagged with “umwblogs.” The Loop in the template is set to just return those posts that fit whatever criteria is appropriate to the page someone has browsed to.

I went ahead and modified The Loop so that if the post was in the category “event,” (which every Google Calendar-fed post would be), WP would use a link to the Google Calendar event (in a thickbox, again), instead of a link to the post. I was able to do this because when FeedWordpress makes posts out of a Google Calendar feed items, it puts the original calendar item url into a custom field called “syndication_permalink.”

So what does this all mean? Basically, it means that the event information that gets fed into posts from Google Calendar (supplemented by my own manual tagging) can be used to filter events, but what users actually see when they want more information is the Google Calendar event not the ugly post. The post just serves as placeholder for storing information about the event that WordPress can use for filtering.

I’d like to say that this was the end of my journey, but, of course, it wasn’t. It gets better. 🙂

I mentioned that the plugin I was using to display the Google Events was upc0ming. Out of the box, this seemed to work. I plugged a Google Calendar feed address into it, and it spit out a nicely formatted event item in a sidebar widget. However, I quickly noticed some problems. First, events weren’t ordered by when they were going to occur, but by when I had authored them (more on this later). Second, I couldn’t control how many events were showing up — by default it just showed me everything. Third, when an event was over, it didn’t drop off the list (again, more on this later).

I decided I needed to go back to the drawing board to find a better way to display my Google Calendar events on the homepage. I actually worried that all my work mentioned above might have been for naught. I thought for sure I’d find a Google Calendar plugin that allowed me to customize ordering, display, number of events, etc. But my searches were fruitless. (If I missed something, let me know!!)

At this point, I posted a desperate tweet asking if anyone had any ideas. Alan suggested I just use the “agenda” feature in the Google Calendar embed code. Doh. I probably should have noticed that earlier, huh? I went ahead and played around with this, but I have to admit I couldn’t get past the visual look. The embedded calendar just looked clunky, and I’d become wedded to the simple CSS styling of upc0ming and my thickbox hack. There’s just no way to style an embeded iframe, so I kept looking.

My friend Jamey suggested I check out the Google Calendar feed api’s. This turned out to be a great suggestion, but I’ll come back to it in a bit.

In the meantime, I kept searching for plugins that might afford me some solution. And then I stumbled on the motherload: KB Advanced RSS Widget. If you’ve ever struggled with the default RSS feed widget in WP and wanted more control over how feeds are presented, CHECK OUT THIS PLUGIN. Basically, it allows you to customize how feed items are displayed on a very granular level.

The Widget comes with a script that will parse your feed (uses Magpie, I believe) and show you all of the “hidden” xml fields that the standard RSS widget doesn’t touch. Using the parser, I was able to pick out the starttime (and customize the date display), and wrap it in the css and html I needed to replicate the elegant display that I liked so much from upc0ming. Truly, I only grazed the surface of what I think you could do with this widget. Let me repeat: If you work work with RSS feeds and WordPress, CHECK OUT THIS PLUGIN!

One more note: As I was working with the KB widget, I realized my Google Calendar feed wasn’t quite meeting my needs. For example, by default it was ordering calendar events by publication date, not start time. Also, it was showing me them in the wrong order. That’s when my friend’s suggestion to check out the Google Calendar feed api came in handy. As it turns out, by adding various parameters to the calendar feed, you can modify the feed output. I added “orderby=starttime&sortorder=ascending&futureevents=true” and got a feed that was ordered by startime, in ascedning order, and only showed future events. Sweet.

One, one more note: The one nut I wasn’t able to crack was how to deal with recurring events. The Google feed structures the recurring event information in a way that the KB widget couldn’t handle. So, you’ll see that events which recur on several days, have a listing for each day. Maybe someday I’ll figure that one out. . .