There’ll be times that you find you want to customize various elements of Event Espresso 3’s front-end design and interface to suit your own needs. With a bit of knowledge of CSS, HTML and PHP you should be able to hack away at Event Espresso 3 to turn it into whatever type of beast that you need.
This tutorial will give you a very basic introduction to customizing Event Espresso 3. It will introduce you to the basic concepts, and to the steps that you need to carry out a safe customization.
CSS or Templates?
There are two main ways that you can customize Event Espresso 3:
Using CSS
Using Template Files
CSS is used if you want to make changes to design elements. We have provided a file called espresso_default.css where you can make style changes specifically for Event Espresso 3. This includes changes to design elements such as fonts, colors and spacing. In this tutorial we will use CSS to change the link colors in our sidebar widget.
Template Files are used for any more complex editing. You can use them, for example, to insert additional elements, or to make changes to the PHP. We will make a very basic change to the widget.php file, using it to add a separating line between events.
If you make any changes to your template files or any of our pre-installed stylesheets it’s important that you copy them to another folder. This will prevent your changes from being overwritten when you update Event Espresso 3.
Let’s get started!
Step 1: Editing Your Styles
To make simple design changes to your events widget you can use CSS. You can do this by adding styles to the espresso_default.css file.
Unless you are using one of Event Espresso 3’s pre-made css templates we recommend that you use espresso_default.css to make any changes to Event Espresso 3 elements. This can be found in the event-espresso/templates/css/ folder. Once you’ve made changes to the css file you will need to copy it to prevent it from being overwritten when you update Event Espresso 3. You’ll see how to do this in step 2.
Note: If you are using a pre-installed Event Espresso template located in Template > Settings such as any of the themeroller styles you should make any changes to your CSS in your child theme’s stylesheet – style.css. This will prevent any potential problems.
If you are using any of the Themeroller styles you should add custom changes to your child theme’s stylesheet!
Open your espresso_default.css file to make changes to it.
The class you need for styling the elements in your widget is
.widget.events
So to edit the list within the widget you would use
.widget.events ol
To change the links you would use
.widget.events a, .widget.events a:link, .widget.events a:visited,
.widget.events a:hover, .widget.events a:active
Tip:
If you want to get information about the CSS of individual element you can use Firebug for Firefox, or Chrome’s Developer Tools.
When you install Event Espresso your template files are stored in wp-content/plugins/event-espresso/templates/
Every time Event Espresso is updated these files are overwritten. To ensure that any changes you make to your template files don’t disappear, you need to copy over any template files you have edited. The correct location for edited templates files is:
wp-content/uploads/espresso/templates
Event Espresso will first check in here to see what it should do, it always takes precedence. If there are no modified files it’ll check out the original templates folder in plugins/event-espresso/templates.
We want to copy over two files:
espresso_default.css, which we just made changes to. This will be copied into a folder named “css”.
widget.php, which we will edit in the next step to make changes to the upcoming events widget.
Navigate to wp-content/plugins/event-espresso/templates/ and find the two files.
Copy the files to wp-content/uploads/espresso/templates They should look something like this:
Note:
If you do make changes to your template files you will need to check the files in the original templates folder each time you update Event Espresso. It’s important that you check to make sure that nothing has changed. You can use a tool like DiffMerge to compare the two files and update any changes made. We do update the template files occasionally and it can cause problems if you are using an old version.
That’s it! Any changes that you make are now safely tucked away.
Step 3: Editing Your Template File
You’re now ready to edit your template file.
Note:
We do expect those who want to customize their template files to have some understanding and experience with PHP programming. Questions to clarify Event Espresso functions or code can be asked in the forums, but if you are not familiar with PHP and anticipate significant help to customize the templates for your website, please submit a Customization Request to our staff.
We’re going to make a very simple edit that shouldn’t cause you many problems. We’ll add a separator so that there is a line between each event in the widget.
Open widget.php in your favorite text editor.
Starting on line 130 you’ll find the following code:
<a href="<?php echo $registration_url; ?>"><?php echo stripslashes_deep($event->event_name) ?> - <span class="widget-event-date"><?php echo event_date_display($event->start_date) ?></span></a>
<?php /* These are custom messages that can be displayed based on the event status. Just comment the one you want to use. */ ?>
<?php //echo $status_display; //Turn this on to display the overall status of the event. ?>
<?php //echo $status_display_ongoing; //Turn this on to display the ongoing message. ?>
<?php //echo $status_display_deleted; //Turn this on to display the deleted message. ?>
<?php //echo $status_display_secondary; //Turn this on to display the waitlist message. ?>
<?php //echo $status_display_reg_closed; //Turn this on to display the secondary message. ?>
<?php //echo $status_display_not_open; //Turn this on to display the secondary message. ?>
<?php //echo $status_display_open; //Turn this on to display the secondary message. ?>
<?php //echo $status_display_custom_closed; //Turn this on to display the secondary message. ?>
</li>
Underneath this we want to add a
<hr />
tag. Like so:
<li><a href="<?php echo $registration_url; ?>"><?php echo stripslashes_deep($event->event_name) ?> - <span class="widget-event-date"><?php echo event_date_display($event->start_date) ?></span></a>
<?php /* These are custom messages that can be displayed based on the event status. Just comment the one you want to use. */ ?>
<?php //echo $status_display; //Turn this on to display the overall status of the event. ?>
<?php //echo $status_display_ongoing; //Turn this on to display the ongoing message. ?>
<?php //echo $status_display_deleted; //Turn this on to display the deleted message. ?>
<?php //echo $status_display_secondary; //Turn this on to display the waitlist message. ?>
<?php //echo $status_display_reg_closed; //Turn this on to display the secondary message. ?>
<?php //echo $status_display_not_open; //Turn this on to display the secondary message. ?>
<?php //echo $status_display_open; //Turn this on to display the secondary message. ?>
<?php //echo $status_display_custom_closed; //Turn this on to display the secondary message. ?>
</li>
<hr />
Then save the file and close it.
Your upcoming events widget should now look like this:
This is a list of shortcodes and template variables used in Event Espresso.
Single Events
Displays a single event on a page or post.
Please note that the “your_event_identifier” parameter uses the Unique Event Identifier which is found under the event title in the editor screen, and not the event ID.
Do not replace the [ESPRESSO_EVENTS] shortcode with the [SINGLEEVENT] shortcode.
The “Shortcode” button in the event editor will generate this shortcode for you. Copy and paste the generated shortcode onto a page or post to display a single event on a page or post.
Add Events to Cart
Displays an “Add Event to Cart” link that can be added to the event details, page, or post. Requires the Multiple Event Registration add-on.
[ESPRESSO_CART_LINK event_id="1" anchor="Register for This Event"]
(Adds a “Register for This Event” link which adds the selected event to the cart.)
[ESPRESSO_CART_LINK event_id="1-2-3" anchor="Register for These Events"]
(Adds events with the event IDs of 1, 2 & 3 to the cart.)
Additional Examples:
[ESPRESSO_CART_LINK direct_to_cart=1 moving_to_cart="Redirecting to cart..."]
(Used to redirect to the shopping cart page. Must be added to an event description.)
[ESPRESSO_CART_LINK event_id="add_event_id_here" direct_to_cart=1 moving_to_cart="Redirecting to cart..."]
(Same as above, but uses the event_id parameter and can be added to a page or post.)
Event List
Returns a list of events
[EVENT_LIST]
[EVENT_LIST limit=1]
[EVENT_LIST show_expired=true]
[EVENT_LIST show_deleted=true]
[EVENT_LIST show_secondary=true]
[EVENT_LIST show_recurrence=true] (for recurring events)
[EVENT_LIST category_identifier=your_category_identifier]
or
[EVENT_LIST event_category_id=your_category_identifier]
[EVENT_LIST events_per_page=10] (adds pagination to the event list)
[EVENT_LIST order_by=date(start_date),id]
[EVENT_LIST sort=DESC] sort in a descending order - must be used in conjunction with order_by
examples: order_by=start_date -or- order_by=event_name
[EVENT_LIST sort=ASC] sort in an ascending order - must be used in conjunction with order_by
[EVENT_LIST staff_id="1"] show only events assigned to a staff member (number is staff members ID)
[EVENT_LIST css_class=my-custom-class] adds a class to every event so you can style event lists differently. just change the "my-custom-class" to your actual CSS class.
Multiple categories can be used by adding a comma separated list, e.g. [EVENT_LIST category_identifier=”category1, category2, category n”] (as of version 3.1.30 and beyond)
Order by parameters:
(comma separated)
id
date(start_date)
date(end_date)
time(start_time)
time(end_time)
event_name
date(registration_start)
date(registration_end)
city
state
category_id
venue_title
Important:
The [EVENT_LIST] shortcode should not be used as a replacement for the [ESPRESSO_EVENTS] shortcode. Replacing the [ESPRESSO_EVENTS] shortcode will break your registration pages. If you use the [EVENT_LIST] shortcode please use it on a new page. Then what you can do is hide the page with the [ESPRESSO_EVENTS] shortcode from the site’s navigation menu.
Event Search
Creates an autocomplete search tool.
[EVENT_SEARCH]
Attendee Numbers
Display the amount of attendees and/or registration limit
[ATTENDEE_NUMBERS event_id=1 type=reg_limit]
Available parameters: event_id – required type – required
Available types
available_spaces = returns the number of available spaces
num_attendees = returns the number of attendees
reg_limit = returns the total number of spaces
num_incomplete = returns the number of incomplete (non paid) registrations
num_completed = returns the number of completed (paid) registrations
num_completed_slash_incomplete = returns the number of completed and incomplete registrations separated by a slash (eg. 3/1)
num_attendees_slash_reg_limit = returns the number of attendees and the registration limit separated by a slash (eg. 4/30)
This shortcode is part of the WP User Integration (version 1.9.5 onwards) and should be used on a page or post and displays the current and past events for the logged in user.
Edit Profile
[ESPRESSO_EDIT_PROFILE]
Using this shortcode you can allow a logged in user to edit their profile from the front end of your website.
Event price
Number is the number of the result you want to display. For example: 0 is the first instance of the price array, 1 would be the second price in the array.
[LISTATTENDEES]
[LISTATTENDEES limit="30"] //Number of events to show on the page
[LISTATTENDEES paid_only="true"] //Show completed and pending registrations only
[LISTATTENDEES show_expired="true"] //Show expired events
[LISTATTENDEES show_deleted="true"] //Show deleted events
[LISTATTENDEES show_secondary="true"] //Show secondary/backup events
[LISTATTENDEES show_gravatar="true"] //Show a Gravatar of the attendee
[LISTATTENDEES show_recurrence="false"] //Exclude recurring events
[LISTATTENDEES event_identifier="your_event_identifier"] //Show a single event using the event identifier
[LISTATTENDEES category_identifier="your_category_identifier"] //Show a group of events in a category using the category identifier
Event Description Example: If you want to display venue details within an event, the venue id is not needed. Just add [ESPRESSO_VENUE] to your event description.
Page/Post Example: You can display the details of any venue to a page, post or event by adding the id of the venue to the shortcode.
[ESPRESSO_VENUE id="3"]
Page/Post Example #2: If you want to display a the details of a venue on a page, post or event add the event id to the
[ESPRESSO_VENUE]
shortcode.
[ESPRESSO_VENUE event_id="8"]
Available parameters:
outside_wrapper_class = class name for the outside wrapper. Eg. event_venue
outside_wrapper = outside wrapper element. Eg. div
inside_wrapper_class = class name for the outside wrapper. Eg. venue_details
inside_wrapper = inside wrapper element. Eg. p
title_class = class name for the title Eg. venue_name
title_wrapper = title wrapper element. Eg. h3
show_title = show the venue name? (true|false default true)
image_class = class name for the image. Eg. venue_image
show_image = show the image? (true|false default true)
show_description = show the description? (true|false default true)
show_address = show the address of the venue? (true|false default true)
show_additional_details = show the additional details? (true|false default true)
show_google_map_link = show the Google map link? (true|false default true)
map_link_text = text to display in the link. Eg. Map and Directions
show_map_image (true|false default true)
map_image_wrapper
map_image_class
map_w (map image width default 400)
map_h (map image height default 400)
Venue List
[ESPRESSO_VENUE_EVENTS id=1]
Displays a list of events that are assigned to a single venue. Use the venue ID. You can use the same parameters that the [EVENT_LIST] shortcode supports.
Important:
The [ESPRESSO_VENUE_EVENTS] shortcode should not be used as a replacement for the [ESPRESSO_EVENTS] shortcode. Replacing the [ESPRESSO_EVENTS] shortcode will break your registration pages. If you use the [ESPRESSO_VENUE_EVENTS] shortcode please use it on a new page. Then what you can then do is hide the page with the [ESPRESSO_EVENTS] shortcode from the site’s navigation menu.
Staff Shortcodes
Event Description Example:
If you want to display a list of staff members within an event, the staff id is not needed. Just add [ESPRESSO_STAFF] to your event description.
Page/Post Example:
You can display the details of any staff member to a page, post or event by adding the id of the staff member to the shortcode.
[ESPRESSO_STAFF id="3"]
Page/Post Example #2:
If you want to display a list of staff members assigned to an event, to a page, post or event add the event id to the [ESPRESSO_STAFF] shortcode.
[ESPRESSO_STAFF event_id="8"]
Template Example:
If you want to automate this process, you can add the following to your event_registration_display.php file and it will display every staff member attached to that event.
outside_wrapper_class = class name for the outside wrapper. Eg. event_staff
outside_wrapper = outside wrapper element. Eg. div
inside_wrapper_class = class name for the outside wrapper. Eg. event_person
inside_wrapper = inside wrapper element. Eg. p
name_class = class name for the persons name
name_wrapper = name wrapper element. Eg. strong
image_class = class name for the image. Eg. venue_image
show_image = show the persons image? (true|false default true)
show_staff_titles = show the persons title? (true|false default true)
show_staff_details = show the details? (true|false default true)
show_staff_roles = show the persons role (true|false default true)
show_description = show the description? (true|false default true)
The [EVENT_ESPRESSO_CATEGORY] shortcode should not be used as a replacement for the [ESPRESSO_EVENTS] shortcode. Replacing the [ESPRESSO_EVENTS] shortcode will break your registration pages. If you use the [EVENT_ESPRESSO_CATEGORY] shortcode please use it on a new page. Then what you can then do is hide the page with the [ESPRESSO_EVENTS] shortcode from the site’s navigation menu.
event_id(required) type ( start_date_time (default) | end_date_time | start_time | end_time | start_date | end_date | start_timestamp | end_timestamp ) format (optional) the format of the date or time.
Please refer to http://php.net/manual/en/function.date.php for date/time formats
Event meta boxes allow you to add extra information to your event that you can display in your templates or use in your custom pages. The name parameter is the the first box labeled ‘Key’ and allows the shortcode to identify which meta box is to be displayed; the ‘Value’ is the actual content you wish to be shown.
Shortcodes
This extra information can be displayed in your event listings or registration pages via shortcodes added to the event description. The Shortcodes take the form of:
[EE_META type='event_meta' name='my_meta_key']
If you are using custom templates (moved to the uploads folder) you can add the shortcode directly to the template, this would take the form of:
On the right sidebar, set Display Registration Form to No. We want to use the Add to Cart link instead of the standard registration form, so we need to disable the registration form for this event. Attendees will still be required to fill out all the information, just later in the process.
2 — Add the shortcode
Fill out your event as you normally would. When you are done, add the following shortcode to the event description.
[ESPRESSO_CART_LINK]
In the example below, I am using the shortcode with some additional parameters. These parameters sets the link text to “Register for this Event” (default is “Add to Cart”), moves directly to the cart page after being clicked (default is to change the link text to a View Cart link, allowing users to add more events to the cart), and sets the text that displays while it’s redirecting to “Redirecting to cart…”.
[ESPRESSO_CART_LINK anchor="Register for this Event" direct_to_cart=1 moving_to_cart="Redirecting to cart..."]
Here is a screenshot of the shortcode above after it has been added to the event description area in the event editor:
Your event will now display the cart link instead of the registration form.
Customizing: Use a button instead of a text link
Now here’s a trick.
Using the above method, you can use an image or a button instead of text. Doing so requires some basic knowledge of HTML <img> tags.
Replace your ESPRESSO_CART_LINK with this:
[ESPRESSO_CART_LINK anchor='<img src="https://path.to.your/img.jpg" alt="Register for this Event" />' direct_to_cart=1 moving_to_cart="Redirecting to cart..."]
where 'http://path.to.your/img.jpg' is the direct URL for the image file you want to use. The result will be something like this:
If you are going to use this method, be sure you make the required changes in HTML view in the editor. The reason for this is that the single quotes ( ' ) in the <img> tag are very important, and if you do this in the visual editor, the editor will replace the single quotes ( ' ) with double quotes ( " ) and break the shortcode.
That’s it!
Posted in | Comments Off on Multiple Events Registration – Use ‘Add to Cart’ Link Instead of Default Registration Form
If you will be offering on-site payment options (like PayPal Pro or Authorize.net) then we recommend adding SSL-encryption to your site. This guide will help you set up SSL for your Event Espresso powered website.
Notes:
Before you start, be sure you have a private (non-shared) SSL certificate installed for your domain.
You will want to enable Force SSL Exclusively if you only want to load your site in SSL on selective pages. (If you want to enable SSL on all pages you can use the other plugin recommended in option 1)
If you have Event Espresso 4 you will also need to secure the WordPress admin by checking the box with the label “Force SSL Administration”.
Now you will need to Force SSL on the Event Espresso pages that display the ticket selector and handle checkout. You can set these with the URL Filters > Secure Filters fields on the HTTPS settings page.
Refer to the Page Settings in your Event Espresso General Settings to make sure you are updating the correct pages. If you will be adding new pages that have the Ticket selector shortcode on them, you can force those pages to be secure from the page editor.
The pages that need to be secured are also listed in Event Espresso>System Status/ Event Espresso>General Settings>Critical Pages. These are:
Main Registration Page/Registration Checkout Page
Auto Return URL/Thank You Page
Notify URL/Transactions Page
Now you can go to your event list and do a test registration. You should be able to complete the transaction with SSL.
Other notes:
If you have Event Espresso 4 you will also need to secure the WordPress admin by checking the box with the label “Force SSL Administration”.
Event Espresso 3 only: If you have Multi Event Registration installed and are using the [ESPRESSO_CART_LINK] shortcode on pages and posts you’ll need to secure those pages as well.
If you are using the WP Users integration, you may want to enable FORCE_SSL_LOGIN or force SSL across the site to be sure that your members do not get logged out when the site they enter the SSL-encrypted pages. See Administration over SSL for more information.
Some WordPress theme authors and plugin developers hardcode “http” when linking to page resources like images and JavaScript files. This will usually lead to insecure content warnings. Theme files and plugin files may need to be altered to use the WordPress template tags get_home_url and site_url.
If you have WooCommerce installed on your site you’ll need to ensure that you do not have any force HTTP/HTTPs settings turned on in the WooCommerce plugin.
Posted in | Comments Off on Securing your Registration and Payment Pages
Event Espresso is one of the few event management systems that allows localization in your language. There are a few things you need to do or be aware of if you want to use Event Espresso in your language or translate Event Espresso.
Localize your version of WordPress
As of WordPress version 4.2 it is now really easy to change the language of your site.
From the Dashboard simply go to Settings -> General and scroll down to the bottom of the page. There you will see an option to set the site language:
WordPress will only display languages that are fully translated within the list, you can view all of the available languages for WordPress here:
If your language is not available within Settings, but is shown in the above list you will need to manually set the sites language within your wp-config.php file using the WPLANG constant explained below.
Define the language of your site in wp-config.php (Site Settings in Multisite)
Now you need to do is set the language definition of the site in your wp-config.php file. Find this line:
define ('WPLANG', '');
and change it to your native language, e.g.:
define ('WPLANG', 'it_IT');
Note: If you are using WordPress Multisite, you need to set the WPLANG variable for the site you are working on via Site Settings. For multisite, go to Network Admin -> Sites -> All Sites and click on the Settings tab for the site you are working on. Scroll down (or CTRL/Command + F) to find the WPLANG option. Set this to the language code for the language you want to use.
This means it is possible to have a WordPress multisite set up to serve a separate language on each site (and have a separate, localized version of Event Espresso active on each — assuming, of course, that there is an Event Espresso language file for each site language).
Event Espresso in Your Language
If you would like to translate Event Espresso, we want to hear from you! Please see this page for more information and an application:
All our translations are submitted by users and could always benefit from vigilant updates and revisions, and new translations are always welcome. By letting us know that you intend to translate or update a translation, we can show our appreciation by offering discount codes or free copies of the plugin or add-ons.
To start translating Event Espresso, you must first follow the steps above so your are now using a localized version of WordPress. You will then be able to see your changes on your Event Espresso installation. We recommend setting up a local installation of WordPress via WAMP/MAMP/XAMPP if you do not want to make the changes on your live site. We also recommend using Poedit for the actual translations.
The Event Espresso translation files are available through our GlotPress project:
In Poedit, translating Event Espresso should be fairly straightforward. Select a line to translate, and enter the translated string in the box below. When you are done, click the Save Catalog button and an .mo file will be generated automatically. When your translation is complete, send it to support@eventespresso.com and cc sales@eventespresso.com, so we can test it and add it to the plugin.
Uploading your Event Espresso language files
Firstly we need make sure we are using the correct filename that Event Espresso is looking for.
EE3 allows for a single filename: event_espresso-{locale}.mo
EE4 allows for two filenames: event_espresso-{locale}.mo event-espresso-4-{locale}.mo
{locale} will need match what is set for WPLANG which is taken either from the site language you have set in General Settings (which actually automatically sets WPLANG constant) or you match the WPLANG constant above if you set it manually.
For example if you have the site language set to French, this automatically sets WPLANG to fr_FR, therefore an example of your .po/mo files would be:
Now that you have your translation files (with or without custom translations) you will need somewhere to safely store them on your server so Event Espresso can use them on your site, we have a location for doing just that.
Using FTP you upload your .MO file to /site_root_directory/wp-content/uploads/espresso/languages/
In this example the site_root_directory is ‘example’, if you are unsure please contact your host for further information.
Event Espresso 4 automatically downloads the translation files from github and places them within /wp-content/plugins/event-espresso-core-reg/languages/ this location is not to be used for your custom translation files as they will be lost on each update of Event Espresso and the github versions re-downloaded. The translation files in the location above will override the default ones EE4 downloads automatically.
Translation Resources
List of ISO 639-1 (language) codes — This is the complete list of language codes that should be used/referred to when creating a new language file. The two-letter language code should be lowercase in your language file, e.g. event_espresso-es_XX.po ISO 3166-1 alpha (country) codes — This is a complete list of country codes that should be used/referred to when creating a new language file. The two-letter country code should be UPPERCASE in your language file, e.g. event_espresso-xx_ES.po WordPress in Your Language — Official directory for localized WordPress versions. Translations may not appear if not using a localized version of WordPress and the WPLANG variable will not appear in Site Settings on Multisite without at least one language file in /wp-config/languages. Translating WordPress — Codex documentation mostly targeted toward translating WordPress core, but can be helpful in translating plugins as well. Translating WordPress into another language (themes and plugins too) — Excellent post that covers pretty much the whole process fairly succinctly Poedit — Use this to create your language files (this is what we use, though other options are available). WampServer — For setting up a local WordPress installation on a Windows PC. MAMP — For setting up a local WordPress installation on a Mac (OSX 10.6.6+ for the latest version, OSX 10.4+ for MAMP 1.9.6.1) XAMPP — For setting up a local WordPress installation on a Windows PC (Windows 2000 and above)/Mac (OSX 10.4 and above)/Solaris (8 or 9)/Linux PC.
Posted in | Comments Off on Translating Event Espresso
Installation for the Event Espresso 4 Events Calendar add-on
This add-on is a plugin for WordPress and can be installed through your WP dashboard (WP-admin).
Download the latest version of the Events Calendar add-on for Event Espresso 4 from your Event Espresso account.
Then login to your WordPress dashboard (WP-admin) and go to Plugins. Next, click on Add New –> Upload and browse to the plugin on your computer. Then select the zip file and begin the upload process. Wait for the plugin to upload and then click on Activate.
Setup and Configuration for EE4 Events Calendar add-on
Login to your WP dashboard and go to Event Espresso –> Settings –> Calendar. This will take you to the settings screen for the add-on. Below are explanations of the various settings.
Basic Settings
Time/Date Settings
Show Event Time in Calendar: Allows you to specify if the event time should be shown in the calendar?
First Day of the Week: Select the first day of the week. This day will appear in the first column of the calendar.
Show Weekends: Specify if weekends should appear in your calendar
Page Settings
Week mode: Determines the number of weeks displayed in a month view. Also determines each week’s height.
“fixed” – The calendar will always be 6 weeks tall. The height will always be the same, as determined by the calendar height setting or the aspect ratio.
“liquid” – The calendar will have either 4, 5, or 6 weeks, depending on the month. The height of the weeks will stretch to fill the available height, as determined by the calendar height setting or the aspect ratio.
“variable” – The calendar will have either 4, 5, or 6 weeks, depending on the month. Each week will have the same constant height, meaning the calendar’s height will change month-to-month.
Height: Enter a specific height for the calendar in pixels. This is optional
Link to Post or Registration Page: Select where the registration button on the calendar should take an attendee/registrant.
Theme Settings
Enable Images in the Calendar: This option can be used to show features images in the calendar. For best styling, use uniformly-sized images for featured images in your calendar. Recommended filetype: jpeg.
Enable Filters in Calendar: Specify if filters should be made available. Filters will let a registrant/attendee view a specific group of events either by event category or event venue.
Show category legend: Specify if the event category should appear above the calendar. It allows an attendee/registrant to quickly browse to a category of events on the calendar.
Use Color Pickers: This lets you customize the default event background color and text color.
Event Background Color: This is a color picker option for the event background.
Event Text Color: This is a color picker option for the event text.
Show Tooltips: Tooltips are a short description of your event. They will appear when you hover over a calendar event. This option will let you enable or disable them.
Tooltip Position: Specify where the tooltip should appear (when you hover over an event on the calendar).
Display Attendee Limits: This option will show attendee limits in the calendar. This will increase the queries on the database and may use a lot of resources on your site.
Disable Categories: This option can help speed up your calendar but will break any event category option on the calendar such as the event category legend.
Reset Calendar Settings: This setting will reset the calendar back to its default settings. Any exist settings will be lost!
Add the Calendar shortcode to a post or page
The calendar shortcodes allow you to display the calendar on a WordPress page or post. Unless otherwise specified, the calendar will show all events by month and exclude expired events. Here are some examples of shortcodes that you can place on a WordPress post or page to display a calendar:
Show a calendar with all of your events
[ESPRESSO_CALENDAR]
Show events on the calendar and include expired events
[ESPRESSO_CALENDAR show_expired=true]
Show events from a specific category on the calendar
[ESPRESSO_CALENDAR event_category_id=your_category_id]
Show events from a specific category on the calendar and include expired events
[ESPRESSO_CALENDAR event_category_id=your_category_id show_expired=true]
Show events from a specific event venue on the calendar
[ESPRESSO_CALENDAR event_venue_id=your_venue_id]
Show events on the calendar by specific month (numeric value) and year (numeric value)
[ESPRESSO_CALENDAR month=01 year=2016]
Show events on the calendar by month
[ESPRESSO_CALENDAR cal_view=month]
Show events on the calendar by a regular week
[ESPRESSO_CALENDAR cal_view=basicWeek]
Show events on the calendar by a regular day
[ESPRESSO_CALENDAR cal_view=basicDay]
Show events on the calendar by an agenda week
[ESPRESSO_CALENDAR cal_view=agendaWeek]
Show events on the calendar by an agenda day
[ESPRESSO_CALENDAR cal_view=agendaDay]
Shortcode Parameters
The following parameters are available for this add-on. You can see examples of these parameters in use in the section above.
show_expired=false (set to true to show expired events) event_category_id=456 (show events from a certain event category (e.g. an event category with an event category ID of 456)) event_venue_id=123 (show events from a specific venue (e.g. an event venue with a post ID of 123)) cal_view=month (set a default view for the calendar: month, basicWeek, basicDay, agendaWeek, agendaDay) month=01 (set the starting month using a number (e.g. 01 for January or 12 for December) year=2020 (set the starting year using a number as the year (e.g. 2020)) max_events_per_day=1 (limit the number of date times displayed per date to 1 in the month view)
You can add the month parameter to the calendar shortcode to start the calendar on a specific month. For example, if the events are planned to start on the month of September, you can use this shortcode: [ESPRESSO_CALENDAR month=9]
You can use this excellent Mobile Detect Plugin to serve a list of events, week view, or other format, while still displaying the Calendar’s month view for larger displays. Some usage examples follow:
Use these shortcodes to show calendar on larger displays, list of events on mobile
Troubleshooting the Event Espresso 4 Events Calendar add-on
The plugin does not work as expected. Can you help?
Please double-check your calendar is up-to-date and that the calendar shortcode is published on a WordPress Page.
Calendar featured images are cropped or not rendered to the correct sizes
For best results use uniformly sized and oriented featured images for the events. Use only jpeg files for best results.
jQuery conflicts
The registration forms and events calendar depend upon jQuery. If another theme or plugin loads jQuery after WordPress loads its version of jQuery, the calendar or form validation may break and therefore allow blank registration forms to be submitted and/or the calendar to disappear. This usually happens because a theme or plugin may be loading the scripts directly in the header of your site. The proper way of loading scripts is by using the WordPress function wp_enqueue_script.
This can also occur if a theme or plugin loads the jQuery Google api (as seen in the video below.) The jQuery loaded by Google is not compatible with the jQuery.noConflict function that is loaded automatically in the WordPress jQuery library.
For a fix, please adjust the jQuery scripts that are loaded in the header.php file of the theme or plugin to use the wp_enqueue_script method.
Below is a video tutorial on troubleshooting a broken events calendar. You can use this same method to troubleshoot other plugins and themes.
To run this test you will need the Web Developer Tools add-on installed in your Firefox web browser, or alternatively use the Inspect Element in Chrome.
wp_footer() is needed
The WordPress theme needs to call the wp_footer function in order for the calendar (and many other plugins) to work correctly. Look in footer.php theme template file and add this right before the closing body tag like this:
wp_footer();
Customizations for the Event Espresso 4 Events Calendar add-on
Our support team cannot write custom coding for you. Below are some examples on customizing this add-on.
Need to load the calendar via a theme template file? You can use a do_shortcode function to display the calendar from a custom template. Here is an example:
You’ll need to set a variable and make a call to wp_enqueue_scripts() in your template. This will ensure that the calendar’s scripts and styles will load on that page. Example code to include at the top of the custom template, before the call to get_header() or wp_head(), follows:
if ( class_exists( 'EED_Espresso_Calendar' ) ) {
global $is_espresso_calendar;
$is_espresso_calendar = TRUE;
add_action( 'wp_enqueue_scripts', array( EED_Espresso_Calendar::instance(), 'calendar_scripts' ) );
if ( EED_Espresso_Calendar::instance()->config()->tooltip->show ) {
add_filter('FHEE_load_qtip', '__return_true' );
}
}
The button HTML is filtered within the calendar so you hook in and change the output if needed, for example, the calendar will remove the ‘Register now’ button for sold out events but it is possible to hook in and output a button for those events using this snippet:
Installation for the Event Espresso 3 Events Calendar add-on
This add-on requires Event Espresso 3.1.33 or newer. It cannot be used with old versions of Event Espresso 3.
This add-on is a plugin for WordPress and can be installed through your WP dashboard (WP-admin).
Download the latest version of the Events Calendar add-on for Event Espresso 3 from your Event Espresso account.
Then login to your WordPress dashboard (WP-admin) and go to Plugins. Next, click on Add New –> Upload and browse to the plugin on your computer. Then select the zip file and begin the upload process. Wait for the plugin to upload and then click on Activate.
Setup and Configuration for EE3 Events Calendar add-on
Login to your WP dashboard and go to Event Espresso –> Calendar settings. This will take you to the settings screen for the add-on. Below are explanations of the various settings.
Basic Settings
Time/Date Settings
Show Event Time in Calendar: Allows you to specify if the event time should be shown in the calendar?
First Day of the Week: Select the first day of the week. This day will appear in the first column of the calendar.
Show Weekends: Specify if weekends should appear in your calendar
Layout Settings
Week mode: Determines the number of weeks displayed in a month view. Also determines each week’s height.
“fixed” – The calendar will always be 6 weeks tall. The height will always be the same, as determined by the calendar height setting or the aspect ratio.
“liquid” – The calendar will have either 4, 5, or 6 weeks, depending on the month. The height of the weeks will stretch to fill the available height, as determined by the calendar height setting or the aspect ratio.
“variable” – The calendar will have either 4, 5, or 6 weeks, depending on the month. Each week will have the same constant height, meaning the calendar’s height will change month-to-month.
Height: Enter a specific height for the calendar in pixels. This is optional
Link to Post or Registration Page: Select where the registration button on the calendar should take an attendee/registrant.
Display Settings
Enable Images in the Calendar: This option can be used to show features images in the calendar. For best styling, use uniform images for featured images in your calendar.
Enable Filters in Calendar: Specify if filters should be made available. Filters will let a registrant/attendee view a specific group of events either by event category or event venue.
Show category legend: Specify if the event category should appear above the calendar. It allows an attendee/registrant to quickly browse to a category of events on the calendar.
Use Color Pickers: This lets you customize the default event background color and text color.
Event Background Color: This is a color picker option for the event background.
Event Text Color: This is a color picker option for the event text.
Show Tooltips: Tooltips are a short description of your event. They will appear when you hover over a calendar event. This option will let you enable or disable them.
Tooltip Position: Specify where the tooltip should appear (when you hover over an event on the calendar).
Display Attendee Limits: This option will show attendee limits in the calendar. This will increase the queries on the database and may use a lot of resources on your site.
Disable Categories: This option can help speed up your calendar but will break any event category option on the calendar such as the event category legend.
Reset Calendar Settings: This setting will reset the calendar back to its default settings. Any exist settings will be lost!
Usage for the Event Espresso 3 Events Calendar add-on
The calendar shortcodes allow you to display the calendar on a WordPress page or post. Unless otherwise specified, the calendar will show all events by month and exclude expired events.
Show a calendar with all of your events
[ESPRESSO_CALENDAR]
Show events on the calendar and include expired events
[ESPRESSO_CALENDAR show_expired=true]
Show events from a specific category on the calendar
[ESPRESSO_CALENDAR event_category_id=your_category_id]
Show events from a specific category on the calendar and include expired events
[ESPRESSO_CALENDAR event_category_id=your_category_id show_expired=true]
Show events on the calendar by month
[ESPRESSO_CALENDAR cal_view=month]
Show events on the calendar by a regular week
[ESPRESSO_CALENDAR cal_view=basicWeek]
Show events on the calendar by a regular day
[ESPRESSO_CALENDAR cal_view=basicDay]
Show events on the calendar by an agenda week
[ESPRESSO_CALENDAR cal_view=agendaWeek]
Show events on the calendar by an agenda day
[ESPRESSO_CALENDAR cal_view=agendaDay]
Shortcode Parameters
The following parameters are available for the Calendar add-on. You can see examples of these parameters in use in the section above.
show_expired=false (set to true to show expired events)
event_category_id=featured-12345 (show events from a certain event category (e.g. an event category with an event category ID of featured-12345))
cal_view=”month” (set a default view for the calendar: month, basicWeek, basicDay, agendaWeek, agendaDay)
Troubleshooting the Event Espresso 3 Events Calendar add-on
The plugin does not work as expected. Can you help?
Please double-check your calendar is up-to-date and that the calendar shortcode is published on a WordPress Page.
jQuery conflicts
The registration forms and events calendar depend upon jQuery. If another theme or plugin loads jQuery after WordPress loads its version of jQuery, the calendar or form validation may break and therefore allow blank registration forms to be submitted and/or the calendar to disappear. This usually happens because a theme or plugin may be loading the scripts directly in the header of your site. The proper way of loading scripts is by using the WordPress function wp_enqueue_script.
This can also occur if a theme or plugin loads the jQuery Google api (as seen in the video below.) The jQuery loaded by Google is not compatible with the jQuery.noConflict function that is loaded automatically in the WordPress jQuery library.
For a fix, please adjust the jQuery scripts that are loaded in the header.php file of the theme or plugin to use the wp_enqueue_script method.
Below is a video tutorial on troubleshooting a broken events calendar. You can use this same method to troubleshoot other plugins and themes.
To run this test you will need the Web Developer Tools add-on installed in your Firefox web browser, or alternatively use the Inspect Element in Chrome.
wp_footer() is needed
The WordPress theme needs to call the wp_footer function in order for the calendar (and many other plugins) to work correctly. Look in footer.php theme template file and add this right before the closing body tag like this:
wp_footer();
Auto <p>
If you view source and see much of the calendar content wrapped in <p> tags, try wrapping the calendar shortcode like so:
[raw][ESPRESSO_CALENDAR][/raw]
Customizations for the Event Espresso 3 Events Calendar add-on
Our support team cannot write custom coding for you. Below are some examples on customizing this add-on.
Need to load the calendar via a theme template file? You can use a do_shortcode function to display the calendar from a custom template. Here is an example:
You’ll need to set a variable in your template. This will ensure that the calendar’s scripts will load on that page. Example code to include in the custom template follows:
global $is_espresso_calendar;
$is_espresso_calendar = TRUE;
Protecting your site against spam registrations is an important part of running an event site. Some webservers have safeguards against spam registrations while others do not. This guide will cover what you can do — both within Event Espresso, as well as with the help of your web hosting provider — to make sure you are covered.
The best defense against spam (comment spam, spam form submissions, spam user registrations, and spam event registrations) is an Apache (and IIS, and nginx) module called mod_security. From the website:
ModSecurity™is an open source, free web application firewall (WAF) Apache module…WAFs are deployed to establish an external security layer that increases security, detects and prevents attacks before they reach web applications. It provides protection from a range of attacks against web applications and allows for HTTP traffic monitoring and real-time analysis with little or no changes to existing infrastructure.
ModSecurity is available and active on many webhosts without any configuration needed. On other hosts, you may need to enable it manually or contact your host to ask if they can enable it. DreamHost has set themselves apart from other webhosts by adding an easily-configurable toggle in your domain settings to enable Extra Web Security which turns on mod_security. If mod_security is not a toggle-able setting in your control panel, and it is not active on your site, contact your webhost and ask them to enable it.
reCAPTCHA
reCAPTCHA helps prevent automated abuse of your site (such as comment spam or bogus registrations) by using a CAPTCHA to ensure that only humans perform certain actions. You must sign up for a free reCAPTCHA account to use it with this plugin.
The reCAPTCHA settings in Event Espresso can be found in Registration Form –> Reg Form Settings. This page has the following options:
Use reCAPTCHA (Yes / No) – allows you to require people registering to correctly enter the letters in the reCAPTCHA message to complete the registration
Public Key – this unique key can be found by logging into your reCAPTCHA account and going to My Account –> My Sites and selecting your site
Private Key – this unique key can be found by logging into your reCAPTCHA account and going to My Account –> My Sites and selecting your site
Width – set the display size of the reCAPTCHA on the registration form
Theme – choose the color theme of the reCAPTCHA form (Red, White, Blackglass, Clean)
Language – select your websites’ primary language
The new NoCAPTCHA ReCAPTCHA on Event Espresso 4
If you do not have an account on reCAPTCHA, go to google.com/recaptcha and click on the “Use reCAPTCHA on Your Site” link. To use reCAPTCHA, you will need to be signed into a Google account. Clicking Sign Up Now on the next page will ask you to log in if you aren’t already. Once you are signed in, you can specify the domain you are going to use reCAPTCHA on. You can also create a global reCAPTCHA key pair if you plan on using it on many different sites. This is somewhat less secure, and really only advisable if you are having problems with your domain-specific key pair. Click Create Key and you’ve got your key pair. Enter these into your reCAPTCHA settings in Event Espresso’s Reg Form Settings page and turn on reCAPTCHA.
WP User Integration
Another way of blocking access that doesn’t require reCAPTCHA is to have a member-only site. Require your users to register for your site before registering for events and make your events member-only with the WP User Integration add-on. This requires bots to not only spam-register for your site, but also spam-register for your event with the same username and password it used to create the spam user account. There are many plugins that can then be used to verify your users are human that do not use reCAPTCHA. Again, the best solution is to enable mod_security for the most protection.
Event Espresso version 3 Documentation for Event Categories
Organizing your events into categories makes managing your events efficient and it makes it easier for potential attendees to find the event they want to attend. You can also do some neat things with the Event Categories that you wouldn’t expect.
You can manage your event categories by going to Event Espresso > Categories. From the Manage Event Categories page, you can:
Create/Edit categories
Specify a category identifier
Set a category description
Set custom colors to display for each category in the calendar
Manage Categories Page
Warning!
Please do not replace or remove the [ESPRESSO_EVENTS] shortcode. Without it the plugin will not function correctly.
Add/Edit an Event Category
You can create a new category by pressing the “Add New Category” button at the top of the page. You can edit a category by clicking on a category name in the category overview.
Category Name – This is the descriptive term that will display in the event editor.
Unique Category Identifier – This should be a unique identifier for the category. Example: “category1” (without quotes). The unique ID can also be used in individual pages using the following shortcodes to generate a list of events in this particular category. The plugin will create an identifier if you forget to but it’s best to set one that is easy to remember/type.
Do you want to display the category description on the event listings page? Yes/No – This feature allows you to display the event description when you use the category shortcode to list a particular category of events.
Use Color Pickers? Yes/No – This feature allows you to set unique colors for events in each category in the calendar. Set the calendar settings to enable CSS for categories to use this feature.
Event Background Color – Set the background color of the event entry in the calendar. Pick a color or enter a hex code.
Event Text Color – Set the text color of the event entry in the calendar. Pick a color or enter a hex code.
Category Description – The category description can be left empty or be as elaborate as you’d like.
Assigning Event Categories in the Event Editor
You can assign an event to one or more categories by checking the boxes next to each event category.
Using the Event Categories Shortcode
The unique category ID can also be used in the following shortcodes to generate a list of events in this particular category. You can place either of these shortcodes in the HTML view of the page.
The Recurring Events Manager add-on for Event Espresso allows event admins (event creators) to create a batch of similar events at the same time. This saves time by allowing you to quickly build out events instead of creating each one individually.
This add-on requires Event Espresso 3.1.33 or newer. It cannot be used with old versions of Event Espresso 3.
This add-on is a plugin for WordPress and can be installed through your WP dashboard (WP-admin).
Download the latest version of the Recurring Events Manager add-on for Event Espresso 3 from your Event Espresso account.
Then login to your WordPress dashboard (WP-admin) and go to Plugins. Next, click on Add New –> Upload and browse to the plugin on your computer. Then select the zip file and begin the upload process. Wait for the plugin to upload and then click on Activate.
Setup and Configuration
Login to your WP dashboard and go to Event Espresso –> Events Overview –> Add New.
You’ll now be viewing the event editor for Event Espresso. Begin setting up your event by adding an event name, description and setting up event times. Below the event times section, you’ll see a new section for the Recurring Event Manager.
By default, the recurring event option is set to no. In the next section, you’ll learn how to create a recurring event.
Usage
The Recurring Events Manager add-on is helpful for build out a set of events that are similar. The add-on works by using a new event as a template and creates additional events based on the schedule that you select (e.g. create events that span across a few weeks, a few months, a year, etc).
Create as many events in the future as you like. Event Espresso will automatically open and close registrations for all of your recurring events.
Event Espresso Recurring Events Manager Overview
After installing the Recurring Events Manager (REM for short), you wont see a menu item, instead the feature will appear in the event details page (when you are adding a new event).
Important Note:
An existing single event cannot be converted into recurring series.
To setup a recurring event, select Yes to the question: Is this a recurring event?
Answer this question as yes to use REM
The following options will become available.
Automatic Calculation of Event Dates
Create dates automatically or select manually?: Selecting automatic here is generally the way to go unless you have an erratic schedule of classes/events. The automatic system asks some questions which don’t appear to be straight forward initially, but are quite simple to master. Selecting manual here, means more work for you but allows a greater degree of flexibility, especially when dealing with erratic schedules.
Registration Starts On: This is for the first registration date of the first event/class in the series or the first date of the registration period.
Registration Ends On: This is for the last registration date of the first event/class in the series or the last date of the registration period.
Note:
Just to be clear here, those two dates will either be for the first event in a series of events that each have their own registration period OR those dates will cover a broad period of time in which a customer can register for any event.
Are all events available between the registration dates above?:
No: Use this if each event in the series will have its own registration start and end dates. Make sure to enter the First Event’s Registration Start and End dates above. This would be used if you want the registration for an event to be, for example, two weeks before the event starts. Every time the event happens, the registration for that event will open two weeks before the event and close on or before that particular event (depending on when you choose the end date). The automatic calculation is based upon how you setup the first event; the following recurring events will function just like the first event. For example, if you open registration 2 months before the event starts, and close it 3 days before the event, the registration window for the recurring events will be the same (not the same dates, the same length of time).
Yes: Use this if all events are only available between the above registration start and end dates. This is useful if you only want people to register for an event during one time period. For example, if you have five events, but you want everyone to register up to 1 week before the first event, you can open and close registration for all those events at once.
Automatic Events
If you have selected the Automatic option above, here’s what you will see. If you have selected Manual, see below.
Automatic Setting Options
First Event Date: The date that your first event begins (not the registration period, but the actual event).
First Event End Date: The date your first event ends.
Last Event Date: The date your last event begins
Event Repeats: Choose between daily, weekly or monthly repetition.
Every: Choose a number to represent how often you want it to repeat. If you have chosen weeks or months in the above option, you will also see further options (days of week and day of month/day of week, respectively).
Once your options have been chosen, the system generates the list in the box below the options to show you how your recurring events will look. Changing your options will refresh this list.
Example
An example would be my events run every saturday, with individual registration periods. Using the option in the example image I have set up recurring events for the next 6 weeks.
Manual Settings
Choosing the manual option will show 2 field boxes where you can type in your first events start and end dates. Using the icon, you can add as many events as you want. The icon removes events.
Remember to start with your first event and create them in date order.
Example of manually creating recurring events
Troubleshooting
The plugin will not activate. Can you help?
Are you running a current version of Event Espresso 3?
Can an existing event be switched to a recurring event?
No, recurring events can only be created while you are creating a new event using the event editor for Event Espresso.
I created a set of recurring events but I need to change one.
Making a change to one recurring event in a series will not automatically change all other events.
Customizations
Our support team cannot write custom coding for you. Below are some examples on customizing this add-on.
There are a set of templates available that can be customized. They are located in /wp-content/espresso-recurring-events/recurring-event-templates. Inside are two event list templates. These files can be added to your wp-content/uploads/espresso/templates/ directory. Be sure to backup your WordPress before making changes.
The Custom Files add-on provides PHP files that allow you to override certain aspects of the Event Espresso. For example, you can override some of the core functions. There are also sample templates that can be used along with example shortcodes to provide table layouts. You can also add your own functions that you would like included when the plugin runs.
This add-on requires Event Espresso 3.1.33 or newer. It cannot be used with old versions of Event Espresso 3.
This add-on is not a plugin for WordPress and cannot be installed through your WP dashboard (WP-admin).
Step 1: Download the latest version of the Custom Files add-on from your Event Espresso account. Then unzip the folder and make a note of its location on your computer.
Step 2: Login to your WordPress site with your preferred SFTP or FTP client. FileZilla and Cyberduck are free options.
Step 3: Browse to this location using your SFTP or FTP client:
/wp-content/uploads/espresso/
Step 4: Locate the following files on your computer in the folder that you unzipped in step 1:
custom_includes.php
custom_functions.php
custom_shortcodes.php
Step 5: Upload the files above to the following location:
/wp-content/uploads/espresso/
Step 6: Browse to this location using your SFTP or FTP client:
/wp-content/uploads/espresso/templates
Step 7: Upload any templates from the add-on folder to this location:
/wp-content/uploads/espresso/templates
Note: the custom_*.php files are uploaded to /wp-content/uploads/espresso
Template files which are different are uploaded to /wp-content/uploads/espresso/templates
Usage
This add-on is helpful for organizing customizations to Event Espresso 3. You should never modify the core plugin in /wp-content/plugins/event-espresso as your edits will be lost on a software update.
The Custom Files add-on is an ideal spot to add these changes.
custom_includes.php – Should be used to include your custom templates or any other files you need loaded into the plugin
custom_functions.php – Place all of your custom functions in this file
custom_shortcodes.php – Place all of your custom shortcodes in this file
Troubleshooting
The plugin will not install. Can you help?
This plugin is not a WordPress plugin so it cannot be installed through the WP dashboard. Please take a look at the installation section in this article for how to install this add-on.
Customizations
Our support team cannot write custom coding for you. Below are some examples on customizing this add-on.
Have you found a custom code snippet in our support forums? The custom_functions.php file is a good spot to add that code snippet!
icon, you can add as many events as you want. The 
