DE
EN
Custom WordPress theme for a North Sea holiday home — The Blue House in Friedrichskoog
Complete in-house development of the website for a privately rented holiday home on the North Sea: a custom-made WordPress theme. without a page builder and without a framework, with its own booking request module, image gallery with lightbox, live weather and tide widgets (DWD & BSH), complete SEO/JSON-LD layer and a calm, maritime design language.
Project Overview
blaue-haus.de is the website of the “blue house” — a blue-grey A-frame house in Friedrichskoog-Spitze Located directly on the North Sea coast. The goal was a calm, high-quality, and personal website that emotionally showcases the house while simultaneously generating booking inquiries. Implemented as a completely custom WordPress theme—without a framework or page builder—it's open to new content and can be maintained by the owners themselves.
Abstract: Custom-designed WordPress website for a North Sea holiday home based on a custom theme (no page builder) — with booking request module including availability calendar, masonry image gallery with lightbox, live weather from DWD data and tides from the BSH tide calendar, complete SEO/JSON-LD layer, GDPR-compliant contact form with click-to-load map and a calm, maritime design language with locally embedded fonts.
Technology stack
A deliberately lean, maintainable stack without framework or page builder overhead — everything the page needs, and nothing more:
Backend
Frontend
Data & Interfaces
Infrastructure & Workflow
Implemented functions
All building blocks were developed specifically for the theme — modular, defensive and without dependence on heavy plugins:
Booking request & availability calendar
Custom post types for bookings and inquiries. flatpickr date picker with blocked time periods, live price calculation, GDPR compliance field, honeypot + time trap. Inquiries are saved and forwarded via E-mail Sent to host and guest.
Image gallery with lightbox
Masonry grid (CSS columns) and an accessible lightbox: arrow keys, Esc, focus trap, captions, and swipe gestures on mobile devices. JavaScript is only loaded when the gallery is displayed.
Weather widget (DWD)
Current conditions, wind, sunrise/sunset, daily weather pattern and 5-day forecast from official DWD data via the BrightSky API — no API key required, cached hourly on the server. Custom colored inline SVG weather symbols.
Tide widget (BSH)
High and low tide times from the BSH tide calendar, prepared as an annual data set. The next event is automatically marked — important for beachgoers and visitors to the Wadden Sea.
"North Sea today" in the banner
A status panel displaying current weather and upcoming high/low tides overlays each page banner. On mobile devices, this appears as a robust, full-width bar instead of a floating panel.
GDPR contact form + map
A dedicated contact form with spam protection and confirmation email. The Google Maps directions only load after a conscious click—no data is transmitted to Google beforehand.
SEO & JSON-LD
Plugin-free SEO module: Meta title/description per page, Open Graph, geo-meta and structured data (LodgingBusiness, FAQPage, BreadcrumbList). Physical robots.txt and llms.txt files in the web root.
Editorially maintainable (ACF)
textsImages, availability periods, and key data can be managed via ACF and the customizer. The theme also works without ACF with sensible fallbacks ("content-open").
Design & Special Features
The house itself dictates the design: the distinctive gable shape, blue-grey and cream-white, natural wood and a sparing beach chair red as an accent.
| Aspect | Implementation |
|---|---|
| design language | Calm, maritime, warm: own color system (North Sea blue, sand, sage green, beach chair red as an accent), serif headline font + humanistic design. |
| Maritime motifs | Fine line illustrations (anchor, shell, starfish, knot, net, etc.) as section separators, subtle watermarks and list markers. |
| A-Frame leitmotif | The gable/triangular shape of the house is repeated as a logo and design motif across the entire page. |
| Mobile fine-tuning | Off-canvas menu, sticky CTA, "Up" button, full-width status bar; iOS-specific layout quirks specifically solved. |
| Accessibility | Visible focus style, keyboard-operated lightbox, prefers-reduced-motion, clear semantic structure (one H1 per page). |
| Performance | Local web fonts, lean vanilla JavaScript, server-side caching of weather and tide data, responsive images via srcset. |
Performance, SEO & Findability
Performance
- Locally embedded web fonts (no external font request)
- Lightweight vanilla JavaScript, module-specific and loaded only when needed.
- Server-side caching of weather and tide data (1 retrieval/hour for the entire site)
- Responsive images via native
srcset, lazy loading prefers-reduced-motionrespective
SEO measures
- Each page has exactly one H1 and a clear H2/H3 hierarchy.
- Custom meta titles and descriptions for each page, descriptive slugs
- Open Graph + Twitter Cards for attractive link previews
- Structured data (JSON-LD): LodgingBusiness, FAQPage, BreadcrumbList
- Physical
robots.txtandllms.txtin the webroot - Local SEO on Friedrichskoog / North Sea holiday, natural keyword usage
Frequently asked questions about the project
Deliberately formulated so that the answers for featured snippets and AI responses can be directly adopted:
What software was used to create the website for Das blaue Haus?
Built entirely from scratch with a custom-developed WordPress theme ("blaue-haus") on WordPress 7.0 and PHP 8.5 — without a page builder or framework. Content can be managed via Advanced Custom Fields and the Customizer.
How does the booking request work?
A dedicated inquiry module with a date picker (where booked time periods are blocked), live price display, GDPR consent, and spam protection (honeypot + time trap) is included. Inquiries are saved and sent via email to both host and guest.
Where do the weather and tide data come from?
The weather data is sourced from official DWD (German Weather Service) data via the BrightSky API (no API key required, cached hourly). The tides are taken from the BSH (German Federal Maritime and Hydrographic Agency) tide calendar. Both are cached server-side, so only one request per hour is needed for the entire site.
Is the website GDPR compliant?
Yes. The contact form uses a honeypot and time trap instead of tracking, the Google Maps map only loads after a deliberate click, and a cookie banner (for compliance) is integrated. Personal data is only processed for the purpose of handling the request.
How is the site optimized for search engines?
The site features a dedicated SEO module with meta tags, Open Graph, geo-data, and structured data (LodgingBusiness, FAQPage, BreadcrumbList), as well as a physical robots.txt file. Each page has exactly one H1 heading and user-friendly URLs; the texts are optimized for local search terms around Friedrichskoog.
Can the landlord maintain the content herself?
Yes. Texts, images, booking periods, and key data can be managed via ACF and the customizer. The theme is built to be "content-open" and also works without ACF using sensible fallback content.
What makes the design special?
A calm, maritime design language with its own color system, locally sourced typefaces (Fraunces + Mulish), and delicate nautical line motifs. The distinctive A-frame gable shape of the house is used as a logo and leitmotif throughout the entire site.
Are you planning your own website?
Whether it's a vacation rental, a small business, or a brand—we develop custom WordPress sites that load quickly, are easily discoverable, and have a distinctive design. This reference demonstrates that a streamlined custom theme without the bloat of a page builder can be the perfect fit. Feel free to contact us.
Live reference
WordPress Custom Theme · Holiday Home on the North Sea · Developed in-house 2026.
Be the first to leave a comment!