Support

Home Forums Event Espresso Premium Editing the Event List and Event Page

Editing the Event List and Event Page

Posted: October 24, 2015 at 8:29 am

Viewing 18 reply threads


Michael Raymer

October 24, 2015 at 8:29 am

Hi,

I’m trying to customize our EE4 plugin, specifically on these two pages:

1. View All Events page:
Currently, it lists each event title, the event author, and the date of when the event was posted. The event post date actually becomes confusing because there isn’t anywhere else in the event list that displays the event date. So, we want to remove the event author and the event post date. How do we go about doing this? I’ve tried looking up other support posts, but can’t seem to find the proper file in our wordpress directory to make these changes.

Also, in the event list, it displays a preview of the content of the event page. I wanted to customize this by using the excerpt field, but no matter what I put in that field, it does not show up anywhere. Instead, it just displays the first part of content on the event page…which is the ticket prices, quantity, etc. It looks terrible, like a mistake was made. Here’s what we see on EVERY event:

Price Qty* Week 1: Nov 16 @ 9:00-11:00pm $0.00 (CAD) Sold Out Week 2: Nov 23 @ 9:00-11:00pm $0.00 (CAD) Sold Out Week 3: Nov 30 @ 9:00-11:00pm $0.00 (CAD) Sold Out Week 4: Dec 7 @ 9:00-11:00pm $0.00 (CAD) …

How do we change this as well? I want it to use the event excerpt field so we can customize it if need be.

1. Event page:
On the event page, it lists the title, author, and post date again. Want to remove author and post date.

Then, it jumps right into the tickets available, and the add to event cart button (we have the Multiple Event Registration plugin as well). After that is the list of event dates with the iCal link beside them. Then, finally we get into the event description. It’s a little frustrating because we’re asking our users to register for an event before they can event read about it.

How do we flip the order of these so that event description and location/venue is first and tickets are second? We would also like to include an event photo above the description.

Appreciate your assistance. Thanks so much!


Lorenzo Orlando Caum

  • Support Staff

October 24, 2015 at 9:34 am

Hi Michael,

Could you provide a link to one of your pages. It sounds like you may be using a theme framework that works a little different than a standard WordPress theme.

Thanks


Lorenzo


Michael Raymer

October 26, 2015 at 10:20 am

Hi Lorenzo,

Yes, we’re using the Divi theme from Elegant Themes.

Our events are listed here: http://thebridgemarkham.com/events/


Lorenzo Orlando Caum

  • Support Staff

October 26, 2015 at 11:47 am

Hi Michael,

Does the Divi theme have an option for adjusting content that is displayed on the archives listing pages?


Lorenzo


Michael Raymer

October 26, 2015 at 12:32 pm

I’m not sure…not quite sure what an archive listing page is. Sorry… I’m new to WordPress, Divi, and Event Espresso. We were originally using Joomla and just launched our updated site a month ago. I wasn’t the one who created and setup this site, I’m just now starting to maintain it.

I know Divi allows us to either create a page from scratch or load our template and then insert the content/media we want. However, with EE4, it doesn’t allow us to load the Divi theme. Originally, the left menu (Adults, Young Adults, etc) was not visible and the right menu was not styled correctly at all. The developer spent many hours customizing it to make it appear like the rest of our site.

Not sure if that answers your question? I can ask our developer if you need more info.


Lorenzo Orlando Caum

  • Support Staff

October 26, 2015 at 3:57 pm

Hi Michael,

I just remembered how the theme works. You can use the [ESPRESSO_EVENTS] shortcode on a WordPress page and then add that page to your website’s navigation menu:

http://f.cl.ly/items/01282M2K1z233j1O0M1I/Screen%20Recording%202015-08-04%20at%2002.25%20PM.gif


Lorenzo


Michael Raymer

October 27, 2015 at 8:33 am

Thanks Lorenzo!

I tried to do that, but wasn’t having any luck. I believe it was listing all the details of the event, rather then a short preview. Is there a way to show the event name, event date, and excerpt? Hide the event post date, the author, etc.


Lorenzo Orlando Caum

  • Support Staff

