Posted: 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: 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: 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! |
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 — |
|
|
Hi Lorenzo, Yes, we’re using the Divi theme from Elegant Themes. Our events are listed here: http://thebridgemarkham.com/events/ |
Hi Michael, Does the Divi theme have an option for adjusting content that is displayed on the archives listing pages? — |
|
|
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. |
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 — |
|
|
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. |
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. — |
|
|
Amazing! Thank you Lorenzo! 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? |
|
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? |
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.
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?
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.
Are you comfortable creating custom template files? To add additional details you’ll need to modify the templates used for the event list. |
|
|
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 |
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. |
|
|
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 Would be nice to have some CSS formatting, like: 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. |
|
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 I want to flip the order around to this: Event Description Can someone please provide me with instructions on how to do this? Thanks! |
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: 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. 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:
and you re-arrange those to the order you want like so:
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. |
|
|
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? |
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. |
|
|
Hi EE team, Still working on this and appreciate keeping this post open. Thanks! |
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.