Since Event Organiser 2.1 you can now change the icon of the venue, using the eventorganiser_venue_marker hook:

add_filter( 'eventorganiser_venue_marker', 'my_venue_map_icon', 10, 2 );
function my_venue_map_icon( $icon, $venue_id ){
       return 'http://yoursite.com/url/to/venue/map/icon.png';
}

The hook filters the url of the image you wish to use. You can use:

• plugins_url() (see codex) – to get the url to an image in a plug-in
• get_stylesheet_directory_uri() (see codex) – to get the url to an image in your theme
• wp_upload_dir() (see codex) – to get the url to an image in your uploads directory
• wp_get_attachment_url() (see codex) to get the url of a particular attachment

As an example, suppose I’ve created a subdirectory in my uploads directory called mapicons, which contains the icon venue-icon.png:

add_filter( 'eventorganiser_venue_marker', 'my_venue_map_icon', 10, 2 );
function my_venue_map_icon( $icon, $venue_id ){
    $uploads = wp_upload_dir();
    $url = $uploads['baseurl']; // Something like www.yoursite.com/wp-content/uploads
    return $url.'/mapicons/venue-icon.png';
}

You can also display different icons for different venues. For example, let’s suppose I have an icon for each venue, with filenames venue-icon-[venue-slug].pnp. The following chooses the appropriate icon based on the venue (if it cannot be found it uses a generic venue-icon.png icon from the above example.

add_filter( 'eventorganiser_venue_marker', 'my_venue_map_icon', 10, 2 );
function my_venue_map_icon( $icon, $venue_id ){

    //Get uploads directory path & url
    $uploads = wp_upload_dir();
    $basedir = $uploads['basedir'];
    $url = $uploads['baseurl']; // Something like www.yoursite.com/wp-content/uploads

    //Get venue slug from ID
    $venue = eo_get_venue_by( 'id', $venue_id );
    $slug = $venue->slug;

    //If icon venue-icon-[slug].png exists, use that
    if( file_exists( $basedir.'/mapicons/venue-icon-'.$slug.'.png' ) ){
        return $url.'/mapicons/venue-icon-'.$slug.'.png';
    }

    //Couldn't find venue-specific icon, use generic fallback
    return $url.'/mapicons/venue-icon.png';
}

You can return null to keep the default Google maps icon.

You could, query the venue to find which event is occurring next at that venue, and use its category to decide which icon to use. I’ll leave the details to you .

How will you use it?

PS. Here’s a great source of free Google map icons. Enjoy!

If you need to get a colour corresponding to an event (rather than from the category directly), then you can use eo_get_event_color(). See the docs.

First, we’ll use the following (based on this tutorial) to add rules for our category-specific classes,

add_action( 'wp_print_styles', 'my_print_event_cat_colours' );
function my_print_event_cat_colours(){

    $cats = get_terms( 'event-category' );
    if( $cats ){

        echo '<style>';
        foreach( $cats as $cat ){
                printf( 
                    ".event-category-menu-item-%d{ background: %s;}\n", 
                    $cat->term_id, 
                    eo_get_category_color( $cat ) 
                );  
        }
        echo '</style>';
    }
}

Now we want to add the appropriate class to any menu item which points to an event category. We could do this manually (WordPress allows you to manually add classes to menu items) – but that is tedious and would need to maintained as you add and remove categories.

Instead we can use the nav_menu_css_class hook. As you may have guessed it filters an array of classes which will be applied to a menu item.

add_filter( 'nav_menu_css_class' , 'my_add_classes_to_event_cat_menu_items' , 10 , 2 );
function my_add_classes_to_event_cat_menu_items( $classes, $item ){
        //Add or remove classes to $classes array
    return $classes;
} 

It also passes the menu item, $item, as a second argument allowing us to conditionally add classes to it. Now, menu items are in fact a post type, so $item contains all the usual ‘post’ information, but menu items typically point to something on your site (a page, a category term, etc) – and it also contains data pertaining to that object it points to. Specifically:

• $item->object stores the object the menu item refers to, e.g. ‘post’, ‘page’, ‘my-cpt’, or ‘my-taxonomy’ (the post type name, or the taxonomy name)
• $item->type stores what ‘type’ of object is it, either: ‘post_type’ or ‘taxonomy’.
• $item->object_id references the ID of the object (post ID, term ID etc).

We can use this to first check that a menu item points to an event category term and if it does, add the class event-category-menu-item-{Term ID} to it:

add_filter( 'nav_menu_css_class' , 'my_add_classes_to_event_cat_menu_items' , 10 , 2 );
function my_add_classes_to_event_cat_menu_items( $classes, $item ){

    if(  $item->object == 'event-category' ){
        $classes[] = 'event-category-menu-item-' . $item->object_id;
    }
    return $classes;
}

But there is no reason why they can’t be used elsewhere in your theme and in this post I’ll be showing you how you can print CSS classes to your header which allow you to target parts of your website and colour them according to the category. As an example we’ll be setting the background colour (but it could be border colour, or front colour etc).

The hook you use for this is the wp_print_styles action which fires just before your stylesheets are loaded (you could use wp_head instead to print our custom CSS)

Please note we are printing styles directly, which is why we are using wp_print_styles. You should not enqueue or register scripts or styles on wp_print_styles. See this post for more information.

The following function gets all the category terms, loops through them and prints a CSS rule for each term of the form:

 .event-category-{Term ID}{
      background: {Category colour}
 }

We can then apply the class .event-category-7 to colour the background of a DOM element with the colour of the event category with ID 7. (Of course doing this manually will be tedious and a pain to maintain – so you should try to add these styles programatically).

add_action( 'wp_print_styles', 'my_print_event_cat_colours' );
function my_print_event_cat_colours(){

    $cats = get_terms( 'event-category' );
    if( $cats ){

        echo '<style>';
        foreach( $cats as $cat ){
                 printf( 
                      ".event-category-%d{ background: %s;}\n", 
                      $cat->term_id, 
                      eo_get_category_color( $cat ) 
                 ); 
        }
        echo '</style>';
    }
}

Or you may prefer to use the category slug rather than ID:

add_action( 'wp_print_styles', 'my_print_event_cat_colours' );
function my_print_event_cat_colours(){

    $cats = get_terms( 'event-category' );
    if( $cats ){

        echo '<style>';
        foreach( $cats as $cat ){
                 printf( 
                      ".event-category-%s{ background: %s;}\n", 
                      sanitize_html_class( $cat->slug ), 
                      eo_get_category_color( $cat ) 
                 ); 
        }
        echo '</style>';
    }
}

Note that this second example differs in three ways:

• Obviously, we’ve used $cat->slug instead of $cat->term_id.
• We’ve added sanitize_html_class() to ensure that the slug is safe to use as a class name (it should be, but better safe than sorry)
• We’ve replaced .event-category-%d with .event-category-%s – so that the slug isn’t cast as an integer.

What’s in 1.1

Guest booking options

1.0 gave you the option of only allowing logged in users to place bookings. Or you could allow guests to place bookings, but they would be created an account. 1.1 allows you to make this registration optional, so guests can place bookings without creating an account.

There is a downside for choosing this option though. 1.2 will be focussed on bookee improvements, and include widgets & shortcodes so that you can display a bookee’s booking history or a list of upcoming events they are attending. These will not work for ‘guest’ bookees.

Multiple forms

Different events call for different booking forms, so in this update I’ve added the ability to create multiple forms. There is an additional drop-down on your events admin page to select which form you would like to use for your event. Existing events will automatically use the first booking form created, unless you select otherwise.

Include booking meta in the booking downloads

In 1.0 you could easily download all your bookings, but it didn’t include information entered into your custom booking form. That all changes in 1.1, where clicking ‘Download bookings’ allows you to select what booking meta you would like included in the download.

API Improvements

For the developers I’ve been working hard to check and document parts of the bookings API. These include the function:

• eo_get_bookings( $args ) – Retrieve an array of bookings
• eo_get_booking_meta( $booking_id, $key ) – Get meta associated with a booking
• eo_insert_booking( $booking_array ) – Create a booking
• eo_confirm_booking( $booking_id ) – Confirm a booking
• eo_cancel_booking( $booking_id ) – (Permantly) cancel a booking.

Documentation for these will appear on the site shortly.

UI Tweaks

At the booking form logged-in users are told who they are logged in as, with an option to log-out.

What’s next

1.2 is currently planned for June and will be focussed on improving the plug-in’s ‘bookee handling’. This will include the above mentioned booking history / ‘upcoming events you’re attending’ widget, and shortcodes, along with a further extended API for you developers.

I’m building a website that requires people who’ve booked for an event to be sent an email 24 hours before the event, and then a different email 24 hours after the event. Is this possible in the Pro version?

The answer is yes with a little bit of custom coding.

Event Organiser adds in another layer. If the content is relating to events (events page, single event page, venue page, event category page etc), and an event template has not been selected, then the plug-in selects the appropriate default template from its templates directory. To use your own templates, then, you simply need to add your own event templates to your parent/child theme. See this page for details.

This is great because you have complete control over how the event pages look without having to make changes to the plug-in itself (all changes are lost when you update).

But what if I update my theme?

Good question. If you you plan to update your theme – your custom templates will be lost. So what then? In this situation you should create a child theme (see links at the bottom for more tutorials), and store the templates there. This the purpose of child themes – they allow you to make alterations to a theme (the parent theme) without actually touching the parent theme (again because changes are lost when you update).

But what if I want to update by Child theme?

Very good question. A few WordPress developers have said in this case “you’re doing it wrong” – and the idea of ‘grand-child’ themes has been roundly dismissed. I have mixed feelings about this, but in any case, it is possible to store your custom templates anywhere – it just requires a bit of code.

In this part we’re going to cover how to actually get Event Organiser to use your payment gateway. Fortunately, Event Organiser handles the booking submission for you – all you’re left to do is two things:

• Redirect the user, or otherwise handle the checkout for payment
• Set up a ‘payment listener’ – which listens for confirmation of payment.

With that in mind I wanted to take you through how any gateway can be added to Event Organiser in the form of a 2-part tutorial. If you’re wondering where code in this tutorial should go, see this post. The example used throughout these two-parter is the Google checkout add-on, and you can see the code in its entirety here.

That’s not all…

Event Organiser Google Checkout also demonstrates just how easy it is to create your own plug-in to add your favourite payment gateway. I hope to see lots more gateways available for Event Organiser with add-ons that have been created by you!

To help with this, next week I’ll be publishing a couple of tutorials on how to implement any payment gateway, and I’d love to know about about any add-ons you build – particularly if you want to share them with others (free or commercial).