Headless WordPress
WordPress als Content-Hub, das Frontend frei gewählt.
Headless beschreibt eine Architektur, bei der Backend und Frontend voneinander getrennt sind. WordPress verwaltet die Inhalte und stellt sie über eine Schnittstelle bereit, eine eigenständige Web-App übernimmt die Darstellung. Bei einer klassischen WordPress-Website erledigt das Theme beides: Auch bei modernen Block-Themes kommt die Ausgabe direkt aus WordPress.
Headless WordPress verbindet damit zwei Dinge, die sich lange auszuschliessen schienen: das bewährte Redaktionssystem mit dem Block Editor, den eure Redaktion kennt, und ein Frontend mit den Möglichkeiten moderner Frameworks wie React oder Next.js. Das Ergebnis sind Plattformen und Web-Apps, die sich unabhängig voneinander weiterentwickeln lassen. Neue Kanäle, neue Funktionen, neue Märkte, ohne das Fundament auszutauschen.
Gut zu wissen: Ihr müsst dafür nicht auf Strapi, Craft, Statamic oder Payload wechseln. WordPress kann Headless. Ob Headless für euer Projekt überhaupt der richtige Weg ist, klären wir allerdings zuerst. Manchmal lautet unsere Antwort «nein», und dann sagen wir das auch.
Was wir anbieten
Headless-Beratung & Architektur-Entscheid
Braucht euer Projekt Headless, oder reicht ein gut gebautes Block-Theme? Wir klären das, bevor die erste Zeile Code entsteht: Anforderungen, Kanäle, Redaktionsprozesse, Budget. Am Ende steht eine Empfehlung mit Begründung. Auch dann, wenn sie «klassisch» lautet.
Headless-Plattformen & Web-Apps
Wir bauen das Frontend als eigenständige Web-App mit React, Next.js oder Vite, mit Server-Side Rendering, damit Suchmaschinen und Ladezeiten nicht leiden. WordPress bleibt Content-Hub, angebunden über sauber definierte Schnittstellen via REST oder GraphQL.
Progressive Web Apps
Offline-Modus, Push-Benachrichtigungen, Installation auf dem Homescreen: Wir entwickeln Web-Anwendungen, die sich wie native Apps anfühlen, aber im Browser laufen. Ein Code-Stand für alle Geräte, kein App Store dazwischen.
Content-Hub & Schnittstellen
WordPress als Datenquelle für mehr als eine Website: Wir verbinden es mit Apps, Drittsystemen und, wenn ihr wollt, mit AI-Assistenten, die über offene Standards wie das Model Context Protocol (MCP) auf eure Inhalte zugreifen. Einmal pflegen, überall nutzen. Wie wir Abläufe und AI darüber hinaus verbinden, zeigen wir auf der Seite «Automatisierung & AI».
Wie Daten aus fünf Schnittstellen in einer App zusammenkommen, am Beispiel unserer privaten Wander-App LàCast: Karte, Route, Höhenprofil, Wetter und Ortsnamen werden pro Wegpunkt mit der Ankunftszeit verknüpft. WordPress ist heute nicht im Spiel, könnte aber als weitere Quelle andocken: mit redaktionellen Inhalten zu jedem Wegpunkt, etwa zur Hütte oder zur Aussicht, gepflegt im Block Editor (gestrichelt).
Was wir schon gemacht haben
Vier Projekte, vier Grade der Entkopplung. Zwei sind Headless durch und durch, zwei zeigen den Weg dazwischen.
Progressive Web App für Berufswahl-Portal Kanton Zürich
Für die Bildungsdirektion des Kantons Zürich haben wir eine Progressive Web App auf Basis von Headless WordPress gebaut: Jugendliche finden per Interessen-Test passende Berufe und Schnupperlehren, Lehrpersonen begleiten ihre Klassen, Unternehmen präsentieren sich. Inhalte aus mehreren Quellen laufen automatisch zusammen, und die Redaktion arbeitet im gewohnten Block Editor.
Headless Progressive Web App für Berufswahl-Portal Kanton St.Gallen
Dieselbe Plattform, ein zweiter Kanton, deutlich mehr Funktionen: Für St.Gallen kamen Klassenverwaltung, Lehrstellen-Bewerbungen, Mittelstufen-Check und Firmenprofile mit Bewerbungsmanagement dazu, live zum Schuljahr 2026/27. Weil Backend und Frontend getrennt sind, wächst ein zweiter Kanton mit eigenen Anforderungen auf demselben Fundament, statt bei null zu beginnen.
React-App in WordPress für Ringier Advertising
73 Brands, über 100 Werbeformate, ein Filter für alles: Für Ringier Advertising haben wir eine React-App in die WordPress-Website eingebettet, die ihre Daten über die REST API bezieht. Agenturen filtern nach Medium, Sprache und Zielgruppe, legen Merklisten an und exportieren Tarife als Excel, während die Redaktion ihre Inhalte weiterhin im Block Editor pflegt.
Live-Daten aus Schnittstellen für hostettler moto
Über 400 Motorradmodelle, acht Standorte, zwei Sprachen: Die neue Website von hostettler moto bezieht Fahrzeugdaten täglich per Schnittstelle, holt Öffnungszeiten live aus dem Google Business Profile und filtert das Sortiment ohne Seitenwechsel über die WordPress Interactivity API. Klassisches WordPress im Kern, und genau dort entkoppelt, wo Tempo zählt.
Ihr überlegt, ob Headless zu eurem Projekt passt? Wir schauen es uns gemeinsam an.
Headless oder klassisch: Wann lohnt es sich?
Headless klingt modern und flexibel, und das ist es auch. Ob sich der Ansatz lohnt, entscheiden aber die Anforderungen eures Projekts, nicht der Trend. Wir haben beides oft genug gebaut, um zu wissen, wo die Grenze liegt.
Nach diesem Prinzip arbeiten wir deshalb bei unseren Kund:innen genauso wie bei uns selbst. Es ist kein starres Nacheinander: Die drei Bausteine greifen ineinander, und oft entstehen sie im selben Projekt gleichzeitig. Aber das Fundament entscheidet, wie weit ihr damit kommt.
Die Vorteile
- Freie Frontend-Entwicklung mit modernen Frameworks, unabhängig vom Release-Zyklus von WordPress
- Ein Content-Hub für mehrere Kanäle: Website, App, Screens, Drittsysteme
- Progressive Web Apps mit Offline-Modus und Push-Benachrichtigungen
- Saubere Trennung von Inhalt, Design und Funktion, dadurch getrennte Teams und getrennte Deployments
- Langfristige Erweiterbarkeit, etwa für neue Funktionen, Mandanten oder Märkte
- Kleinere Angriffsfläche: Das WordPress-Backend muss nicht öffentlich erreichbar sein
Die Herausforderungen
- Höherer Initialaufwand bei Konzeption und Setup
- Zwei Systeme im Betrieb: Backend und Frontend brauchen je Wartung, Monitoring und Updates
- Redaktionsfreundlichkeit muss bewusst mitgebaut werden: Vorschau, Blockdarstellung, Menüs, Formulare
- SEO braucht Server-Side Rendering oder statische Generierung; eine reine Client-App reicht nicht
- WordPress-Plugins, die ins Frontend eingreifen (SEO, Formulare, Cookie-Banner), funktionieren nicht mehr von selbst
Dazwischen gibt es viel
Headless ist keine Alles-oder-nichts-Entscheidung. Oft ist der beste Weg ein Zwischenweg: ein Block-Theme, das für einzelne Bereiche React-Komponenten oder die Interactivity API von WordPress nutzt. Oder eine klassische Website, aus der nur die App ihre Inhalte per Schnittstelle bezieht. Wir schauen, wo die Entkopplung wirklich Nutzen bringt, und bauen nur dort entkoppelt.
Entscheidungshilfe
Headless lohnt sich, wenn …
- eure Plattform mittelfristig wachsen soll, etwa um Mandanten, Sprachen oder Kanäle
- mehrere Zielgruppen oder Kanäle aus denselben Inhalten bedient werden
- komplexe Frontend-Funktionen oder PWA-Features geplant sind: Login-Bereiche, Filter, personalisierte Inhalte
- mehrere Teams parallel an Backend und Frontend entwickeln
- ihr eine langfristige Digitalstrategie verfolgt, in der die Website nur ein Kanal ist
Klassisch ist oft besser, wenn …
- es um einen Webauftritt mit überschaubarem Umfang geht
- die Redaktion maximale visuelle Kontrolle im Editor braucht und will
- Budget oder Zeit knapp bemessen sind
- viele Funktionen aus bewährten WordPress-Plugins kommen sollen
- die Website der einzige Kanal ist und es auf absehbare Zeit bleibt
Eine Auswahl unserer Kund:innen.
Progressive Web Apps
Eine Progressive Web App (PWA) ist eine Web-Anwendung, die sich wie eine native App verhält: Sie lässt sich auf dem Homescreen installieren, funktioniert offline und kann Benachrichtigungen senden. Kein App Store, kein doppelter Code für iOS und Android, eine Basis für alle Geräte.
- Offline-Modus: Inhalte bleiben auch ohne stabile Verbindung nutzbar, etwa im Schulzimmer oder im Zug
- Push-Benachrichtigungen: gezielte Informationen an die, die sie abonniert haben
- App-Erlebnis: schnelle Ladezeiten, flüssige Navigation, kein Seitenwechsel
Weil das Frontend entkoppelt ist, lassen sich Funktionen modular ergänzen: interaktive Checks für die Besucher:innen, persönliche Dashboards oder auch Live-Filter über tausende Einträge. Genau so ist das Berufswahl-Portal des Kantons Zürich entstanden.
Kommt dir das bekannt vor?
- «Unsere Website und unsere App zeigen dieselben Inhalte. Gepflegt werden sie trotzdem zweimal.»
- «Wir wollen eine Plattform, die in drei Jahren noch neue Module verträgt, ohne dass wir alles neu bauen.»
- «Unsere Redaktion liebt den Block Editor. Unser Produkt braucht aber mehr, als ein Theme leisten kann.»
- «Uns wurde ein Headless-CMS empfohlen. Wir sind nicht sicher, ob wir das wirklich brauchen.»
In allen vier Fällen lohnt sich ein Gespräch. Im letzten ganz besonders.
Warum WordPress als Headless CMS?
WordPress ist das meistgenutzte CMS der Welt, und im Headless-Betrieb spielt es einen Vorteil aus, den Systeme wie Strapi oder Craft nicht haben: den Block Editor. Wo andere Headless-CMS die Redaktion mit Formularfeldern arbeiten lassen, schreibt und gestaltet sie hier visuell, in einer Umgebung, die sie meist schon kennt. Die Blöcke liegen strukturiert vor und werden im Frontend als Komponenten ausgegeben, samt Vorschau.
Dazu kommt ein reifes Ökosystem an Schnittstellen. Die REST API gehört seit Jahren zum Kern von WordPress, und mit WPGraphQL steht eine ausgereifte GraphQL-Schnittstelle bereit, die aktiv weiterentwickelt wird. Und mit der Abilities API (seit WordPress 6.9) und dem offiziellen MCP Adapter macht WordPress seine Funktionen auch für AI-Agenten zugänglich. Ein Headless-Backend liefert damit nicht nur eine Website, sondern strukturierte Inhalte für alles, was danach kommt.
Bewährt heisst ausserdem: grosse Community, regelmässige Sicherheits-Updates, ein ausgereiftes Rollen- und Rechtesystem, Mehrsprachigkeit, Medienverwaltung. Alles Dinge, die ein neues System erst einmal nachbauen müsste.
Unser technisches Setup
- Backend: WordPress als Content-Hub mit REST API oder WPGraphQL, eigenen Endpoints und Rollenverwaltung
- Frontend: React mit Next.js oder Vite, TypeScript, komponentenbasiert; Server-Side Rendering oder statische Generierung für Performance und SEO
- Redaktion: Block Editor mit Live-Vorschau des Frontends; jeder Block wird 1:1 als Komponente gerendert
- Betrieb: Docker, GitHub Actions für Tests und Deployment, Monitoring über unser eigenes Dashboard
- Qualität: automatisierte Tests, Accessibility-Checks, Performance-Budgets
Standard-Themes kommen dabei nicht vor. Dafür Plattformen, die skalieren, schnell laden und sich angenehm pflegen lassen.
Unsere Werte
Egal, ob Design, Konzept, Schnittstellen, Engineering, Webentwicklung, WordPress, oder eben auch AI: Unser Anspruch an Qualität bleibt hoch.
Ehrliche Beratung auf Augenhöhe
Wir empfehlen, was zu euch passt. Auch wenn es weniger ist, als ihr erwartet habt.
Entwicklung & Engineering In-House
Konzept, Design und Entwicklung aus einem Team. Ohne Übergabe an Dritte, ohne Reibungsverluste.
Qualität & Handwerk
Wir bauen so, dass wir es in fünf Jahren noch gern anschauen. Getestet, dokumentiert, nachvollziehbar.
Nachhaltige Technologie
Offene Standards statt Abhängigkeiten. Damit ihr morgen noch frei entscheiden könnt.
Häufige Fragen zu Headless WordPress
Was ist Headless WordPress?
Bei Headless WordPress übernimmt WordPress nur noch die Verwaltung der Inhalte und stellt sie über eine Schnittstelle (REST API oder GraphQL) bereit. Die Darstellung übernimmt ein separates Frontend, meist eine Web-App mit React, Next.js oder einem vergleichbaren Framework. Backend und Frontend lassen sich so unabhängig voneinander entwickeln und betreiben.
Ist Headless WordPress gut für SEO?
Ja, wenn das Frontend serverseitig rendert oder statisch generiert wird. Eine reine Client-App macht es Suchmaschinen schwer, Inhalte zu erfassen. Wir setzen deshalb standardmässig auf Server-Side Rendering und kümmern uns um Metadaten, Sitemaps und strukturierte Daten im Frontend, weil die entsprechenden WordPress-Plugins dort nicht mehr greifen.
Funktioniert der Block Editor auch im Headless-Setup?
Ja. Die Redaktion arbeitet wie gewohnt im Block Editor, das Frontend rendert jeden Block als eigene Komponente. Eine Vorschau des echten Frontends bauen wir mit ein, damit niemand blind publizieren muss. Das ist einer der Hauptgründe, weshalb wir WordPress gegenüber anderen Headless-CMS bevorzugen.
Was kostet Headless WordPress im Vergleich zu einer klassischen Website?
Der Initialaufwand ist höher, weil zwei Systeme konzipiert und gebaut werden. Im Betrieb kommen Frontend-Hosting und zusätzliche Updates hinzu. Dafür sinken die Kosten für jeden weiteren Kanal, weil Inhalte nur einmal gepflegt werden. Eine belastbare Zahl gibt es ehrlicherweise erst nach dem ersten Gespräch über eure Anforderungen.
REST API oder GraphQL?
Beides funktioniert. Die REST API gehört zum Kern von WordPress und reicht für viele Projekte. WPGraphQL liefert pro Anfrage genau die Daten, die eine Ansicht braucht, was bei komplexen Frontends Anfragen spart. Wir entscheiden das pro Projekt anhand der Datenstruktur und des Frontends.
Brauchen wir Headless, um AI-Funktionen einzubauen?
Nicht zwingend. AI-Funktionen wie eine intelligente Suche oder ein Assistent lassen sich auch in eine klassische WordPress-Website integrieren. Ein Headless-Setup hat die Inhalte aber bereits als strukturierte Daten vorliegen, was Suche, Assistenten und Anbindungen über das Model Context Protocol (MCP) einfacher macht.
Headless ist kein Hype, sondern eine strategische Entscheidung.
Mit Headless WordPress kombiniert ihr die Freiheit moderner Frontends mit einer Redaktionsumgebung, die euer Team schon kennt. Ob das für euer Projekt der richtige Weg ist, klären wir gemeinsam. Und wenn nicht, sagen wir euch das auch.