Recipes

Home > Recipes

Using Google Maps API Key Restrictions

Description You can use your own Google Maps API Key with The Events Calendar to get more out of your venues and maps. A Google Maps API key, when used a lot and uncontrolled, can incur costs. In order to have some control over it you can put some restrictions on the key. However that doesn't always play out well. The Events Calendar requires two APIs to be enabled: the Maps JavaScript API and the Geocoding API. (You can find detailed information about setting up your Google Maps API Key in...

What Is a Recipe?

Welcome to our book of recipes! (https://support.theeventscalendar.com/588715-Recipes) Recipes are a type of article within our knowledgebase that we hope you will find useful but which (unlike our other articles) should not be regarded as formal documentation. They typically contain examples of customizations, solutions to unusual or niche problems and other things that fall outside of the normal scope of support. Recipes will not always be a perfect match for your needs, but our hope is they...

CSS classes for the month view grid

Description The month view is an essential part of The Events Calendar and one of the most commonly used views. Here is a list of CSS class selectors that you can use to format the different days in the grid. Snippet // CSS class for past events (whether this month or past) .events-gridview .tribe-events-past {} // CSS class for this month's events (whether past, present or future) .events-gridview .tribe-events-thismonth {} // CSS class for today / the actual day .events-gridview .tribe...

Schema for The Events Calendar and Yoast SEO

You have events on your website. You'd like Google to show those events in search results. To do that, search engines need data that's formatted in a specific way so it knows how to properly crawl the content and include it in search results. The two most widely recognized data formats include Schema (https://schema.org/Event) and JSON-LD (https://jsonld.com/event/) and The Events Calendar uses them both so that both your calendar and events are search engine optimized right out of the box. How...

Remove Links from Events

Description This snippet will allow users to remove the links from their events so that users cannot click on them. This way, users cannot visit single events pages. Usage For CSS: Copy the below code into your (child) theme's style.css file, or add it to Appearance > Customize > Additional CSS box (or wherever you usually put custom styling). Plugins - The Events Calendar Snippet h2.tribe-events-title { pointer-events: none !important; } Notes - Originall...

Allow tickets to show on WooCommerce shop pages

Description By default, the WooCommerce products that correspond to tickets created with Event Tickets Plus are hidden from displaying in the shop pages. WooCommerce products can be configured to show in the shop pages by editing the product in WooCommerce > Products and changing the "catalog visibility" settings in the product's "publish" panel. This snippet will change the default visibility of ticket products to be "visible" instead of "hidden" when creating or saving a ticket within an ...

Using Shortcodes with Beaver Builder

If you using Beaver Builder with Events Calendar Pro and want to integrate shortcodes (https://support.theeventscalendar.com/163659-Shortcodes), you may need a snippet to render the page as expected. Page builders often optimize the loading experience by prerendering code, and then render it again to display the code. However, [tribe_events] (https://support.theeventscalendar.com/074168-Embedding-Calendar-Views-with-the-tribe_events-Shortcode) can only load once per page. A way to work around t...

Filter Bar: Modify Quantity of Venues Displayed

By default, Filter Bar will display 200 venues. You can override this setting. Add the snippet below to either your child theme’s functions.php file or use the My Custom Functions (https://wordpress.org/plugins/my-custom-functions/) plugin and adjust the limit to the number of venues that fit your needs. Please check out our guides: - Best Practices for Implementing Custom Code Snippets (https://support.theeventscalendar.com/739977-Best-Practices-for-Implementing-Custom-Code-Snippets) - ...

Custom Additional Template Locations

Our Themer's Guide (https://support.theeventscalendar.com/153124-Themers-Guide) details how you can override one or more of the many template files that make up our various views. But you aren't limited to just those views. After you've created your own template file, place it within a custom plugin folder or your top-level theme directory (to apply even if you switch themes). With the snippet below, you can point the file loader to look in additional locations: <?php /** * The Events Cale...

Changing the "Buy Now" Button Text

When you have Event Tickets or Event Tickets Plus active, events with tickets will have a "Buy Now" button that appears by default in certain places, like list view. Many users would like to change that button text to something else, like "Register Now". So, we crafted a snippet that you can use to change the button text to whatever works best for your site: <?php /** * Change "Buy Now!" button text */ function tribe_buy_now_button_text( $html ) { $html = str_replace( 'Buy Now!' , 'Regis...

Changing the 'Free' event price to '0' (zero)

Description When you enter a price or a price range for an event and it is or starts with zero (0), then on the front-end it will show up as 'Free' If you would rather like to see the number zero instead of 'Free', there are two easy ways to do that. Option 1 - with a snippet Copy the below code into your (child) theme's functions.php file (or wherever you usually put custom code). function tribe_tec_change_free_to_zero ( $translation, $text, $domain ) { $custom_text = array( 'Free' ...

Using Venues for Related Events

The Related Events feature of Events Calendar Pro (https://theeventscalendar.com/product/wordpress-events-calendar-pro/) allows you to display additional upcoming events on your single events pages, based on the event category (https://support.theeventscalendar.com/787141-Event-Categories). If you're not using event categories or simply find it more useful to show your users other events happening at the same venue, this snippet is here to help! function tribe_modify_related_posts_args ( $args ...

Sorting Events Alphabetically

By default, events will be sorted by their start date. We have occasionally been asked about changing the sort order to be alphabetical by the event title. Good news! This is possible with the following snippet, which you can add to the functions.php file of your child theme: function tribe_change_event_order( $query ) { if ( tribe_is_month() ) { $query->set( 'orderby', 'title' ); $query->set( 'order', 'ASC' ); } return $query; } add_filter( 'pre_get_posts', 'tribe_change_event_order', 99...

Removing "Free" from Event Cost Range

If your event has RSVPs or free tickets in addition to paid tickets (say the most expensive ticket is $10), then the cost range for that event will show as "Free - $10" by default. In some cases, showing the event as potentially being free might not be ideal. 🔔 Beware: if you have 3 costs, say, [ 'free', $1, $2 ] it will only show $2 - it skips over the whole minimum costs. It would only display $2. You can remove "Free" from the cost by adding the following snippet to the functions.php file o...

Hide Ticket Remaining or Available Quantity with CSS

Description Use the CSS snippet given below to hide the available ticket quantity shown in the ticket or RSVP. Usage Copy the below code into your (child) theme's style.css file, or add it to Appearance > Customize > Additional CSS box (or wherever you usually put custom styling). Plugins Event Tickets and Event Ticket Plus Snippet /*list view*/ span.tribe-tickets-left{ display: none !important; } /*single view*/ span.tribe-tickets-remaining{ display:none !important; } di...

Show Only Today's Events on the Mini Calendar Widget on First Load

Description If you use a Mini Calendar Widget on your site then on the first page load it will show you the number of events from the month that you set up in the back-end. If you set up 5 events and there are less than that on the current day, it will show you events from the coming days as well. If you click on a specific date in the calendar, then you will only see the events for that day. If you would like to show only today's events on the first page load as well, then the below snipp...

Hide a Day in Month View

Description On some occasions you might want to hide some days (the whole column) in Month view. Here is how you can do that. The below CSS snippet will hide the last two days of the week. So if you have Monday set as the first day of the week under Setting > General on your WordPress dashboard, then it will hide Saturday and Sunday. Usage Copy the below code into your (child) theme's style.css file, or add it to Appearance > Customize > Additional CSS box (or wherever you usu...

Force ZIP Code to Stay in One Line

Description The different countries have different requirements when it comes to ZIP code or address formatting. One such rule is that the ZIP code has to be on one line. However, if the ZIP code has a space, it will break into two lines when there is not enough space. This can be overcome with a simple CSS trick. Usage Copy the below code into your (child) theme's style.css file, or add it to Appearance > Customize > Additional CSS box (or wherever you usually put custom styling)...

Formatting Specific Views Only / Body Classes for Views

Description If you would like to change the looks of a specific view of the calendar there are body classes which you can use. Here is the list: List view and Map view .events-list Map view only .tribe-events-map Month view .events-gridview Day view .tribe-events-day Photo view .events-photo Week view .tribe-events-week Plugins The Events Calendar Notes - Originally written in March 2019 - Tested with The Events Calendar 4.8.2 - Author: András Guseo Di...

Hiding the Tooltip Popup on Month View

Description On month view, when you hover over an event a little box will pop up with more event details. In case you would like to get rid of this here is what you need to do. Usage Copy the below code into your (child) theme's style.css file, or add it to Appearance > Customize > Additional CSS box (or wherever you usually put custom styling). Plugins - The Events Calendar Snippet .events-gridview .tribe-events-tooltip { display: none !important; } Notes ...

Decreasing the waiting time between an order placed and the attendee data created.

Description You might have noticed that some time (around 5 minutes) has to pass after an order has been placed before you can see the attendee and order data, and before the ticket is sent out via email to the user. More specifically it will take about 5 minutes for: - the attendee to show up on the Attendees page of the event - the order show up on the Orders page of the event - the buyer to receive the tickets This is a safeguarding measure we put in place because we have rece...

Show the publicaton date as the pubDate in the events RSS feed

Description The Events Calendar provides and RSS feed for the events. By default the pubDate value is changed to the event start date, so the events show up at the time when they happen and not when they were created. However, this can be changed back to the original publication date (the date when the event was published on the website) with the following snippet. Usage Copy the below code into your (child) theme's functions.php file (or wherever you usually put custom code). Plugins...

Changing the number of events in iCal export

Description The Events Calendar PRO includes a nifty option for you and your visitors to export the events on your calendar in a flash. Visit your calendar and you'll notice a button at the bottom. (Refer to the Exporting Events (https://support.theeventscalendar.com/940160-Exporting-events) article for details on the basic functionality.) By default clicking that button will give you the next 30 events. It is possible to change that however. Usage Copy the below code into your (child) ...

Genesis Framework and Attendee Registration

Description As of ET/ET+ 4.9 The attendee details are now collected on a new, separate screen instead of the event page where the attendee form used to be. The default slug for this page is 'attendee-registration'. When using a theme based on the Genesis Framework and having a specific setting, the Attendee Registration page will not show up properly. It will show a kind of an excerpt of that page. The setting in question can be found under Genesis > Theme Settings > Content Archive. ...

Hide the 'Log in before purchasing' link

Description When using Tribe Commerce to sell tickets, there is a 'Log in before purchasing' link at the bottom of the ticket form. This is a link that will allow the users to create an account, but it doesn't enforce them to do so. The link is not affected by the setting under Events > Settings > Tickets tab > Login requirements section > Require users to log in before they purchase tickets. The below method will allow you to hide or remove this link when it is not needed, but...

Add a list of category links below the search bar

By default, event views do not include a clickable list of categories. It's possible to add this sort of functionality by installing Filter Bar (https://theeventscalendar.com/product/wordpress-events-filterbar/) or, depending on your needs, the third party plugin The Events Calendar Category Colors (https://wordpress.org/plugins/the-events-calendar-category-colors/). Both are great but, sometimes, they may offer more than you need or you may prefer to start with a simpler custom solution that y...

Show the 'Sold Out!' message for events that are in the past

Description By default the 'Sold out!' message is not shown for past events. This snippet brings it back. Screenshot Usage Copy the below code into your (child) theme's functions.php file (or wherever you usually put custom php code). Plugins Event Tickets Snippet add_action( 'tribe_events_inside_cost', 'soldout_in_past' ); function soldout_in_past() { if ( tribe_is_past_event() && tribe_events_has_soldout() ) { echo '<span class="tribe-out-of-stock">Sold out</sp...

Customize the ‘From’ name and from email address of the RSVP email sent to the user

Description When an email is sent from a WordPress site, then usually the sender shows up like this: From: WordPress <wordpress@yourdomain.com> This will also be the case if the website visitors RSVP to an event. They will get a confirmation from the above email address, which might be confusing. The below snippet will help you change that easily. Usage Copy the below code into your (child) theme's functions.php file (or wherever you usually put custom code. Plugins Event Tic...

Show the time of registration / purchase of an RSVP / ticket on the attendee list of an event

Description The following code will show the time of registration / purchase of an RSVP / ticket on the attendee list of an event. Usage Copy the below code into your (child) theme's functions.php file (or wherever you usually put custom code. Plugins Event Tickets, (Event Tickets Plus) Snippet add_action( 'event_tickets_attendees_table_ticket_column', 'add_registration_time_to_attendee_details' ); function add_registration_time_to_attendee_details( $item ) { if ( ! isset( $ite...

Select different templates for different event categories

By default, all event views are rendered using the same template (defined in the Events ‣ Settings ‣ Display screen). With some creativity, though, it's possible to tell WordPress to use a completely different template. In this recipe we are going to pick a different template based on the requested event category. For example, if we have a category called WP Meetups (the slug for which is 'wp-meetups') and someone visits example.com/events/category/wp-meetups (http://example.com/events/category...