Built as a custom Gutenberg experience
The hub was built around custom Gutenberg components created specifically for the content and data requirements of the tournament experience.
This allowed editorial sections, tournament information, odds, statistics and other interactive elements to be assembled within WordPress while maintaining a consistent visual and responsive system on the front end. The components were designed around real product requirements rather than generic layout elements.
Editorial content meets dynamic sports data
Some components behave like traditional editorial Gutenberg blocks, while others connect the publishing experience to external sports data.
API-powered components retrieve and present sports statistics and betting odds from external providers, allowing dynamic data to appear naturally alongside manually managed editorial content. This creates a hybrid publishing model: editorial content, structured WordPress data, external sports APIs and reusable Gutenberg components in one consistent user experience.
API-powered Gutenberg components
Several components act as a bridge between WordPress and external sports-data services. The editor remains responsible for page structure and editorial context, while the application layer handles external data retrieval and presentation.
Odds component
Connects the WordPress experience with external odds data and presents the result within the same design system as the surrounding editorial content.
Statistics component
Transforms externally supplied sports statistics into a structured, readable interface designed specifically for the tournament experience.
From external data to a usable interface
Connecting an API is only one part of the implementation. External sports data has to be interpreted, mapped into the application’s internal requirements and transformed into interfaces that remain understandable alongside editorial content.
The front end therefore acts as the final layer between external data sources and the user — handling presentation, hierarchy, responsive behaviour and the overall product experience.
Designed around the tournament
This was not another generic article template. The experience was created around a major tournament, bringing tournament overview content, betting guides, odds, statistics, player information and tournament-focused data into one destination.
The WordPress implementation adapts to those product and content requirements instead of forcing the experience into a generic publishing template.
Reusable rather than one-off
Although the hub presents as a highly custom experience, it was not implemented as one giant hard-coded page. The interface was broken into reusable Gutenberg components so individual sections could be maintained, reordered and reused without sacrificing front-end consistency.
This separation keeps editorial structure independent from much of the underlying presentation logic and external-data functionality, while bringing custom Gutenberg blocks, PHP rendering, JavaScript interactions, responsive CSS, structured WordPress data and external API integration together.
What I was responsible for
- Custom WordPress implementationDevelopment of the tournament-focused WordPress experience and supporting functionality.
- Custom Gutenberg componentsPurpose-built blocks created around the specific editorial and data requirements of the World Cup Hub.
- Front-end implementationResponsive implementation of the tournament interfaces across desktop and mobile.
- Sports API integrationsIntegration of external data sources used by API-powered components, including odds and sports statistics.
- Data-driven interfacesTransforming external sports information into structured user-facing components rather than exposing raw data.
- WordPress integrationConnecting dynamic functionality with the surrounding WordPress publishing environment.
- Production implementationBuilding the functionality as part of a real production publishing platform rather than as an isolated prototype.
Technical stack
Why this approach
A tournament hub changes quickly and combines information from very different sources. Some content is editorial and needs to remain easy to manage inside WordPress. Other information originates from external sports-data services and needs to remain structured and consistent.
Building the experience around custom Gutenberg components made it possible to bring those two worlds together without turning the page into either a rigid hard-coded template or a collection of disconnected widgets. The result is a WordPress publishing experience that combines editorial control with data-driven functionality while maintaining a consistent front-end system.
Part of a larger publishing platform
The World Cup Hub was developed as part of a larger custom WordPress publishing ecosystem. While the wider platform includes reusable editorial infrastructure and a broader Gutenberg component library, the World Cup experience required additional tournament-specific interfaces and API-driven components built around sports data.