October 27, 2015 at 8:49 am

Hi Michael,

Try adjusting the template options to turn off the ticket selector and datetimes in Events –> Templates –> Event Listing Pages:

http://cl.ly/image/0z3f451k3V0E

The following CSS will hide the author information along with post date:

.espresso_events .post-meta {display: none;}

It can be added through the theme if it has a custom CSS area or through a free plugin like Reaktiv CSS Builder or My Custom CSS.


Lorenzo


Michael Raymer

October 27, 2015 at 9:24 am

Amazing! Thank you Lorenzo!
This remove the author and post date and allowed the excerpt to show.

So…our event list page now shows the event title and the excerpt. Is there a way to show the event date? How is this handled if there are multiple event dates?

Also, once on the event details page, how do we adjust the layout so that the content appears in this order?
1. Event title
2. Event Image, if applicable
3. Event description
4. Event location/venue
5. Ticket selector/event cart
6. List of event dates with the iCal buttons
(BTW… it would be awesome if the event dates/iCal buttons were listed side by side in a table, rather then one per row, as it takes up a lot of space on the page. Alternatively, would be cool if it was integrated into the ticket section. In our case, the ticket name is the week number or date, so the iCal export is just a content repeat and only there so users can easily add to their calendar.)


Michael Raymer

October 27, 2015 at 9:26 am

So…our event list page now shows the event title and the excerpt. Is there a way to show the event date? How is this handled if there are multiple event dates?

