With plugins like The Events Calendar and Events Calendar Pro, organizing and showcasing events has never been easier. One powerful feature of Events Calendar Pro is the ability to add custom fields to events, called Additional Fields, allowing you to store and display additional information. In this guide, we’ll explore how to output data from an additional field stored in an event using a shortcode or block from The Events Calendar Shortcode & Block plugin.
Getting Started
To begin, make sure you have Events Calendar Pro and The Events Calendar Shortcode & Block plugin installed and activated on your WordPress site. If you haven’t already, create an event and add an additional field, let’s call it “My Additional Field.”
Creating a Custom Template
You can create a custom template for any of the designs. For example, for the Default design, you can copy the-events-calendar-shortcode-pro/templates/v2/default.php to wp-content/themes/your-theme/tecshortcode/default.php so we can edit this file with the data from our Additional Field.
Copy the template file default.php from the-events-calendar-shortcode-pro/templates/v2/ to your theme directory. Place it in the following path: wp-content/themes/your-theme/tecshortcode/default.php
Outputting the Additional Field Data
Open default.php in your preferred code editor and locate the section where you want to display the additional field data.
Add the following code snippet to display the “My Additional Field” data:
<?php
$fields = tribe_get_custom_fields( get_the_ID() );
if ( ! empty( $fields['My Additional Field'] ) ) {
echo '<div class="my-additional-field">' .
esc_html($fields['My Additional Field']) .
'</div>';
}
?>
Adjust the HTML structure and styling as needed to fit your design. In this example, I’ve wrapped the field in a <div> with a class for styling purposes.
Verify the Output
Go to a page where the Events Calendar Shortcode & Block is used with the “Default” design, such as a page with the following shortcode:
[ecs-list-events]
Alternatively you can add a new “Event Calendar Block” and choose the Default design:
You should see the Additional Field data displayed for each event.
Conclusion
By following these steps, you can easily output data from additional fields stored in Events Calendar Pro events using The Events Calendar Shortcode & Block. This customization enhances the flexibility of your event pages, allowing you to showcase specific details important for your audience. Experiment with the provided code, and tailor it to your specific needs to make your WordPress events truly stand out to your visitors.
