This guide is for classic themes (Blocksy, Neve, Astra, GeneratePress and similar) that do not use the WordPress Site Editor. If you are on a block theme and can open Appearance → Editor, use How to customise the events template instead.
Works for both EventKoi and EventKoi Lite. This involves editing theme files, so a child theme is recommended.
On a classic theme, EventKoi renders each event inside your theme’s normal header and footer. You have full control of everything in between, either by lightly adjusting our default layout or by building your own from scratch. There are three levels, from easiest to most flexible.
Where the event template lives
EventKoi looks for a template file in your theme first, and falls back to the plugin’s own copy. The lookup order is:
- Your child theme:
your-child-theme/eventkoi/templates/single-event-legacy.php - Your parent theme:
your-theme/eventkoi/templates/single-event-legacy.php - The plugin default:
wp-content/plugins/eventkoi/templates/single-event-legacy.php
To customise it, copy the plugin’s single-event-legacy.php into your theme at the same path (inside an eventkoi/templates/ folder) and edit your copy. Using a child theme keeps your changes safe when the theme updates.
Option 1: Keep our layout and add around it
The simplest approach. In your template file, output our default event content with eventkoi_get_content() and wrap your own markup around it:
<?php get_header(); ?>
<div class="my-event-wrap">
<?php echo eventkoi_get_content(); ?>
</div>
<?php get_footer(); ?>Option 2: Build your own layout with shortcodes
For full control, skip eventkoi_get_content() and pull each piece of event data individually with the [eventkoi] shortcode. Every field is available on its own:
[eventkoi data="datetime"]— event date and time[eventkoi data="location"]— full location / address[eventkoi data="location_line"]— location on a single line[eventkoi data="details"]— the event description[eventkoi data="image"]— the event image (rendered image tag)[eventkoi data="image_url"]— just the image URL, for your own image tag or a background[eventkoi data="calendar"]— the calendar name[eventkoi data="url"]— the event permalink[eventkoi data="ical"]— an add-to-calendar link[eventkoi data="event_field_YOUR_KEY"]— any custom field you created (EventKoi Pro)
You can combine keys, for example [eventkoi data="datetime,location"], add with_name="1" to include a field’s label, or as_link="1" to keep URL fields clickable. Standard WordPress tags like the_title() and the_post_thumbnail() work too.
These are the PHP equivalents of the meta keys used in the block editor. See the complete list of meta keys for every available field.
A complete custom template example
Here is a full single-event template built entirely from shortcodes. Save it as your-theme/eventkoi/templates/single-event-legacy.php and adjust the markup and styles to taste:
<?php
if ( ! defined( 'ABSPATH' ) ) { exit; }
get_header();
while ( have_posts() ) :
the_post();
$ek = get_the_ID();
$data = function ( $key ) use ( $ek ) {
return do_shortcode( '[eventkoi id="' . $ek . '" data="' . $key . '"]' );
};
?>
<article style="max-width:1000px;margin:0 auto;padding:0 20px 64px;">
<?php if ( has_post_thumbnail() ) : ?>
<div style="border-radius:18px;overflow:hidden;margin-top:40px;">
<?php the_post_thumbnail( 'large', array( 'style' => 'width:100%;height:420px;object-fit:cover;' ) ); ?>
</div>
<?php endif; ?>
<h1 style="font-size:42px;margin:28px 0 20px;"><?php the_title(); ?></h1>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:40px;">
<div style="border:1px solid #eee;border-radius:14px;padding:16px 18px;">
<div style="font-size:12px;text-transform:uppercase;color:#888;">Date & time</div>
<div><?php echo $data( 'datetime' ); ?></div>
</div>
<div style="border:1px solid #eee;border-radius:14px;padding:16px 18px;">
<div style="font-size:12px;text-transform:uppercase;color:#888;">Location</div>
<div><?php echo $data( 'location' ); ?></div>
</div>
</div>
<div style="font-size:18px;line-height:1.7;">
<?php echo $data( 'details' ); ?>
</div>
<p><a href="<?php echo esc_url( wp_strip_all_tags( $data( 'ical' ) ) ); ?>"
style="display:inline-block;background:#17150f;color:#fff;padding:12px 26px;border-radius:999px;text-decoration:none;margin-top:24px;">
Add to my calendar
</a></p>
</article>
<?php
endwhile;
get_footer();The template above, rendered on a classic theme. Every part of the page (the hero image, title, the date, location and calendar cards, and the add-to-calendar button) is pulled from the event with shortcodes:
Option 3: Inject content without replacing the template
If you only need to add something (a banner, a related-events block, a sponsor logo) without rebuilding the page, use these action hooks from your child theme’s functions.php or the Code Snippets plugin. No template file needed:
eventkoi_before_event_content— runs before the event contenteventkoi_single_event_template— runs inside the loop and receives the event posteventkoi_after_event_content— runs after the event content
add_action( 'eventkoi_before_event_content', function () {
echo '<div class="my-banner">Booking closes 24 hours before each event.</div>';
} );To tweak the default block markup itself (for example, to remove a line), filter it with eventkoi_get_default_event_template. See this example for the pattern.
Good to know: the two-column layout
Our default template uses a two-column layout that automatically stacks into a single column when its container is narrower than about 960px, so it stays readable inside boxed or narrow content areas. Many classic themes use a content width below this, so you will often see the default template stacked. Your own custom markup (Option 2) is not affected by this and renders exactly as you build it.
Not a developer?
If you are comfortable describing what you want but not writing the code, you can share this doc with an AI assistant along with your goal, and it can generate the template or snippet for you. For small changes you can also get in touch and we will help. For extensive custom designs, we recommend hiring a developer.