How to link event location to venue website

I received this request on the WordPress.org forum:

Is there a way to assign a link to the “location” field? I’d like to list all events for a specific production on a page and have the “location” field linkable to the theatre address.

By default your events look something like this:

Default event HTML
The default event output where the title and thumbnail link to the production detail page.

Now add the following code to your (child)theme’s functions.php file:

The first parts adds a new ‘Venue URL’ field to the event editor:

Event editor with a Venue URL field

The second part of the code wraps the HTML output of an event location with a link to the venue URL:

The event location now link to the venue website.
The event location now links to the venue website.

Replace default divs in event listings

Theater for WordPress wraps all fields inside a <div> element by default. But what if you want to use another element to wrap your field?

For example:

[wpt_events]{{title}}{{excerpt}}{{tickets}}[wpt_events]

outputs:

<div class="wpt_listing wpt_events wpt_events_without_thumbnail">
  <div class="wp_theatre_event">
    <div class="wp_theatre_event_title">My fantastic show</div>
    <p class="wp_theatre_prod_excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in dictum nisl. Nulla tincidunt vehicula&hellip;</p>
    <div class="wp_theatre_event_tickets"><a href="http://slimndap.com" rel="nofollow" class="wp_theatre_event_tickets_url">Tickets</a></div>
    <span itemscope itemtype="http://data-vocabulary.org/Event">...</span>
  </div>
</div>

Let’s say you want the title to be wrapped in <h1>. You can achieve this with the wpt_event_title_html filter in your theme’s functions.php:

/**
 * Replaces the default divs around the event title in all event listings.
 * 
 * @param string $html The current HTML for the event title.
 * @param WPT_Event $event The current event.
 * @return string The new HTML for the event title.
 */
function replace_event_title_divs($html, $event) {
    return '<h1><a href="'.$event->permalink().'">'.$event->title().'</a></h1>';
}
add_filter('wpt_event_title_html','replace_event_title_divs', 10, 2);

You can do the same with the other fields of an event by replacing title with the name of that field.

Custom fields

Custom fields work a bit different. If you added a custom field address to your events, the filter syntax is like this:

/**
 * Replaces the default divs around the event address in all event listings.
 *
 * @param string $html The current HTML for the event custom field.
 * @param string $field The name of the current custom field.
 * @param WPT_Event $event The current event.
 * @return string The new HTML for the event custom field.
 */
function replace_event_address_divs($html, $field, $event) {
  return '<div class="address">'.$event->custom('address').'</div>';
}
add_filter('wpt_event_address_html','replace_event_address_divs', 10, 3);

Source File

The filters mentioned in this article are located in functions/wpt_event.php.