Support

Home Forums Event Espresso Premium Customizing the Event Page

Customizing the Event Page

Posted: April 3, 2015 at 7:05 am


Joost

April 3, 2015 at 7:05 am

I’m trying to get my head around how to customize the Event Page (I’m a new EE4 user). To begin with, I want to achieve:
1) change the order of the page (for instance, the ticket registration on the bottom and not at the top)
2) delete some details (icons, maximum number of tickets per transaction)
I’m not an experienced programmer but I’m not afraid to do some simple editing of a PHP or HTML. I looked around in the code base but could not where to start. Do you have some pointers?


Lorenzo Orlando Caum

  • Support Staff

April 3, 2015 at 8:52 am

Hi Joost,

Try this sample coding:

https://gist.github.com/lorenzocaum/a33405557a2a065779ea

It can be added to your child theme’s functions.php file (do not include the opening php tag) or a site specific plugin:

https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/

The other content can be hidden by using CSS. You can inspect the elements using a tool like Chrome developer tools or Firebug to see the CSS classes or IDs. Then attach those to display none. There are several examples available here:

https://eventespresso.com/wiki/hide-certain-elements-event-espresso-pages-using-css/


Lorenzo


Joost

April 3, 2015 at 1:10 pm

Thanks Lorenzo for your quick and adequate reply! I followed the site specific route and copied your code. Frankly, I’m not yet capable to modify that. Ideally I would like to get the datetimes before the tickets but I can’t figure out how to do that. However, this is already much better! I also managed to hide most of the clutter I wanted. Can’t get rid of the calender and clock icon but again, this is already so much better.

Thanks again!


Joost

April 3, 2015 at 3:57 pm

I’m afraid I was happy too early 🙁

Now I had finally got most basic stuff in order, I stumbled upon the Iched Moccha theme. After I installed that, my single event page appeared to be screwed up. Now I get : ticket info > datetimes > event details > datetimes (again) > ticket info (again). As said I made the changes in a site specific php, not in the CSS. If I change back to Twenty Eleven (the original theme) the single page event is back in order. Back to Iced Mocha the problem re-ocurred. I tested a few other themes. All with the desired result. So apparently there is something odd in the Iched Mocha theme. What could be wrong?


Lorenzo Orlando Caum

  • Support Staff

April 3, 2015 at 4:45 pm

Hi, the Iced Mocha theme actually has its own templates so it works differently.

Here is some sample CSS that will remove the clock icon and the calendar icon for the datetimes:

https://gist.github.com/lorenzocaum/ad2ec6da7b7ad027433f

The remaining button is for the iCal. If you would like to remove that as well then see this link:

https://eventespresso.com/wiki/useful-php-code-snippets/#disable-ical

The code snippet in the link above is PHP so it will need to be added to your child theme’s functions.php file or a site specific plugin.

Thanks


Lorenzo


Joost

April 6, 2015 at 5:36 am

Thanks Lorenzo. I’m set on the Iced Mocha theme now. Very nice theme! Your suggestions worked quite well. Along the same line I’ve been able to remove further clutter from the event page.

Remains the first part of my orignal question: How to change the page order for this theme? I’d like in the order: details > date time > tickets > venue OR details > date time > venue > tickets.

I see the respective lines in the final HTML code of the page but can’t figure out where and how they are generated.


Lorenzo Orlando Caum

  • Support Staff

April 6, 2015 at 6:53 am

Hi, this is the file that handles the order:

https://github.com/eventespresso/iced-mocha/blob/master/content/espresso/content-espresso_events.php

You’ll need to change the order here:

https://github.com/eventespresso/iced-mocha/blob/master/content/espresso/content-espresso_events.php#L28

…and also here:

https://github.com/eventespresso/iced-mocha/blob/master/content/espresso/content-espresso_events.php#L46

You can find that file on your site in this location:

/wp-content/themes/iced-mocha/content/espresso/content-espresso_events.php


Lorenzo


Joost

April 9, 2015 at 11:52 am

Perfect! Thank you Lorenzo!


Joost

April 19, 2015 at 4:20 am

I,ve a follow-up question on this one. I had to cut some corners to get the site up and running in time. So, I just modified the original PHP file. This will not be update-proof. I’m not certain how to do that correctly.
1) Copy the content of the file into the functions.php file of the child theme I’ve created now?
2) Put the modified file in the uploads directory?
Or yet in an other way

Joost


Dean

April 20, 2015 at 3:57 am

Hi Joost,

It depends on the modification. If the changes have occurred to a theme template file, then you would be best creating a child theme and adding the modified file to that. IF you have added custom functions, then you could also go the child theme route and add the functions to the child theme functions.php, or you could look at adding a site specific plugin to house the functions.

Personally I think a child theme would be best overall.

https://codex.wordpress.org/Child_Themes
https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/


Joost

April 20, 2015 at 8:26 am

Hi Dean,

Thanks for your reply. As explained, I already have created a child theme and I have not added a function but I modified the existing function content-espresso_events.php . If I’m correct, this function is part of the espresso core and not of the Iced Mocha theme. Should I indeed put the modified file into functions.php of my child of Iced Mocha?


Tony

  • Support Staff

April 20, 2015 at 9:11 am

Hi Joost,

There seems to be some confusing here.

content-espresso_events.php is a template file not a core EE function.

Can you explain exactly which file you changed please? Where is the file located?

Did you edit the content-espresso_events.php file within iced-mocha?

We can then provide further details on what needs to be done to make this update safe.


Joost

April 21, 2015 at 2:30 am

Hi Tony,
You are so right! I was mistaken. Indeed this function is part of the Iced Mocha theme. I modified /wp-content/themes/iced-mocha/content/espresso/content-espresso_events.php as explained above by Lorenzo. What I struggle with is that on one hand I suppose I have to copy the contents of this modified file into functions.php of my child theme but on the other hand understand that functions.php is loaded prior to the rest and than it would be overwritten by the old function. Perhaps I misunderstand the mechanism. How should I proceed?

Joost


Dean

April 21, 2015 at 3:25 am

Hi Joost,

If you have modified a template file, the best option would be to copy the file to the child theme. That way the template file in the child theme will over rule the one in the parent theme.


Joost

April 21, 2015 at 3:56 am

Hi Dean,

Thanks for your answer. One further question for my clarification: do I copy the template file into the functions.php file of the child theme or simply as a separate file in the child theme directory?

Joost


Tony

  • Support Staff

April 21, 2015 at 4:03 am

The beauty of Child themes is that you can override complete template files from the parent by doing nothing more than simply adding that file to the same directory within your Child Theme.

So because you modified the content-espresso_events.php file within:

/iced-mocha/content/espresso/

To make that update safe when iced-mocha is updated you need to copy that file to:

/your-child-theme/content/espresso/

WordPress will check a child theme first for the file requested and it will load that file from the child, then any others needed from then the parent.

So you should have:

/your-child-theme/content/espresso/content-espresso_events.php

It will look something like this – http://take.ms/pcky2
(Note the directory for MY iced mocha child theme is iced-mocha-child, yours may well be different)

You can test this by simply adding some html to the child theme file, for example – http://take.ms/Qw6iT

Then look at the content output – http://take.ms/85N80

Does that help?


Tony

  • Support Staff

April 21, 2015 at 4:30 am

functions.php is for declaring functions, it acts very similar to a plugin.

Your template file (‘content-espresso_events.php’) should not be placed within functions.php


Joost

April 25, 2015 at 4:47 am

Tony,

This works very well indeed. Thanks for the adequate support!

Joost

The support post ‘Customizing the Event Page’ 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