Support

Home Forums Event Espresso Premium EE4 Template Customization

EE4 Template Customization

Posted: July 2, 2015 at 11:44 am


Deborah Fox

July 2, 2015 at 11:44 am

I just purchased EE4 and am wanting to make significant changes to the single event page. In the EE3 support docs, an article on template customization suggests editing the event_list_display.php file, and uploading the modified the event_list.php file to uploads/espresso/templates.

On my ftp site, I can find event templates in event-espresso-core-reg/admin_pages/events/templates, but none of the files in the folder seem to be what I am looking for.

In EE4, what template file do I edit to change the single event page? And where is this template file located?


Lorenzo Orlando Caum

  • Support Staff

July 2, 2015 at 3:27 pm

Hi Deborah, please take a look at this resource:

https://gist.github.com/lorenzocaum/0a35fe4997992fdb1dc5


Lorenzo


Josh

  • Support Staff

July 2, 2015 at 3:45 pm

Hi Deborah,

To add to the resources that Lorenzo suggested, here’s a quick start overview on how to get going with customizing Event Espresso 4 templates.
The EE3 support docs mention copying files over to the /uploads directory, but it turns out that theming for EE4 is completely different than it was in EE4. For EE4 you copy over templates to your WordPress theme and make the customizations there. We recommend building the customized files in a WordPress child theme

The main template for the single event page is the content-espresso_events.php file located in public/Espresso_Arabica_2014. You copy this file to your WordPress theme and also copy any of the template parts called from that file that you might also be customizing.

The following instruction steps apply to most WordPress themes, but your theme may be different:

Then, you copy your theme’s single.php file and rename it to single-espresso_events.php.

In that new single-espresso_events.php file, you’ll look for something like this:

<?php get_template_part( 'content', 'single' ); ?>

You replace it with this:

<?php get_template_part( 'content-espresso_events' ); ?>

Now you’re set up and any customizations you make to content-espresso_events.php will display on the single event page.


Deborah Fox

July 3, 2015 at 1:37 pm

Thank you both for your quick responses to my question. I do have a follow up question regarding the resource Lorenzo referenced. In Step 4, the instructions say to add the espresso_pagination function to your child theme’s functions.php file. When I tried this, it crashed my entire site. I pasted the espresso function in its entirety at the end of my existing functions.php. Should I have done something differently?


Deborah Fox

July 3, 2015 at 1:47 pm

Also, Step 5 says to deactivate two espresso files located in the Twenty Fourteen theme. They are not present, so I presume I don’t need to worry about that step — please let know if that isn’t correct.


Josh

  • Support Staff

July 3, 2015 at 2:27 pm

Hi Deborah,

I took a quick look at the reference that Lorenzo posted. I think the reason why it says the espresso_pagination function should be copied into a theme’s functions.php file is for cases where the entire arabica child theme folder is getting copied over. I’m not sure if that’s even necessary or even the right way to do that, but I can recommend not copying that function over if it crashed your site. My guess is the function is already loading elsewhere, which caused that crash because PHP doesn’t allow the same function to be declared twice.

Step 5 assumes someone copied all the templates over from the arabica child theme, so it instructs to then remove them. So I think you’re correct there, you didn’t copy them over, so you don’t need to remove them.


Deborah Fox

July 7, 2015 at 9:42 am

Thank you, Josh. I went ahead and removed the other Arabica template files I’d copied into my child theme folder and now my changes are showing up.

I’d like to make other customizations using CSS, and wonder if you could advise me on how best to proceed. The vast majority of our events are free, so my goal is to essentially remove everything shown in the ticket selector table when the ticket price is zero. The only ticket information I want displayed for free events is the registration button.

This page:
http://eventespresso.com/wiki/hide-certain-elements-event-espresso-pages-using-css/
suggests pasting changes into my child theme’s stylesheet. Would that be better than editing the espresso_default.css and ticket_selector.css files, and copying the new files to wp-content/uploads/espresso/templates?

I’m leaning towards the latter approach, but I have limited experience with CSS and want to make sure that’s the best way to do this.

Thanks again for your help!


Lorenzo Orlando Caum

  • Support Staff

July 7, 2015 at 12:20 pm

Hi Deborah, I wouldn’t edit any core plugin files as those edits will be lost when you update. Rather add your new CSS through your child theme’s stylesheet or a plugin like Reaktiv CSS Builder or My Custom CSS.


Lorenzo


Deborah Fox

July 8, 2015 at 8:53 pm

Thank you, Lorenzo!

The support post ‘EE4 Template Customization’ 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.

Support forum for Event Espresso 3 and Event Espresso 4.
Documentation for EE3 and EE4
Documentation for Event Espresso 3

Documentation for Event Espresso 4

Status: closed

Updated by  Deborah Fox 4 years ago ago

Topic Tags

Notifications

This topic is: resolved
Do NOT follow this link or you will be banned from the site!