The Events Table View Template add-on for Event Espresso 4 will display information about your events in a table format. (more…)
Add a Sponsors Section to Events Using Advanced Custom Fields
Requires Event Espresso 4.8 and above.
In this tutorial, we will create an event sponsor section that can be displayed throughout the event details, ticket selector page, and checkout process.
To keep this example short and to the point, I will show you how to add a single sponsor to a an event. Developers that are familiar with the ACF plugin should be able to use the “Repeater Field” and/or the “Flexible Content Field” add-ons for ACF to to create an infinite amount of sponsors for each event.
It is assumed that you are familiar with ACF, are capable of adding new fields to WordPress posts/custom post types, and can add new hooks to your WordPress theme/functions.php. If you are unfamiliar with ACF, please refer to the details and documentation on the Advanced Custom Fields website.
Add a New ACF Field Group for Sponsor Details
- Create a new ACF Field Group (WP Admin > Custom Fields > Add New) [screenshot]
- Add the following fields to the group:
- Company (sponsor_company | Text)
- Website (sponsor_website | Text)
- Bio (sponsor_bio | Wysiwyg Editor)
- Logo/Image (sponsor_logo_image | Image) – Note: Set the Return Value to ‘Image URL’
- Set the “Show this field group if ” setting to “Post Type > is equal to > Event”.
- [optional] Change the order, position, and style of the meta box in the EE4 event editor.
Add a Custom Hook
Next we need to add the code that will output the sponsor details. There are actually two options, which I will outline below:
- Option 1: Child Theme
Add the following code to the functions.php file in a child theme. For more information about child themes, checkout the WordPress Child Theme Documentation. - Option 2: Site Specific Plugin
[Recommended] Create a site specific plugin using the code below. For more information about site specific plugins, check out our documentation on the subject.
function ee_event_sponsor_area() {
?>
<div class="sponsordetails">
<h3><span class="dashicons dashicons-heart "></span>Event Sponsor</h3>
<h4><img align="right" src="<?php the_field( "sponsor_logo_image" )?>"><strong><a href="<?php the_field( "sponsor_website" )?>"><?php the_field( "sponsor_company" )?></a></strong></h4>
<?php the_field( "sponsor_bio" )?>
</div>
<?php
}
add_action( 'AHEE_event_details_after_the_content', 'ee_event_sponsor_area' );
The snippet above uses an EE4 action hook called “AHEE_event_details_after_the_content” to display the contents of the “ee_event_sponsor_area()” function, which contains the HTML for our new sponsor box. The hook can be found within the wp-content/plugins/event-espresso-core/shortcodes/espresso_thank_you/templates/thank-you-page-registration-details.template.php file.
Create a New Event & Add a Sponsor
- Create a new Event Espresso event (WP Admin > Event Espresso > Events > Add New Event)
- In the new meta box generated by ACF using the steps outlined above, add the sponsor details to the event. [screenshot]
- Publish the event.
View the Event on the Front-end
You should end up with something like this in the event details:
Adding the sponsors section to the SPCO
Want to add the sponsors section to the “Single Page Checkout” (the EE4 registration process, also known as SPCO)? This is where it gets a little tricky, because we have to grab the event post ID from the transaction object.
Open your theme/functions.php file and add the following code snippet:
Since the default styles in EE4 push down the “Step 1” heading, you may need to reduce the amount of space between the step heading and the sponsor details [screenshot]. To decrease the space between the step title heading and the sponsors box. You will need to add the following CSS to your theme/functions.php file.
.ui-widget .spco-step-title-hdr {
margin-top:1em !important;;
}
Adding the sponsors section to the “Thank You” page
Adding the the sponsors section to the “Thank You” page is similar to the SPCO. We just need to grab the event post ID from the “$registration” variable, which is passed to the EE4 action hook “AHEE__thank_you_page_registration_details_template__after_registration_table_row”. The hook can be found within the wp-content/plugins/event-espresso-core/shortcodes/espresso_thank_you/templates/thank-you-page-registration-details.template.php file.
function ee_sponsor_area_thank_you_page($registration) {
if ( $registration->attendee() instanceof EE_Attendee ) {
?>
<tr>
<td colspan="3">
<div class="sponsordetails">
<h3><span class="dashicons dashicons-heart"></span>Event Sponsor</h3>
<h4><img align="right" src="<?php the_field( "sponsor_logo_image", $registration->event()->ID() )?>"><strong><a href="<?php the_field( "sponsor_website", $registration->event()->ID() )?>"><?php the_field( "sponsor_company", $registration->event()->ID() )?></a></strong></h4>
<?php the_field( "sponsor_bio", $registration->event()->ID() )?>
</div>
</td>
</tr>
<?php
}
}
add_action( 'AHEE__thank_you_page_registration_details_template__after_registration_table_row', 'ee_sponsor_area_thank_you_page', 10, 1 );
Finishing up the sponsors section
That basically covers adding a sponsors section to a single event, the registration process, and the thank you page. You may, or may not, want to add the sponsors section to each of these places, but the examples are there. If you find that you want to add additional sponsors to each event, you may want to look into using the “Repeater Field” and “Flexible Content Field” add-ons for the Advanced Custom Fields plugin to to create an infinite amount of sponsors for each event.
Related Articles
Adding Related Events Using Advanced Custom Fields
Add a Course Curriculum Section to the “Thank You” Page Using Advanced Custom Fields
How to Set Graduated Ticket Pricing
Starting with Event Espresso 4.3 you can offer graduated pricing based on ticket quantities. This article shows how to set graduated ticket pricing where you can set a lower price per ticket for larger quantity ticket purchases. One advantage of graduated ticket pricing over ticket bundle pricing is the quantity selection can be more flexible.
In the Event Tickets & Datetimes section of the Event Editor you create or edit a ticket and click the gear icon. This will open a panel where you can set values for the Minimum Quantity and Maximum Quantity to the same non-zero value. When the Minimum Quantity and Maximum Quantity fields in the Event Editor are set to different values, then the price displayed in the Ticket Selector Price column will be per ticket. This is how price displays for regular tickets.
In this example we leave the Minimum Quantity field blank and Maximum Quantity field to 5 to create a “regular” price for ticket quantity purchases between 1 and 5. The regular price is set to $20.00.
We create a second ticket where a discounted price of $15 per ticket is applied for orders of 6-10 tickets.
The Price QTY dropdown select box in the Ticket Selector will then display a range of options, beginning with 0 then jumping to the tickets Minimum Quantity, then incrementing by 1 until either the Maximum Quantity or Maximum Registrations limit is reached.
How to Create a Ticket Bundle
Starting with Event Espresso 4.3 you can offer discounted pricing and volume discount promotions based on the quantity of tickets someone purchases. This article shows how to create a ticket bundle where you can set a lower price per ticket when purchased in a quantity bundle that you choose in advance. Ticket Bundles are different than Graduated Pricing which provides tiers of prices based on pre-defined ticket quantities.
Setting up Ticket Bundle Pricing Options
In the Event Tickets & Datetimes section of the Event Editor you create or edit a ticket and click the gear icon (⚙️). Clicking the gear icon ⚙️will open a panel where you can set the Minimum Quantity and Maximum Quantity to the same non-zero value. In this example we set both fields to 4 to create a ticket bundle of 4 tickets.
When displayed in the Event’s Ticket Selector, the Price column will multiply the individual price of the ticket by the ticket bundle quantity.
In this example the ticket price set in the Event Editor is $20 so the ticket bundle of 4 tickets displays “$80 / bundle” in the Ticket Selector Price column, and the QTY dropdown select box in the Ticket Selector will display two options: 0 and 4. There is also a third ticket price set for $15 with a bundle quantity of 8.
Note, we recommend using whole dollar values for the average price of tickets so that the ticket prices do not have to round the dollar amounts by the number of tickets in the bundle. Using fractional dollar amounts can be confusing for attendees and the Event Espresso system.
How to Use Datetime and Ticket Names to Consolidate Event Pages
In Event Espresso 4, if you manage the online event registration and/or ticketing for a category of events (e.g. volunteering opportunities or an on-going writing workshop) you can configure ONE event page and let the multiple datetime and multiple ticket names specify the different dates and ticket options.
Configuring your events this way allows you to:
- have one event page with a specific url where you can refer people to time and time again via email or over the phone or in social media, etc
- Optimize this special event page for your particular type of event to increase your search engine optimization ranking and ticket sales
- Present more volunteering/purchasing options to people at once rather than making them view multiple pages or check out/purchase multiple times
Configure Your Datetime and Ticket Names in WordPress
Here is an example of this strategy with all the upcoming volunteering opportunities for a non-profit organization.
In this case your organization offers multiple types of volunteering opportunities that occur on different dates. This is how you setup Event Espresso 4 and what it looks like:
- You can create one “Volunteer Opportunities” event
- Create a separate datetime for each volunteering opportunity (e.g. Reading to Children, Fundraising, Planting Trees, etc.), by adding the following for each datetime:
- Datetime Title
- Event Start
- Event End
- Capacity Limit
- Description, if the specific datetime (optional) if you
- Create a single ticket that has access to each datetime/volunteering opportunity, by adding the following for each ticket:
- Ticket Title
- Ticket Start datetime
- Ticket End datetime
- Price (it’s free to volunteer in this case)
- Quantity
- Description (optional)
- Create a single ticket that has access to ALL datetimes/volunteering opportunities (this is also optional but it allows people to register for ALL volunteering opportunities or all your upcoming workshops at once)
This is what the admin Event Datetimes & Tickets Editor would look like (click to enlarge):
Front-end Event Registration/Ticketing Experience
Once you have configured your event registration and ticketing for these similar types of events, your potential customers/attendees/volunteers will be presented with all the volunteering opportunities on ONE page. This is what the front-end would look like (click to enlarge).
Notice that by configuring the same (or similar) events onto one page, that your attendees can see every option. They can register for one event, or even register for all these events at one time.
Note: You might host an on-going class, workshop or conference but these principles can work the same for your types of events too.
Advanced Options
If you would like to remove/hide the ticket options that are sold out or expired, you can use a little custom CSS in your theme:
.ticket-sales-expired, .ticket-sales-sold-out { display: none; }
How to add Country options to Registration forms and Venues
You can manage which countries, states, and provinces appear in registration forms by following these steps:
- Navigate to Event Espresso → General Settings → Countries
- Select a Country to edit
- Set Country Appears in Dropdown Select Lists to Yes
- Click the “Save Country Details” button
- Repeat steps 2 – 4 for additional countries
The states/provinces packs are retired and no longer needed.
Adjust the Countries that are Available in the Country Dropdown
To remove a country from the country dropdown, first select it using the Select Country drop-down menu. Then just under the Country Details section you’ll see an option for Country Appears in Dropdown Select Lists. If you would like to remove a country, set the option to No and then scroll down to the bottom of the page and click on the Save Country Details button. To add a country, you’ll follow the steps above up until the Country Appears in Dropdown Select Lists option. You’ll then select Yes (to enable this country) and then scroll down to the bottom of the page and click on Save Country Details.
Adjust the States/Provinces that are Available in the State/Province Dropdown
You can access the states/provinces for various countries in a similar manner. First you’ll need to select your country using the Select Country drop-down menu. Then towards the right side of the screen you’ll see a section for States/Provinces. These are currently included for the United States and Canada. Information for other countries are in the works. If your country is missing information, then you can easily add it. The format should be: Code = Abbreviation Name = State/Province Here is an example for Australia:
ACT Australian Capital Territory
After entering the information, be sure to click on the Add New State/Province button. Similar to the Country dropdown select list, you can enable or disable certain states/provinces for the state/province dropdown list. Just locate your state/province in your list and select Yes or No. Then scroll down and click on Save States/Provinces.
Changing Your Organization Country to Change the Currency
IMPORTANT: In the General Settings > Your Organization, please be sure to select the Country of where your business is located/registered, as this setting affects the currency that is displayed throughout your website. This also affects the currency that will be used when accepting payments for registration.
Code Snippets
You can extend your Event Espresso 4 powered event registration system with any of the code snippets below. Unless otherwise indicated, we recommend placing code snippets within a plugin.
You can find many more snippets in our library hosted on Github.
Add events to any blog archive listing and rss feed
Below is the code to add that will inject the “espresso_events” custom post type into the WordPress WP_Query post_types array. This allows Event Espresso Events to appear in any blog archive listing and rss feed.
Add a category class name to the post class
Below is the code to add that will add a class name to the Event Espresso event post’s post class so events that belong to a specific category can be uniquely styled with CSS.
Deactivate the iCal functionality that was added in Event Espresso 4.3
Below is the code to add that will remove the iCal link that was added in Event Espresso 4.3
Display the base price of the ticket in the ticket selector
Below is the code to add that will change the display of the ticket selector so it displays a base price (instead of the modified price). Requires Event Espresso 4.4 or greater.
Display remaining ticket inventory total for each datetime
Below is the code to add that will add a “Total tickets remaining: x” message below each event’s datetime.
Print an attendee list after the content on the event details page
Below is the code to add that will print an attendee list after the content on the event details page. Displays the gravatar, first name, and last name of each registered attendee for an event.
Exclude events from the event list that have no tickets on sale
Below is the code to add that will remove events from the event list that do not have tickets on sale.
Get the code on Github.com
Print a list of upcoming events for a venue on the venue details page
Below is the code to add that will print a list of upcoming events for a venue after the content on the venue details page. Includes the permalink and event name.
Remove “powered by Event Espresso” admin footer text in Event Espresso 4
Below is the code to add that will remove the “powered by Event Espresso” admin footer text in Event Espresso 4.
Exclude password protected events in EE4
This script will exclude password protected events and posts from the WordPress loop. Adapted from Stackoverflow: http://stackoverflow.com/questions/7538959/how-to-exclude-password-protected-posts-in-wordpress-loop
Yoast’s WordPress SEO and EE4 Metabox fix
This may now be resolved as WordPress SEO has changed its hook, but if you have WordPress SEO installed and EE4 metaboxes disappear from the Event editor page, try using the code published in our snippets library:
How to Hide Certain Elements on the Event Espresso Pages using CSS
In this article, we will learn how to inspect elements on various Event Espresso pages so that we can hide them using CSS. Firebug and Chrome Developer Tools are two free tools that can be used for inspecting elements on a page. The examples in this tutorial will use Chrome Developer Tools.
Inspect Elements using Chrome Developer Tools
Lets begin by taking a look at a test event.
In the image above we can see several types of information such at the event title, the event description, and the ticket options. Each of these is an “element” on the page. This means that there is either a CSS id and/or a CSS class associated with each of these elements. Some elements such as the ticket options area has as handful of different elements since the ticket options is made up of different parts (eg. heading, name of ticket, price, quantity, and so forth).
Now lets have another look at a specific area of the image above with Chrome Developer Tools.
From within Google Chrome, I’ve right-clicked on the Events Details heading and selected Inspect Element. Towards the bottom of the image, we see an h3 tag that has some CSS classes associated with it: about-event-h3 ee-event-h3. Both of these CSS classes provide the styling for this heading.
Lets take a look at another element from the screenshot at the beginning of the tutorial. The image below is for the maximum number of tickets messaging:
This element has the following CSS classes linked to it through a paragraph tag: smaller-text lt-grey-text.
Apply CSS to Specific Pages
Now we should have a basic understanding of how to inspect elements on a page using Chrome Developer Tools. The next step is to link these CSS ids and CSS classes to body classes so that we can create specific styles.
The following CSS is used for post meta data: entry-meta. An example of post meta data would be the author name or the date that a post was published on. The following CSS will hide this information on the entire site:
.entry-meta{display:none;}
The problem is that you may want to show the date and author name on your blog posts but not on your event page. Body classes can help with this. Here are two examples of body classes that you may see on a single event page: single-espresso_events postid-123.
There is a hierarchy which means that single-espresso_events will apply to all single event pages while postid-123 will only apply to the single event page for an event with an id of 123. This may seem confusing so here are some examples along with explanations:
Remove any element with a CSS class of entry-meta across the entire site
.entry-meta{display:none;}
Remove any element with a CSS class of entry-meta for all single event pages
.single-espresso_events .entry-meta{display:none;}
Remove any element with a CSS class of entry-meta for a single event page with a post id of 123
.postid-123 .entry-meta{display:none;}
A body class is also available for the event list page: post-type-archive-espresso_events
We can also apply this body class to elements so that the styles are only applied on the event list page.
Remove the Event Details heading from only the event list page
.post-type-archive-espresso_events .about-event-h3.ee-event-h3{display:none;}
Remove the leave reply link (comments) from only the event list page
.post-type-archive-espresso_events .leave-reply{display:none;}
Any of these CSS examples can be copied and pasted into your child theme’s stylesheet or into a plugin like Reaktiv CSS Builder or My Custom CSS.
Ready to Go CSS Styles
Here are some styles for specific themes. They should be applied in a similar manner as the examples shared earlier in the post and they will help your theme look less like a blog post by hiding information such as the published on date and author.
Also, see this additional resource for this tutorial:
How to Manually Add a Registrant through the WordPress Dashboard
There may be times where you need to add a registrant to an event but you don’t want to have the registrant do this themselves. An example would be if a registrant does registration on the day of the event.
In this tutorial, we will go over how to add a registrant through the WordPress admin.
A manual registration through the WP dashboard is not compatible with the promotions system, WP User integration, or LearnDash. This means that registrants that are manually added cannot be discounted via a promotion / discount code, user accounts are not created via the WP User integration, and they are not added to LearnDash. If you need this functionality, then please register registrants/attendees through the front-end registration page.
Begin by logging into your WordPress admin. Then find Event Espresso in the WordPress admin menu and click on Events. Now hover over the name of the event and more options will appear. Click on Registrations.
This will take you to the registrations page for this event. At the top of the page you’ll see a button that says Add New Registration. Click on that button. On the next screen you’ll be able to begin the registration process.
Here is an example of what it looks like for our example event called Golf Tournament:
You can also send out an email notification to the registrant:
Be sure to toggle full screen in the bottom corner of the video.
Notes: in the video above we cover how to manually register a registrant/attendee through your WP dashboard.
How to set up admin only ticket options
Sometimes you may need to close online registration on the front end of the site and retain the ability to add registrations from the WP dashboard. Or you may have a need to set a specific type of ticket that can only be selected from the WP dashboard by an event admin. There’s a simple add-on developed by a third party that you can use to set specific “admin-only tickets” after a ticket is saved. You can download the add-on from github:
https://github.com/chasecmiller/EE4-AdminOnlyTicket
Common Errors during Registration Checkout in Event Espresso
This page highlights common errors that a registrant or attendee may experience during registration checkout and shares solutions on how to fix these issues. Some of these issues may no longer exist as new versions of Event Espresso 4 are released.
You need to select a ticket quantity before you can proceed
The error above may occur on the event list page or a single event page. It will happen if you try to register without selecting at least one ticket.
Here is how to fix this issue:
Select one or more tickets from the ticket selector before trying to complete your registration checkout.
Nothing in your Event Queue
The error above could happen if a registrant/attendee browses directly to the registration checkout page through a link on the website. It may also happen after selecting a ticket and moving to the next step of registration checkout. It is more likely to be caused by a caching plugin or service.
Here is how to fix this issue:
Remove any links to the registration checkout page from the navigation menu for your website (WP-admin –> Appearance –> Menus).
Setup no cache / exclusion rules for the Event Espresso pages. See our guide on how to setup caching plugins with Event Espresso.
Your form data could not be applied to any valid registrations
The error above may occur when submitting the registration information for an attendee/registrant. It can be caused by a plugin conflict such as Simple CSS or a caching plugin.
Here is how to fix this issue:
Notice: The fixes below will no longer be needed in Event Espresso 4.3 and up.
Deactivate the plugin that is creating the conflict and/or switch to an alternative.
Setup no cache / exclusion rules for the Event Espresso pages. See our guide on how to setup caching plugins with Event Espresso.