WordPress Event Components

1. Overview

The WordPress event components provide a lightweight solution for displaying event information on WordPress sites. The architecture follows a two-plugin approach to separate concerns:

Plugin Purpose Components

event-payment-plugin-woocommerce

Payment integration

WooCommerce hooks, order management, API callbacks

event-info-plugin

Event display

Custom post type, shortcodes, templates

This separation allows sites to use event display without payment integration, and vice versa.

2. Component Architecture

wordpress-components-architecture

3. Custom Post Type: epa_event

The epa_event custom post type replaces the dependency on The Events Calendar plugin, providing a lightweight alternative.

3.1. Metadata Fields

Field Type Description

_event_id

int

Admin-service event ID

_event_start_date

datetime

Event start date/time

_event_end_date

datetime

Event end date/time

_venue_name

string

Venue name

_venue_city

string

City/town

_registration_end

datetime

Registration deadline

3.2. Taxonomies

  • event_category - Event type classification (Road Race, MTB, Trail Run, Gravel)

  • event_venue - Venue taxonomy for filtering and grouping

4. Shortcode Catalogue

4.1. Event Information Shortcodes

Shortcode Purpose Data Source

[Courses]

Display race courses with RideWithGPS embed

/api/courses

[EventCategories]

Age categories with birth year calculations

/api/event-categories

[Program]

Event schedule/timetable

/api/program-entries

[Races]

Race listing with start times

/api/races

[Registration]

Registration portal button

Post metadata

4.2. Featured Events Shortcode

Attribute Description

count

Number of events to display (default: 4)

layout

Display mode: grid or slider

category

Filter by event category slug

columns

Grid columns: 2, 3, or 4

Example usage:

[featured-events count="4" layout="slider" category="road-race"]

5. Rendering Pattern

All shortcodes follow a consistent rendering pattern:

shortcode-rendering

This pattern provides:

  • Fast initial page load (no blocking API calls)

  • Loading states for better UX

  • Error handling with graceful fallbacks

  • Client-side caching opportunities

6. Theme Independence

The components are designed to work across any WordPress theme:

  • CSS isolation - Scoped styles avoid conflicts

  • Responsive design - Mobile-first breakpoints

  • No page builder dependency - Pure shortcode implementation

  • Template overrides - Themes can override templates in their directory

6.1. Template Hierarchy

theme/
└── event-info/
    ├── single-epa_event.php    # Override single event template
    └── archive-epa_event.php   # Override archive template

If theme templates don’t exist, plugin templates are used as fallback.

7. Slider Library

The featured events slider uses Splide.js:

  • MIT License - Open source, no commercial restrictions

  • Lightweight - 29KB minified, no dependencies

  • Accessible - ARIA compliant

  • Touch support - Mobile-friendly gestures

  • CSS-friendly - Works with relative units (%, em, rem)

8. Related Documentation