01 — Overview
Overview
Julli Jets is a commercial charter company offering private jets, helicopters and yachts. I built and maintain their website (jullijets.co.uk) on WordPress and Elementor — but not by clicking around a page builder.
Instead I wrote a custom two-layer PHP system that generates the Elementor page layouts programmatically. Every page is composed from reusable section and widget builders, which makes the design consistent, versionable and fast to rebuild.
02 — Problem
The problem
A charter brand needs a site that feels premium and loads well, with many pages (jets, helicopter, yacht, empty legs, charter request, contact, FAQs and more) that share a consistent design language.
Editing that many pages by hand in a visual builder is slow and drifts out of sync. The client also needed real functionality — an empty-legs listing and a charter-request booking flow — not just brochure pages.
03 — Requirements
Requirements
- A premium, responsive design across a large set of pages.
- A consistent, maintainable design system rather than hand-tweaked pages.
- An empty-legs listing and a charter-request booking form.
- Deployment to the client's managed hosting.
05 — Solution
The solution
I built a PHP library of design tokens, widget builders (containers, headings, buttons, images) and section builders (hero, feature rows, stats strips, service and destination cards, CTA banners). Page scripts compose these into a layout and write it to Elementor as validated JSON.
Shared chrome — the fixed header, drawer navigation, footer and global CSS — lives in a must-use plugin, and a custom booking engine provides the empty-legs post type and the charter-request form.
The result is a site whose look is defined in code: change a design token and every page inherits it, then re-run the generator.
06 — Architecture
System architecture
Everything routes through a shared PHP library that exposes design tokens as constants and a set of composable widget and section builders returning the exact element shape Elementor expects. Page scripts stay flat: look up the page, build an array of sections, and save.
Global chrome and CSS live in a must-use plugin loaded on every request, and a separate custom plugin provides the empty-legs content type and the booking form. The generated pages reference that shared design system.
Deployment is to IONOS-style managed hosting — scripts are uploaded over SSH and run on the server, which bootstraps WordPress and writes the page data.
08 — Features
Key features
Programmatic page builder
Reusable PHP section and widget builders generate Elementor layouts as validated JSON.
Code-defined design system
Design tokens as constants keep colour, type and spacing consistent across every page.
Empty-legs listing
A custom post type surfaces discounted empty-leg flights.
Charter-request booking
A booking form captures charter enquiries directly from the site.
Premium responsive design
A polished, mobile-friendly layout fitting a luxury charter brand.
09 — Engineering
Implementation decisions
Builders over hand-editing
Pages are composed from vetted helper functions, so the fragile Elementor JSON structure is generated correctly every time.
Single source for design
Colours and styles are defined once as tokens and referenced everywhere, preventing drift.
Separation of chrome and content
Header, footer and global CSS live in a must-use plugin, independent of the generated page content.
Server-side deployment
Scripts are uploaded and executed on the host, bootstrapping WordPress to write page data and flush caches.
10 — Challenges
Challenges & how I solved them
Taming Elementor's data model
Elementor pages are deeply nested JSON that breaks silently on a missing id or unescaped character. Wrapping saves in a validated helper made generation reliable.
Keeping design in sync
With many pages, hand-editing caused drift. Moving the design into code-level tokens and builders made the whole site consistent and quick to update.
Working within managed hosting
No modern deploy pipeline — just SSH and the server's own WordPress. I built the workflow around uploading and running scripts, then flushing Elementor caches.
12 — Interface
Screenshots
13 — Outcome
Results
- A live, premium charter website the client uses as their primary presence.
- A maintainable, code-defined design system that makes site-wide changes fast.
- Real functionality — empty-legs listings and charter requests — beyond static pages.
14 — Reflection
Lessons learned
Generating a design system in code beats hand-editing a visual builder at scale.
A luxury brand lives or dies on consistency — tokens enforce it.
Even constrained hosting can support a disciplined, repeatable workflow.
15 — What's next
Future improvements
- A lightweight editing layer so the client can tweak copy without touching scripts.
- Expanded booking and payment integration for direct charter requests.
16 — Toolchain