Create Custom Event Information Pages

We’re continuing our series of tutorials for our 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 added a custom conditional placeholder for styles.

Creating our own content pages that are generated by Events Manager is pretty straightforward, and only requires us to hook into two filters, the em_content_pre and em_content_page_title_pre filters.  These filters are called before Events Manager generates any output, meaning we can decide first if something needs to be shown and save some unnecessary processing.

It is also possible to modify or override event page information using em_content and em_content_page_title filters too.

So, without further ado, here is the function that displays the styles 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')) ){
		$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 there were any querystring variables indicating we need to show our styles page. 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. This was made possible by adding custom

If we are supposed to show our custom pages, we need to add our content to the $content variable and return it regardless of whether we changed the value at all. 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.

Next, we need to modify the titles of the page.

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 the only changes are the filter and function names and the values set in $content. Like with em_content_pre, by returning content via $content, Events Manager will not try to create its own event titles.

To access this new page, we would access a site url similar to mysite.com/eventspage/?styles_page=1

This isn’t very pretty, and looks out of place when using permalinks everywhere else, so we will proceed with creating some custom permalinks for these pages, so that they look like part of the plugin and better yet provide greater SEO value to your site.