Extending The Events Calendar with Advanced Custom Fields (ACF) empowers you to tailor event pages with custom data, enhancing both functionality and user experience. Whether you’re aiming to add speaker bios, event sponsors, or unique scheduling details, integrating ACF allows for a high degree of customization.

Step 1: Create Custom Fields with ACF

1. Install and Activate ACF:

  • Navigate to your WordPress dashboard.
  • Go to Plugins → Add New, search for Advanced Custom Fields, and install it.
  • Activate the plugin.

2. Create a New Field Group:

  • Go to Custom Fields → Add New.
  • Name your field group (e.g., “Event Details”).
  • Click Add Field to define each custom field. In this example, we are going to add a custom Text field called ‘Speaker Name‘

3. Set Location Rules:

  • In the “Location Rules” box, set the rule to Post Type is equal to Event.
  • This ensures the custom fields appear on the event edit screen.

4. Publish the Field Group:

  • Click Publish to save your field group.

Step 2: Adding the Custom Field to Event Pages

Now it’s time to add a Speaker for events.

  • Open the single event page.
  • Scroll down to find the ‘Event Details’ section.
  • Add ‘Speaker Name’ into the text field.

Step 3: Display Custom Fields on Event Pages

In this example, we want to add the ACF custom field below the Website URL, so we should customize the details.php file.

To display an Advanced Custom Fields (ACF) field within the details.php template of The Events Calendar, it’s recommended to use a template override in your theme rather than modifying the plugin’s core files. This approach ensures that your customizations are preserved during plugin updates.

1. Edit the Event Template:

  • Start by copying the file details.php from /wp-content/plugins/the-events-calendar/src/views/modules/meta
  • Put the file inside the following path: [your-theme]/tribe-events/modules/meta

2. Insert ACF Template Tags:

  • Within the template file, use ACF functions to display your custom field:
<?php if( get_field('speaker_name') ): ?> 
    <p><strong>Speaker:</strong> <?php the_field('speaker_name'); ?></p> 
<?php endif; ?>
  • To add the custom field below the Website URL, you should add the code just before:
<?php do_action( 'tribe_events_single_meta_details_section_end' ); ?>

3. Save and Test:

  • After editing, save the template file.
  • Visit an event page to ensure the custom fields display correctly. You should see a result similar to this screenshot:
TAGS:
Notify us of out of date information