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.