Support

Home Forums Event Espresso Premium Single Event Page Template

Single Event Page Template

Posted: January 6, 2016 at 4:28 pm


afcco

January 6, 2016 at 4:28 pm

Hi, I’ve setup EE4 on a test site (http://testwww.afccontario.com/events-calendar/). I’ve entered an event on Feb 22nd.

Everything works great. However, the single-events page loads with a left sidebar, even though the event itself shows default template being used, which does not have a sidebar. I’ve been reading about custom post type page templates, but am a little confused as to how to change that. How can I remove the left sidebar from the single-event page display?

Thanks
Lorne


afcco

January 6, 2016 at 4:53 pm

I should add, that I’m running Netstudio Child Theme under WordPress 4.3 and I’ve installed the following EE4 add-ons: MailChimp, Wp User Integration, Stripe and Calendar


Josh

  • Support Staff

January 6, 2016 at 5:25 pm

Hi Lorne,

The first thing to check is to see if the Netstudio theme has an option that you can set to not display the sidebar single posts. It might say single blog posts in the options. It turns out that a Event Espresso event uses the same template as the single blog post.

If no setting like that is available in the theme, the other option is make a copy of the page.php template from the parent theme, and put the copy into child theme folder. Then you rename the copy so its new name is single-espresso_events.php. In most cases that will force the theme to display the Event Espresso event without a sidebar.


afcco

January 6, 2016 at 6:19 pm

Thank you Josh for the speedy response. After I posted, I dug around a bit more and saw that they share the same template as the single blog post. I’ll give your suggestion a try and let you know how it turns out. Thanks.


afcco

January 7, 2016 at 7:30 am

Morning Josh, The theme gives me some settings for single blog post, but I don’t want to change the way the blog posts themselves appear, so I did what you suggested and copied page.php over to the theme and changed the name of the file. It now shows the event without the sidebar, however, it’s only showing me the info from the event text area. I’m not seeing any event info, like time, date, venue, status, register button etc. Thoughts?


Josh

  • Support Staff

January 7, 2016 at 8:27 am

My thoughts on this is it would be easiest to go with that option. If you don’t want to go with the option, you can tinker with that template a bit more. Please note that I don’t know any of the code that’s in your WP theme, so the following suggestions may need to be adapted a bit:

1) You open up the new single-espresso_events.php template file and look for the loop. Most WordPress theme loops like this in their most basic form:

<?php if ( have_posts() ) :
while ( have_posts() ) : the_post();
	get_template_part( 'content' );
endwhile; // end of the loop.

2) Change the get_template_part call so that it instead gets Event Espresso content:

<?php if ( have_posts() ) :
while ( have_posts() ) : the_post();
	espresso_get_template_part( 'content', 'espresso_events' );
endwhile; // end of the loop.

3). Optionally add markup below and above the espresso_get_template_part() call if anything is missing that would normally come from your theme’s content.php template part.


afcco

January 7, 2016 at 2:24 pm

Thanks. Did that and yes, now the event page is displaying with all the information, including register button. However, new problem, it’s also showing a background color in the header and excerpt content (which shouldn’t be there). I deleted the excerpt content from the event and it disappeared from the event single page, But would be nice to have for the calendar hover.

The page is also no longer following the display order I set in the event plugin settings.

Thoughts?


Josh

  • Support Staff

January 7, 2016 at 2:43 pm

it’s also showing a background color in the header

That’s where step 3 from above is needed to address the markup that’s missing from your theme’s content.php template part.

The page is also no longer following the display order I set in the event plugin settings.

This is because the display order feature is designed to not override the work done in custom templates, which you now have custom templates set up. What you can do is take the content-espresso_events.php template part from the Event Espresso plugins /public/Espresso_Arabica_2014 folder and copy it into your active WP theme.

Then you position the additional template parts that are loaded via the espresso_get_template_part() function to your liking.


afcco

January 7, 2016 at 2:45 pm

Thanks. Will give it a try.


