More Dates in WordPress


creative commons licensed ( BY ) flickr photo shared by peacay

As I continue to mess around with time/calendaring in WordPress I thought it’d be helpful to be able to allow users to add specific events1 to the calendar service of their choice. That led me to the addthisevent.com javascript. It allows the user to choose the calendar format of their choice from a variety of options plus it’s free for non-profits and schools.

Initially, I just threw a script link in the footer of my Time child theme but that’s not really how you’re supposed to do things in WordPress Land and it meant that a pretty useful action would be restricted to that single theme. There are also some people in the AddThisEvent comments requesting WordPress plugins. Since I’m wandering around the borders of Programistan anyway, I figured I’d write a plugin. This may be beating a dead horse in terms of detail but I’m hoping it might help other people who aren’t programmers get things done.

Version 1

The first version was as barebones as you can get. It does via plugin what I did previously via the theme – stick the addthisevent script in the footer. I referenced the WP wp_enqueue_script2 page in the codex to do this. You can see it commented up below.

Version 2

This second version gets a tiny bit more adventurous. I think it follows the WP practices better in that it first registers the scripts and then enqueues them. It’s also registering two additional elements – the custom preferences js for addthisevent and some custom CSS (provided by addthisevent3) to make the events look a bit prettier than the default. You can see the preferences and custom CSS options delineated on the addthisevent page but it’s one of those one page themes that make it difficult to link to the elements. You can see the details in the comments below. The main pieces were looking at wp_register_script and both wp_register_style and wp_enqueue_style. I didn’t initially notice the difference between how you’d do that with scripts vs styles. It matters.

Version 3 Plans

Next up is a settings panel and using wp_localize_script to allow people to change the CSS and preference options.

Sidenotes

The addthisevent syntax (as well as the larger post) is being generated via a Gravity Form. The addthisevent format is below. And you can try it out here.

<a href="http://example.com/link-to-your-event" title="Add to Calendar" class="addthisevent">
    Add to Calendar
    <span class="_start">10-05-2015 11:38:46</span>
    <span class="_end">11-05-2015 11:38:46</span>
    <span class="_zonecode">35</span>
    <span class="_summary">Summary of the event</span>
    <span class="_description">Description of the event</span>
    <span class="_location">Location of the event</span>
    <span class="_organizer">Organizer</span>
    <span class="_organizer_email">Organizer e-mail</span>
    <span class="_facebook_event">http://www.facebook.com/events/160427380695693</span>
    <span class="_all_day_event">true</span>
    <span class="_date_format">DD/MM/YYYY</span>
</a>

The submission builds the date button, adds a picture, and creates a map via shortcode using the aptly named Simple Google Maps Shortcode Plugin. I’m not happy with the map functionality at the moment because clicking on the marker doesn’t allow you to select “get directions.” I was initially using WPMU’s Google Map plugin (which does that) but didn’t like how it only showed the map on the full post. If I can’t find something that does this well it may be time to write another plugin.


1 A bit different than subscribing to an entire calendar (not the right fit for this project) but it might be a worthy option to pursue in the future.

2 I find it virtually impossible to spell enqueue correctly.

3 I still need to work on this a bit.

Comments on this post

No comments.

Leave a Reply

Trackbacks and Pingbacks on this post

  1. Faster Faster NMC Notes | said on June 10, 2015 at 8:11 am

    […] Events Site – This is messy looking at the moment but the idea is strong and pretty well documented here and here. […]

  2. […] this conversation last year, I thought I was going to go the Gravity Form submission route1 and use a js library to make it possible to add the events to various […]

TrackBack URL