Using Theme Templates for Event and Location Pages
Since Events Manager 5.3.7, you can now choose to display your event and location pages using templates provided by your theme. This is useful when you’d like to make use of various layouts your theme provides.
Unfortunately, this won’t always work by just choosing your template and we’ll explain why, and hopefully how to get it working.
Whilst this is very convenient, this is not necessarily a ‘WP Way’ of doing things. This is because templates are ‘meant’ for normal WP pages, and due to this some themes also depend on various classes WordPress or the theme itself inserts into certain elements of your site HTML. We sort of ‘trick’ WP into loading a page template rather than the default ‘post’ template which Custom Post Types use (which is what events/locations are).
This is probably why you’re here, because you’ve chosen a specific template to be used, but it’s producing unexpected results.
Fortunately in most cases, these are the body_class and post_class hooks, meaning we also allow you to add classes to event and location pages, which may not get added automatically. We’ll show you an example of what can be done with this.
This is actually the case with TwentyTwelve and using a full-width page. We’ll show you how to figure out the missing link and then hopefully you can use this same method to detect the subtle differences between templates and add the relevant classes to make the event/location pages look like they’re meant to.
As you can see in the first screenshot, we’re going to select the Full-width Page Template, No Sidebar page template provided by TwentyTwelve from your Events > Settings > Pages tab in your admin dashboard. When you save this setting, and visit an event page, you’ll see that whilst the sidebar is gone, there’s a big gap where the sidebar once was:
What we need to do here is look at a normal page using this template, and figure out what class name specifically triggers this unique CSS styling behaviour. Visit a normal page on your browser, and inspect the HTML source of this page. In our case, we use Google Chrome, right-click and choose ‘inspect element’, which brings up an easy to read tree of elements on your page:
As you can see, there is a specific set of classes generated for each page, which themes make use of, the body classes and the post classes, highlighted above respectively. In this case, there is only one class that makes the magic happen, and that’s the full-width class in the body.
To fix our event page, we simply revisit the settings area in the first screenshot, and in the Body Classes text box, enter full-width and save your settings. Now look at the event page again:
That’s it! You now have a full width events page.
Whilst every theme can use different class names, or other methods entirely, this should help you debug the majority of themes when trying to create a unique look. If you still run into problems, you may want to consider the ‘original’ and ‘WP way’ of doing things, which involve creating your own template for events and locations (single-event.php and single-location.php files).
What is the body class form to ensure comments display correctly? I’m having an issue with the comments not appearing on my event pages.
It really depends on your theme, since each theme will likely have different class names specific to that theme. You’d need to look at the source as instructed above to find out the names particular to your theme.
However, comments may not be something class names will sort out. Please ask on our Free or Pro support forums support forums and we’ll be happy to help there.
I’m using the twenty eleven theme and the sidebar template.
When I view a single event, the side bar is being pushed to the bottom of the screen.
I’ve narrowed it down to the body class=”singular”.
Can you tell me what’s creating this body class and how I can remove or over-ride it please?
due to the way twenty thirteen works, you need to remove the ‘singular’ body class name, along with adding additional class names ‘page-template page-template-sidebar-page-php two-column right-sidebar’ to our settings.
Here’s a snippet you can add which removes singular – http://pastebin.com/8CdUxBMh
For more info on the body_class filter, see the WP Codex:
http://codex.wordpress.org/Plugin_API/Filter_Reference/body_class
Hi!
I write you to ask you about the location page, so I have created a new event to make a sample and when I click on the location link, charge a white page, don’t show the google map with the location. Could you help me with that please?
The link for the location is: http://makeahug.com/locations/barceloneta/
Thanks!!!
This does override the outside of the template, but the actual BOOKING information (form, etc.) is still only half the size of the page. How do I fix that in Twenty Twelve? Is there a similar place to add body class information for the booking forms? Thanks!
wow thanks, I been searching on how to do this with my landing page, saved me a lot of time I’m happy now :)
Hi Marcus,
Have you tested this on Optimizepress 2.0 theme???
I understand there’s some restriction on the body class but not too sure if it will cause any conflict?
Cheers!
Sorry for the late reply! Unfortunately we don’t usually test out specific themes outside the default WP themes, due to the sheer number of them out there. The underlying principle is usually the same though.
The event page is showing in full width properly on Sparkling Theme. Nice work.
Hello, i’d like to show my events as a regular post.
The setting “Display show as a post” doesn’t function on my page.
what can i do?
thank you.
kind regards
fernando
Hi Fernando, if you’re not seeing ‘posts’ as an option in the dropdown, maybe your theme or a plugin has disabled the ‘Post’ post type somehow?
Please visit either our Free or Pro support forums and we’ll be happy to help you further there.
what is the shortcode to have other pages this layout for the week’s events (and their dates?)
http://hotelleonedoro.it/events/
likely
[events_list]but to make it look like that page exactly requires you to add your own formatting.I tested this on Avada theme and it works like a charm. Glad I didn’t have to hardcode it.
Hi there!
I tried several things but didn’t get this to work:
On a single events page, is there a way to add the current event category to the body class?
I tried add_filter( ‘body_class’, ‘filter_function_name’ ), but couldn’t find the right function. Or do I have to alter the single events template?
Thanks for any help!
When I try create my own single-event template in my theme sometimes I have access to the EM_Event object and sometimes I dont. This is a very strange problem can someone please point me to the right direction.
Not only did this article solve my question spot on, but it is explained in a exemplary clear and straightforward way. Far to much documentation of code is making a point of being terse and esoteric, as if you are only allowed to understand the explanations, if you already know as much as the author.
Your documentation is really excellent. As is your software. Thanks for providing such intelligent software to the WordPress community!
This article very helpful and can be our solve when we have an event in future. Thanks
Now that’s an interesting Article, Thanks.