St. Gilgen International School

The Brief

St. Gilgen International School (StGIS) is a boarding school located in Salzburg, Austria, offering an IB curriculum to students from around the world. The school needed a website that could serve a genuinely international audience — marketing the school to prospective families in multiple languages, handling summer camp and school enquiry applications, and providing a gated parent portal for enrolled families. The main technical challenge was delivering a polished, content-rich site that a non-technical editorial team could maintain, while layering on sophisticated tracking and custom interactive features the school required.

My Role

I was the sole developer on this project, responsible for all custom code from the theme layer down to the plugin level. I worked from the school's existing brand guidelines and built around Elementor Pro as the page-builder, writing custom extensions rather than replacing it. The site runs on a managed WordPress hosting stack and I handled the full development workflow including local environment setup, build tooling, and deployment.

Technical Approach

The site is built on WordPress with Elementor Pro as the layout engine. Rather than fighting the page-builder paradigm, I treated Elementor as a foundation and extended it precisely where the school's requirements went beyond what stock widgets could do. This meant two custom plugins and a bespoke child theme rather than patching things together with CSS overrides and third-party add-ons.

The child theme (stgis, based on Hello Elementor) ships its own JavaScript bundle compiled with Rollup and Babel. I chose Rollup over Webpack here because the output is a handful of ES module files with no complex code-splitting needs — Rollup produces a cleaner, smaller bundle for that use case. The bundle wires up three concerns: a mega-menu hover teaser system, a GA4 analytics layer, and client-side WPForms validation.

The analytics layer was a non-trivial piece of work. The school uses Google Tag Manager with a structured event taxonomy (A0* for clicks, B0* for form submissions, C01 for parent portal logins). Rather than hard-coding GTM triggers for every element, I built a delegation system: PHP adds data-tracking-id and data-tracking-name attributes to specific WPForms forms and clickable elements, and a single event listener on document.body routes all click and AJAX form submission events into the dataLayer. For lead forms, email addresses and phone numbers are hashed client-side using the Web Crypto API (SHA-256) before being sent to GA4 as user_data — a requirement for Google's enhanced conversions. Parent portal logins are tracked via a short-lived PHP cookie set on wp_login that the frontend reads and clears after firing a ParentPortalLogin event.

The stgis-photo-tour plugin powers an interactive campus and activities map. It registers a stgis_map custom post type whose data (coordinates, location groups, photos) is managed through ACF Pro repeater fields. A shortcode renders an empty container and an Underscore.js inline template; the compiled bundle fetches the post's data via the WordPress REST API and renders interactive map pins. Clicking a pin opens an info window containing a Swiper photo carousel. I reused Elementor's bundled Swiper v8 instance rather than loading a separate copy to avoid version conflicts and keep page weight down.

The site is fully multilingual via WPML. Both custom plugins implement the wpml_elementor_widgets_to_translate filter so WPML's translation editor can surface widget fields without any manual string registration.

Key Features

• Custom Staff Member widget — Elementor widget rendering a hover-overlay card with photo, name, position, and nationality; fully WPML-translatable via the wpml_elementor_widgets_to_translate filter
• Story Carousel widget — Extends Elementor Pro's carousel base class with per-slide image, title, description, and optional CTA; loaded as an ES module to avoid global scope pollution
• Interactive photo tour map — WordPress shortcode rendering a map driven by REST API + ACF data, with Swiper photo carousels inside each location info window
• GA4 event delegation layer — Single document.body listener routes click and WPForms AJAX submission events into the GTM dataLayer; PII hashed via Web Crypto SHA-256 before dispatch
• Parent portal login tracking — PHP sets a short-lived JS-readable cookie on subscriber login; frontend fires a ParentPortalLogin GA4 event then clears the cookie
• WPForms extensions — Custom hooks for international address validation, read-only fields, date range restrictions, and a forbidden-word server-side validator for camp application forms
• Mega menu teaser text — PHP filter injects ACF-managed teaser copy as data-teaser-text attributes on menu items; JavaScript swaps visible copy on hover without re-rendering the menu

Tech Stack

WordPress · PHP · Elementor Pro · WPML · WPForms · Advanced Custom Fields Pro · JavaScript (ES Modules) · Rollup · Babel · Webpack · Swiper · jQuery · Google Tag Manager · GA4