Support

Home Forums Event Espresso Premium Where are the instructions for customizing templates in EE4?

Where are the instructions for customizing templates in EE4?

Posted: October 9, 2017 at 7:52 pm


monkeynastix

October 9, 2017 at 7:52 pm

With much difficulty using this plugin out of the box, I am now forced to customize it to make the front-end more user friendly. However I am trying to find clear documentation about this…I need to know where to begin customize the plugin…

My search has turned up the following results:

DEAD END #1: https://eventespresso.com/wiki/put-custom-templates/ – This link provides some description of how to do it, BUT the location of the files are wrong, it says the files are in “plugins/event-espresso/templates” and I don’t have that directory on my server. THEN at the bottom of the page it says a little blurb about “The Custom Files” add-on, which when clicked takes you here:

DEAD END #2: https://eventespresso.com/wiki/custom-files-add-on/ – This page describes what looks to me like the solution I am looking for, and says “This add-on requires Event Espresso 3.1.33 or newer.” which is great because I have EE4. So I click the link to purchase yet more stuff from you guys and it takes me here: https://eventespresso.com/product/espresso-custom-files/ and while I am logged in to my Event Espresso account, I see at the top right this message: “This add-on is currently only compatible with EE3, you only have access to EE4. If you would like to use this add-on please Purchase an EE3 support license OR Contact our Sales department for assistance to change your support license from EE4 to EE3 (which includes access to EE4).” – So I ask what the hell am I supposed to do here????

DEAD END #3, #4, #5, #6 – Getting angry at this plugin now…

Because of lack of solution to the above and I haven’t yet decided to give you guys ANOTHER $70.00 USD which is like $90.00 Canadian on top of the already whopping $374.80 CAD I’ve paid for this plugin I begin another search using your internal search box also located to the top right of this “help/forum” area.

I type in “custom templates EE4″…to get these results from Google in this order:

https://eventespresso.com/wiki/ee4-themes-templates/ – great, but I’m not that advanced in writing PHP so the template tags are meaningless to me unless I can see them wrapped up in an example template page, this is advanced stuff and I’m not there yet.

https://eventespresso.com/topic/ee4-template-customization-3/ – this one looks promising and makes mention of a template called Arabica_2015 which I can actually see in my FTP. The problem is, I don’t see anywhere in the WordPress Dashboard / Event Espresso dashboard area where I can change a template, it doesn’t show Arabic anywhere, so I am left with questions because I don’t want to screw anything up…

https://eventespresso.com/2014/02/developers-corner-theming-event-espresso-4/ – points to a couple links I already posted that do nothing for me, and gives insight into custom post types, which is great but still doesn’t answer the question I have about creating a custom template in EE4. This link is also from 3 years ago so how do I know that something hasn’t been updated?

https://eventespresso.com/wiki/ee4-custom-post-types/ – at the bottom of this page it says to create copies of archive.php in my themes folder…but what them are they talking about EE4? or my wordpress theme? I have a child theme already…”How to change the template for the event list archive” doesn’t accurately describe to me what’s happening here…

The rest of the links for me are just useless…
What I am asking for should be somewhere easy to find and easy to understand, I’ve been working with WordPress for over two years now (Joomla convert) and I am well aware of what is needed to customize a website built with different plugins, etc. I am not a hard coder, but if I have a file structure to work with that contains files in use by a plugin I can easily figure out what is doing what and what I can change to suit…I always work this way and it works for what I do – every-time except right now.

The problem I’m having here is that after three days of searching on my own I can’t find a solution…I even gave up and started looking for a different plugin altogether half-way through a project that requires something like EE4, but the project I am doing requires what EE4 was supposed to provide and I cannot find another solution which is why I haven’t asked for my money back yet…I am trying to minimize the work for my client to be able to operate this plugin once the site is built, and I mean honestly if I can’t figure out how to make the front-end more intuitive, I’m screwed.

So after all that typing I still have a very basic questions for anyone willing to give a FK. Where can I find the instructions on how to create templates for EE4 so I can begin to customize EE4 to suit what I want to see? WHERE? CAN ANYONE HELP ME???? IS THIS A HARD QUESTIONS TO ANSWER FOR SOME REASON?

Please Help.
Nick


Tony

  • Support Staff

October 10, 2017 at 5:59 am

Hi Nick,

Starting from the beginning of your thread, EE4 is not a ‘newer version of EE3’, it’s a completely different system so none of the EE3 add-ons work with EE4. EE4 has its own templating system, EE4 is much more integrated with your theme.

You don’t need the custom files add-on for EE4 as its designed completely differently to EE3. The custom files add-on allowed you to override functions in EE3, EE4 allows for thise in a much more elegant way.

After a wall of text I still don’t know what it is your actually trying to charge, so can’t really help with anything specific. You mentioned you want to make the front end more user friendly, what exactly does that mean here?

I’m asking because there are multiple different templates loaded within EE4, the template (or maybe not even a template but a hook) you need to use depends on what you want to change.