afcco

January 7, 2016 at 3:33 pm

Okay, so I was able to copy over and edit the content-espresso_events.php page and now have the display order correct. Where do I find the content.php page? I’m still trying to remove the header background color. I’m not a php programmer, so not quite sure what to do.


Josh

  • Support Staff

January 7, 2016 at 3:58 pm

There should be a content.php template part within your WordPress theme. If it’s not content.php, it’s the template part that normally gets loaded from page.php.


afcco

January 7, 2016 at 9:52 pm

Hey Josh, I decided to go back to the beginning and change the blog post page sidebar to the right where I was able to change the content on that sidebar. I was able to keep the left sidebar as is for those other pages that use it. Now the layout for the single event page went back to the way it was, which was nice and clean. Only thing left to do is add an <hr> tag between the date info, ticket info and venue info. Where would I add that tag? Thanks very much for your help.

You can close the ticket.

If I decide to revert to custom template, I’ll now know what to do.


Josh

  • Support Staff

January 8, 2016 at 8:48 am

Hi Lorne,

I went to check your site to see where each of the template parts are to figure out where to put the hr tags, and it looks like they are already there. Do you still need help with placing hr tags there?


afcco

January 10, 2016 at 8:41 am

Sorry, we’ve moved to the production site from the test site. New address is: http://www.afccontario.ca/espresso Still not totally live, hoping to do that today. I’ve reverted away from custom templates. You can see that on the single event page (http://www.afccontario.ca/events/domestic-violence-concurrent-proceedings/), that the HR lines do not appear between the date element, the time element and the venue element. Because we’re no longer using custom template, I’m not sure where I would add the HR tags.


Josh

  • Support Staff

January 11, 2016 at 11:05 am

Hi Lorne,

I checked the site and at the time it said “Error establishing database connection”. There are some WP action hooks that allow you to inject custom markup like hr tags after each of the event’s elements. These hooks are:

AHEE_event_details_after_event_date
AHEE_event_details_before_venue_details

There are more, but the two above are likely all you need in this case.

You can add hr tags by calling a custom function with the above hooks :

function my_add_hr_tags_to_separate_event_elements() {
 echo '<hr>';
}
add_action( 'AHEE_event_details_after_event_date', 'my_add_hr_tags_to_separate_event_elements' );
add_action( 'AHEE_event_details_before_venue_details', 'my_add_hr_tags_to_separate_event_elements' );

You can add the above into your WordPress child theme’s functions.php file.


Lorenzo Orlando Caum

  • Support Staff

January 11, 2016 at 11:06 am

Hi Lorne,

Could you try adding this CSS to your child theme’s stylesheet or through a free plugin like My Custom CSS or Reaktiv CSS Builder?

.espresso_event_type-single-event h3.event-venues-h3.ee-event-h3, .espresso_event_type-single-event .event-datetimes { padding-top: 20px; border-top: 1px solid #EEE; }

That should add a light grey line separating the areas that you mentioned.


Lorenzo


afcco

January 12, 2016 at 8:45 am

That worked Lorenzo. Thank you. Now I just need to figure out how to change the design of the actual calendar itself. If I have any questions on that, I’ll open another ticket.

Thanks for your help.


Josh

  • Support Staff

January 12, 2016 at 9:35 am

In some cases, you can change the design of the Calendar with CSS.


afcco

January 12, 2016 at 7:42 pm

Yes, I should be able to do that within the theme, however, I’m not sure what the calendar add-on css tags are. Would I find a css file in the calendar add-on folder that I could copy?


Josh

  • Support Staff

January 13, 2016 at 7:07 am

Hi there,

We do not recommend copying the CSS files. The cascade (the C in CSS) will let you override the built in styles. There are some great tips on how to customize the look of the fullcalendar (same thing as the Event Espresso calendar!) here:

http://stackoverflow.com/questions/19127581/fullcalendar-customizing-the-calendar

The support post ‘Single Event Page Template’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso