Want to create a page where, given an organizer, all events for that organizer will be listed instead of just future ones? In this tutorial, we’ll walk through the steps to create a custom page template that dynamically accepts an organizer slug from the URL and then passes the corresponding organizer ID to the [ecs-list-events] shortcode from The Events Calendar Shortcode & Block.

Step 1: Creating the Custom Page Template

First, we need to create a new custom page template within your theme or child theme. Navigate to the wp-content/themes/your-child-theme/ directory and create a file called page-organizer-events.php.

Inside this file, we’ll set up a basic page template structure:

<?php
/*
Template Name: Organizer Events
*/

get_header();

// Start the WordPress loop.
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>

        <div class="entry-content">
            <?php the_content(); ?>
        </div>

    <?php endwhile;
endif;

get_footer();

Step 2: Accepting the Organizer Slug

Next, we need to capture the organizer slug from the URL. We’ll assume the slug is passed as a query variable, such as ?organizer_slug=some-slug. We can retrieve this value using the get_query_var() function and pass it to the organizer_id option of The Events Calendar Shortcode & Block.

Update the template file like this:

<?php
/*
Template Name: Organizer Events
*/

get_header();

$organizer_slug = get_query_var( 'organizer_slug' );

if ( $organizer_slug ) {

    // Fetch the organizer post based on the slug.
    $organizer = get_page_by_path( $organizer_slug, OBJECT, 'tribe_organizer' );

    if ( $organizer ) {
        // Get the organizer ID.
        $organizer_id = $organizer->ID;

        // Output the events using The Events Calendar Shortcode & Block.
        // Use fromdate/todate to display all events, with pagination.
        echo do_shortcode( '[ecs-list-events organizer_id="' . esc_attr( $organizer_id ) . '" fromdate="2000-01-01" todate="2100-01-01" pagination="true" limit="20"]' );
    } else {
        echo '<p>No events found for this organizer.</p>';
    }
} else {
    echo '<p>Please provide an organizer slug.</p>';
}

get_footer();

Step 3: Registering the Organizer Slug Query Variable

For this template to work properly, we need to tell WordPress that we want to capture the organizer_slug as a query variable. Add the following code to your theme’s functions.php file:

function add_organizer_slug_query_var( $vars ) {
    $vars[] = 'organizer_slug';
    return $vars;
}
add_filter( 'query_vars', 'add_organizer_slug_query_var' );

This function registers organizer_slug as a query variable that WordPress will recognize.

Step 4: Creating the Page in WordPress

Once you’ve created the template, head over to the WordPress admin dashboard and create a new page. In the Page Attributes section on the right, select the “Organizer Events” template.

You can now visit this page with an organizer slug like so:

https://yoursite.com/your-page/?organizer_slug=some-slug

This will display a list of events for the organizer with the slug some-slug.

Step 5: Customizing the Page Layout

You may want to customize how the events are displayed, or add additional content and styles. The beauty of using WordPress page templates is that you have full control over the layout and design.

For example, you can add HTML around the shortcode like this:

<div class="organizer-events">
    <h2>Events for Organizer: <?php echo esc_html( get_the_title( $organizer_id ) ); ?></h2>
    <?php echo do_shortcode('[ecs-list-events organizer_id="' . esc_attr( $organizer_id ) . '"]'); ?>
</div>

Conclusion

This custom page template is a simple yet powerful way to dynamically display events for a specific organizer. By using WordPress’s built-in template functionality and using the shortcodes from The Events Calendar Shortcode & Block, you can easily customize your site to showcase organizer-specific event listings.

Updates

Published by Brian Hogg