https://eventespresso.com/wiki/ee4-themes-templates/ – great, but I’m not that advanced in writing PHP so the template tags are meaningless to me unless I can see them wrapped up in an example template page, this is advanced stuff and I’m not there yet.

I’m sorry, but customizing the front-end of an e-commerce type system, is never simple. You’re asking for advanced customization but then state you’re not really comfortable working with PHP? I’m not sure how you would expect to be able to customize the front end without being confident in the code your writing.

As mentioned above, EE4 integrates much more heavily with your theme. It’s your theme that outputs most of the content, then EE hooks into the_content() call and adds the event details. The checkout page & thank you page are a little different in that they load through a shortcode, but after that it’s a similar type of setup.

So before I go into all kinds of details that may well be completely irrelevant to what you are actually trying to do, can you let me know what your trying to change? By that I mean the specific sections you want to change and so on, not just a general overview of changes as then I can’t point you the right direction.


monkeynastix

October 10, 2017 at 6:18 am

Dude I don’t know what the pages are called, but basically I want to copy what’s there into my child theme and begin re-arranging the way it looks on the front end, here is the best description I have:

1. http://monkeynastix.ca/burlington/public-classes/babynastix/ – I need to be able to make the grid look not like this, but I need to know where that PHP is. – THIS IS THE GRID SHORTCODE

2. http://monkeynastix.ca/burlington/events/babynastix-1-2-yrs/ – This page just looks horrible but I can’t find where the PHP is for this so I can rearrange it to have a better layout – THIS IS THE EVENT DETAIL PAGE

3. I am looking for some type of folder where the template is for EE4 for some of the pages that get output to the front end, for example how it is described here might help me but the directory listed in this post is wrong – https://eventespresso.com/wiki/put-custom-templates/

Nick


Tony

  • Support Staff

October 10, 2017 at 8:15 am

1. http://monkeynastix.ca/burlington/public-classes/babynastix/ – I need to be able to make the grid look not like this, but I need to know where that PHP is. – THIS IS THE GRID SHORTCODE

I can’t see the grid template output on that page, but the template for it is within the add-on itself.

/eea-events-grid-view-template/templates/espresso-grid-template.template.php

Copy that file into your child theme and customize it there, that custom template will be loaded in place of the original.

2. http://monkeynastix.ca/burlington/events/babynastix-1-2-yrs/ – This page just looks horrible but I can’t find where the PHP is for this so I can rearrange it to have a better layout – THIS IS THE EVENT DETAIL PAGE

Again, what would you like to do with that page? ‘so I can rearrange it to have a better layout’ is too general and very subjective, what you consider a ‘better layout’ I may no. So I need to know what you actually want to do.

There are some options within EE to change the order the event details are output onto the page if that is what you are looking for.

Event Espresso -> Events -> Templates -> Single event pages

Set ‘Use Custom Display Order?’ to Yes and then use the drag and drop section to adjust the order.

For layout changes why wouldn’t you just use CSS to reposition the elements?

3. I am looking for some type of folder where the template is for EE4 for some of the pages that get output to the front end, for example how it is described here might help me but the directory listed in this post is wrong – https://eventespresso.com/wiki/put-custom-templates/

That post is for EE3 and is available because EE3 has its own templating system, you must to use the specific templates within EE3 to load the content.

EE4 uses custom post types for the events, meaning you don’t need to use our templates at all, you can fully control the output of the event pages the ‘WordPress way’.

The way in which these templates are loaded and used is how WordPress loads templates files and how your theme uses its template files.

Espresso_Arabica_2014 is an example of this, it’s not something you switch on or enable within the dashboard, its an example child theme built from twentyfourteen that loads various templates to control the output the event details page and the event archive (event list). You can copy template files from within there for various section to your child theme and edit them if you want to, for example copying content-espresso_events-datetimes.php to your child theme.

Most users don’t need this level of customization and to be honest so far it sounds like neither do you.

So again, what do you actually want to change? I don’t need the page names, I need to know what you actually want to change as right now it’s simply not clear.


monkeynastix

October 10, 2017 at 10:05 am

Okay, I don’t want to burden you guys with too many questions which is why I stressed on just doing it on my own here, so I will itemize what I am looking for currently. so you get an idea..

1. I need to make the left column on this page: http://monkeynastix.ca/burlington/public-classes/babynastix/ (Event Espresso) look similar to this page: http://joomdonationdemo.com/eventbooking/

2. I also need to know how I can insert a “NO CLASSES” notice in the calendar on specific dates, you can see it here: http://monkeynastix.ca/burlington/public-classes/babynastix/babynastix-calendar/ (forward to February) – I would like to only show NO CLASSES and the times with the background color different than the rest.

3. I need to be able to show all the locations of events within a category on a Google Map on this page: http://monkeynastix.ca/burlington/public-classes/babynastix/babynastix-locations/

4. I need to be able to edit this page (Single Event Page) by switching things around and creating a custom layout: http://monkeynastix.ca/burlington/events/babynastix-on-sundays/ – preferably with a Google Map, and NOT the times as listed, for example on this page show times as “January 14, 2018 – March 25, 2018” not with the entire date listing

