Skip to main content

Create Custom Event Information Pages

We're continuing our series of tutorials for our creating our own custom add-on called "Styles" by creating a custom page that will dynamically display a list of all available Styles and upcoming events associated with it. We had previously integrated our styles add-on with Events Manager's MultiSite Globlal Tables Mode.

For this final part of our series, we're going to be creating content pages to display events with specific styles. Whilst this could be done without interacting with Events Manager filters, we can use this part to demonstrate how to interact with some of our page content filters for demonstration purposes.

Rather than create our own independent pages, we're going to create subsections within the events page which we assign in our settings page (Events > Settings > Pages > Event Lists/Archives). Doing so only requires us to hook into two filters, the em_content_pre and em_content_page_title_pre filters.

Brief overview on Events Manager assigned pages​

Events Manager has the ability to override various pages in order to output meaningful structured content that is more helpful than the traditional WordPress content. This particularly relates to displaying Events, Locations, Categories and Tags, along with other special pages such as event submission pages, booking management pages, etc.

This is done by using 'assigned pages', which are specific WordPress pages the user decides to assign to Events Manager within the Events > Settings > Pages tab, and allow the plugin to overwrite that content with its own formatting. For example, the Events page is used to show the list of upcoming events and search form, along with individual event dates that may hold multiple events. The categories page will show a list of categories which have events.

Events Manager does not necessarily need to overwrite the whole page, it will first search for the word CONTENTS in the content of the assigned WP page and just replace that. If none is found, then it will replace all of the page content.

There's four important filters you should be aware of for this, two of them handle replacement of content on assigned pages, and the other two handle modifying the title of those pages.

  • Page Content
    • em_content_pre - can be used to prevent EM's content output and replace page content with your own.
    • em_content - can be used to manipulate the content output by EM which will replace page content.
  • Page Title Content
    • em_content_page_title_pre - allows you to prevent EM from defining its own page title and use yours instead.
    • em_content_page_title - allows you to modify or replace the content output by EM which will replace the page title

These filters are only triggered when you are viewing one of Event Manager's assigned pages, not when viewing other regular WordPress pages.

In this tutorial, we'll be hooking into the areas that generates specific EM content, and we'll let EM decide where to insert that content.

Before we hook into Events Manager and output content on specific pages, we need to create the permalink structures that will allow WordPress to tell us our specific pages are being requested. This is somewhat of a side-note as it's mostly WordPress functionality, which is why we've created a separate tutorial for it.

At this point, we'll assume that you can tell what page is being requested via the 'style_id' and 'styles_page' WP_Query variables. We will have created two end points on the events page, which may look like this:

Adding custom content to Event Page​

The endpoints created above will still load the regular events page, but we'll also be able to tell via WP_Query if the url being requested is a styles page, or a specific style page, and this point we'll add our own content which overrides the default events page:

add_filter('em_content_pre','my_em_styles_content');
function my_em_styles_content($content){
    global $wp_query;
    $my_em_styles = (is_array(get_option('my_em_styles'))) ? get_option('my_em_styles'):array();
    if( is_numeric($wp_query->get('style_id')) && !empty($my_em_styles[$wp_query->get('style_id')]) ){
        $content = "<p>Events with the {$my_em_styles[$wp_query->get('style_id')]} style</p>";
        $content .= EM_Events::output(array('style'=>$wp_query->get('style_id')));
    }elseif($wp_query->get('styles_page')){
        $content ='';
        foreach($my_em_styles as $style_id => $style_name){
            $content .= "<h4>$style_name</h4>";
            $content .= EM_Events::output(array('style'=>$style_id));            
        }
    }
    return $content;
}

What we're doing here is intercepting the em_content_pre filter and checking if we're currently viewing our new pages via $wp_query->get(). We also load style data into $my_em_styles from the database in order to access style names.

In this case, we'll show a single style page if style_id is a numeric ID, and show a page of styles if styles_page is set to 1. Note that when showing a styles page, we loop through each style in the $my_em_styles array and feed the style ID into an EM_Event output function, which we made possible in our earlier tutorial adding custom search parameters.

In both cases where we're supposed to show our custom pages, we need to overwrite the $content variable, which gets returned whether modified or not. When using em_content_pre, $content will usually be given to you with a blank string value, if you add any content to that and return it, Events Manager will stop trying to show the default content and let wordpress finish loading the rest of the page.

If you used the em_content filter in this case, the result would be the same, except EM will have already generated the events page in $content first which is unnecessary since it gets overwritten. Using em_content_pre is more efficient if you have your own content to output, em_content is useful if you want to modify or add to the default content that'll be output.

Modifying the Events Page title​

Next, we need to modify the titles of the page when we're viewing a styles or style page, because otherwise you'd just see the Events page title (e.g. 'Events'):

add_filter('em_content_page_title_pre','my_em_styles_content_page_title_pre');
function my_em_styles_content_page_title_pre($content){
    global $wp_query;
    $my_em_styles = (is_array(get_option('my_em_styles'))) ? get_option('my_em_styles'):array();
    if( is_numeric($wp_query->get('style_id')) ){
        $content = $my_em_styles[$wp_query->get('style_id')];
    }elseif($wp_query->get('styles_page')){
        $content ='Styles';
    }
    return $content;
}

We now hook into the em_content_page_title_pre filter, but as you can see we use the same logic to check for our custom pages, and only modify $content with titles. Like with our em_content_pre filter, by adding to $content, Events Manager will not try to create its own event titles, whereas em_content_page_title would have already generated and set a title to $content.

Taking things further...​

This concludes our tutorial, we hope you found it helpful! This by no means covers all the possibilities of what can be done with Events Manager, but hopefully gives you a grasp on some of the main aspects of the plugin, as well as how flexible it can be should you want to achieve something not already covered by the core plugin.

Remember, you can view the whole set of functions as an example standalone plugin on the github project page, and try it out for yourself!