If you go to our event page ( http://www.thebridgemarkham.com/events ) you’ll see an upcoming events feed on the right side, which appears on all pages of our website. I’m noticing that it displays the event date nicely and if there are multiple event dates, then it displays a date range. How do we integrate this into our event listing, just below each event title?


Tony

  • Support Staff

October 28, 2015 at 8:04 am

Hi Michael,

Event Espresso uses your sites theme and injects your event data into the_content(), this means that some of the elements within the page are control by your theme and not EE.

For example the Event Title and Event Image (feature image) are controlled by your theme.

3. Event description
4. Event location/venue
5. Ticket selector/event cart
6. List of event dates with the iCal buttons

These sections are controlled by EE and we can change the order, however we are currently working on including functionality within EE itself to modify this, how urgent are these changes as any changes made now would need to be removed once this is released?

(BTW… it would be awesome if the event dates/iCal buttons were listed side by side in a table, rather then one per row, as it takes up a lot of space on the page. Alternatively, would be cool if it was integrated into the ticket section. In our case, the ticket name is the week number or date, so the iCal export is just a content repeat and only there so users can easily add to their calendar.)

Integrating the iCal into the ticket selector would need a custom template and the help of a developer to include the details.

Listing the Datetimes side by side can be done using a little CSS:

.single-espresso_events .event-datetimes li {
    float: left;
}

.single-espresso_events .event-datetimes::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

The first block of code floats the datetimes so the are next to each other, the second makes sure you content after the datetimes loads correctly.

I’m noticing that it displays the event date nicely and if there are multiple event dates, then it displays a date range. How do we integrate this into our event listing, just below each event title?

Are you comfortable creating custom template files? To add additional details you’ll need to modify the templates used for the event list.


Michael Raymer

October 29, 2015 at 8:52 am

Thanks Tony!

In regards to changing the order, I do need to do this now, can’t wait for the EE release. I can remove the change once the update is released. Glad you guys are working on that though!

How do I update the order?

Thanks for this CSS! It helped a lot…some events have 10 datetimes, so super helpful to list them side by side.

I’m comfortable with HTML and CSS but fairly new to WordPress and PHP, so would like some assistance creating custom template files. Can you walk me through how to set this up so we can add the event date or event date range to each event in our event list?

Ideally, we’d like it to look nice too with some design/colour. Similar to this: http://northpoint.org/events


Josh

  • Support Staff

October 30, 2015 at 6:26 am

Hi Michael,

It turns out you do not need to edit template files to include the date in the event list. You go to Event Espresso > Events > Templates, then under Event List Pages you set Display Datetimes to Yes.


Michael Raymer

October 30, 2015 at 9:09 am

Thanks Josh. I originally had that setting turned on, however it is displayed as regular text size, rather then drawing some attention to the date. There’s no hierarchy. Also, when there are 10 datetimes, it lists each one instead of a start and end range. Therefore, there isn’t any more room for the excerpt. If eventdate is turned on, it should be on its own line under the event name, and then have the excerpt appear after…not replace it entirely. It also becomes messy, looking like this:

Week 1November 16, 20151:30 pm – 6:00 pmWeek 2November 23, 20151:30 pm – 6:00 pmWeek 3November 30, 20151:30 pm – 6:00 pmWeek 4December 7, 20151:30 pm – 6:00 pmWeek…

I’m looking for it to look something like this:

Event Title
Event Date Start – Event Date End
Event Excerpt

Would be nice to have some CSS formatting, like:
Title formatted as h1
Event Date formatted as h3
Event Excerpt formatted as p

Or have the event date appear as a nice calendar icon to the left of the title and excerpt (like http://northpoint.org/events). I’m just not seeing any nice formatting here at all.


Michael Raymer

October 30, 2015 at 9:23 am

Also, on the event details page, I’m looking to change the order of the various sections that appear. Currently, the order is:

Event Tickets
Event Dates & iCal buttons
Event Description
Event Location/Venue

I want to flip the order around to this:

Event Description
Event Location/Venue
Event Tickets
Event Dates & iCal buttons

Can someone please provide me with instructions on how to do this? Thanks!


Josh

  • Support Staff

October 30, 2015 at 10:00 am

Hi Michael,

The formatting that the plugin provides is minimal, but you can layer on your own CSS to make the formatting just the way you want. You can also alter the markup by customizing each individual template part. More on that later.

While we are working on adding an option to arrange the sections, since you need to arrange them now, you can start with Lorenzo’s guide:
https://gist.github.com/lorenzocaum/0a35fe4997992fdb1dc5

I’ll add that the file you’ll be working with for the event pages 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:
You copy your theme’s archive.php file and rename it to archive-espresso_events.php.
In that new archive-espresso_events.php file, you’ll look for something like this:
<?php get_template_part( 'content', get_post_format() ); ?>
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 archive event page. Setting up a single event page is similar, except you start with single.php and end up with single-espresso_events.php.

Then, in your copy of content-espresso_events.php, you’ll find two sections, the first for single events (is_single()), and the second for archives (is_archive()) or lists.

Within those sections you’ll see this block of code:

<?php espresso_get_template_part( 'content', 'espresso_events-tickets' ); ?>
<?php espresso_get_template_part( 'content', 'espresso_events-datetimes' ); ?>
<?php espresso_get_template_part( 'content', 'espresso_events-details' ); ?>
<?php espresso_get_template_part( 'content', 'espresso_events-venues' ); ?>

and you re-arrange those to the order you want like so:

<?php espresso_get_template_part( 'content', 'espresso_events-details' ); ?>
<?php espresso_get_template_part( 'content', 'espresso_events-venues' ); ?>
<?php espresso_get_template_part( 'content', 'espresso_events-tickets' ); ?>
<?php espresso_get_template_part( 'content', 'espresso_events-datetimes' ); ?>

Then, each of the above template parts can be copied into your theme and you can alter the html in each of them. Event Espresso will look in your theme for the templates first.


Michael Raymer

October 30, 2015 at 10:10 am

Thanks Josh. I appreciate this! I’ll get to work on the event details page and will let you know how it goes.

Is there any documentation or reference guides on formatting the event date in the event archive page?


Josh

  • Support Staff

October 30, 2015 at 10:42 am

No, however if you open up the content-espresso_events-datetimes.php template file, you’ll noted that it’s calling the espresso_list_of_event_dates() template tag. It turns out that the espresso_list_of_event_dates() template tag is a pluggable function. So you can load override it or call in your own custom function for the archive view only.


Michael Raymer

November 10, 2015 at 8:52 am

Hi EE team,

Still working on this and appreciate keeping this post open.

Thanks!

Viewing 18 reply threads

The support post ‘Editing the Event List and 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