5. I’m having an issue with the URL’s. I don’t want “events” to appear anywhere in the url, even on other pages to do with a event. For example, the Babynastix category event listing URL is: http://monkeynastix.ca/burlington/public-classes/babynastix/ – which is fine, because I’m using a shortcode so I can keep the URL structure, but when I click into the Single Event Page, the URL reverts to http://monkeynastix.ca/burlington/events/babynastix-on-saturdays/ – whereas it should be: http://monkeynastix.ca/burlington/public-classes/babynastix/babynastix-on-saturdays/ – inherently I would like the registration to follow suit. For example registration for that class is located here: http://monkeynastix.ca/burlington/registration-checkout/?uts=1507651083#checkout – where it should be looking like this: http://monkeynastix.ca/burlington/public-classes/babynastix/registration-checkout/?uts=1507651083#checkout – but every class would have this so I don’t know how to get around this unless I’m using shortcodes everywhere. The reason for this is because this company also does many in-school programs, and the letters that go home with kids for their parents will require a simple URL. This is a whole other piece of this plugin puzzle I am trying to solve – but for another discussion once I get this stuff sorted out.

SIDE NOTE: The reason this is so important is that the Burlington site for this company is a test model for Canada. I am also going to be needing 16 other sub-licenses for Canada alone (after this test). Once this all works They will restructure their entire global company around the use of this plugin (USA, EUROPE, AFRICA…), which means 143 other sub licenses to start…so it’s important everything here works other wise it’s just trouble – sorry for my earlier frustration there’s just much on the line here and I want to get it right…

Nick


Tony

  • Support Staff

October 11, 2017 at 5:18 am

Okay, I don’t want to burden you guys with too many questions which is why I stressed on just doing it on my own here

The problem is, we can’t help if we don’t know what you’re trying to do. Too much details is better than not enough, otherwise, you end up down the wrong path and it just causes more confusion.

1. I need to make the left column on this page: http://monkeynastix.ca/burlington/public-classes/babynastix/ (Event Espresso) look similar to this page: http://joomdonationdemo.com/eventbooking/

Ok, so that’s a page using the [ESPRESSO_EVENTS] shortcode?

2. I also need to know how I can insert a “NO CLASSES” notice in the calendar on specific dates, you can see it here: http://monkeynastix.ca/burlington/public-classes/babynastix/babynastix-calendar/ (forward to February) – I would like to only show NO CLASSES and the times with the background color different than the rest.

We don’t have an option for this, each datetime in the event will show up as an event, you can set the datetime name as you have already to show no classess, but changing the time would require the admin to add some custom CSS for each instance of a no classes datetime.

I’m guessing based on previous comments this wouldn’t work for you?

3. I need to be able to show all the locations of events within a category on a Google Map on this page: http://monkeynastix.ca/burlington/public-classes/babynastix/babynastix-locations/

We don’t have a google map that shows the locations so that will also need custom development from a developer.

If its critical for your events I’d recommend contacting one of the developers listed here:

https://eventespresso.com/developers/event-espresso-pros/

They may be able to build a custom template for you.

4. I need to be able to edit this page (Single Event Page) by switching things around and creating a custom layout: http://monkeynastix.ca/burlington/events/babynastix-on-sundays/ – preferably with a Google Map, and NOT the times as listed, for example on this page show times as “January 14, 2018 – March 25, 2018” not with the entire date listing

I see you’ve found the Google map option within the venue set on the event and enabled it, for the dates, you can modify the content-espresso_events-datetimes.php template to do that.

Copy the template from event-espresso-core-reg/public/Espresso_Arabica_2014 your child themes root directory and replace the content with this:

https://gist.github.com/Pebblo/42235c19d65d7fc86fee88286315acfb

That will then output the datetime list like this – http://take.ms/4x2Kk
(Using whatever date and time format you have set on the site)

Section 5 you’re going to struggle with, it’s not something you can work around with shortcodes as there can only be a single registration-checkout and thank-you page set within Event Espresso. It’s not enough to just add the shortcode within pages on the site, the page used must be set within Event Espresso -> General Settings -> Critical pages so you can use multiples.

The permalink change for ‘events’ is simple, we have an option for that within:

Event Espresso -> Events -> Templates -> Event Slug

Set that to the slug you want to use in place of events and update, then go to Dashboard -> Settings -> Permalinks and click save to flsuh your permalinks.


monkeynastix

October 11, 2017 at 6:16 am

Hey there, for number 1, yes I’m using the shortcode, how/where I do edit this with the hooks or whatever I need to customize it?


Tony

  • Support Staff

October 11, 2017 at 3:07 pm

You would copy over the content-espresso_events-shortcode.php template file from Arabica

Then within the is_archive() check load the content how you prefer. Currentlty it uses espresso_event_content_or_excerpt() to pull the content, you can load individual templates in that file if preferred (the templates that have been commented out).

The support post ‘Where are the instructions for customizing templates in EE4?’ 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