Wie Sie ein WordPress-FSE-Theme von Grund auf erstellen

Einleitung: Warum ein eigenes Theme statt eines fertigen?

Viele Webseitenbetreiber greifen bei der Erstellung einer neuen WordPress-Seite auf ein fertiges Theme aus dem WordPress-Verzeichnis zurück. Das ist schnell gegangen — doch oft bleibt das Ergebnis generisch, langsam und schwer an die eigenen Bedürfnisse anzupassen.

Full Site Editing (FSE) hat die Möglichkeiten erweitert, die mit einem eigenen Theme verbunden sind. Ohne PHP-Kenntnisse lassen sich heute komplette Websites gestalten — von Kopf- über Haupt- bis Fußzeile. In diesem Artikel zeigen wir Schritt für Schritt, wie Sie ein modernes FSE-Theme entwickeln, das auf Ihre Anforderungen zugeschnitten ist.

Der Artikel basiert auf praktischen Erfahrungen mit dem Code, einem reinen Block-Theme, das auf mehreren WordPress-Installationen im Einsatz ist.

Was ist Full Site Editing (FSE)?

Full Site Editing ist ein WordPress-Feature, das seit Version 5.9 integriert ist und mit WordPress 6.0 zum Standard wurde. Es ermöglicht die Bearbeitung jedes Elements einer Website direkt im Block-Editor — nicht nur einzelnen Seiten oder Beiträgen, sondern auch Header, Footer, Archive und Fehlerseiten.

Ein FSE-Theme besteht im Wesentlichen aus drei Komponenten:

1. theme.json — Konfigurationsdatei für Farben, Schriftarten, Layout-Größen und Block-Stile

2. Template-Dateien (.html) — Definieren das Gerüst der verschiedenen Seitentypen

3. Template-Parts (.html) — Wiederkehrende Elemente wie Header und Footer

Im Gegensatz zu klassischen Themes gibt es keine Code, Code oder Code. Stattdessen steuern Sie das gesamte Layout über Block-Markup in einfachen HTML-Dateien.

Die Layout-Entscheidungen: Was passt auf Ihre Seite?

Bevor Sie eine einzige Zeile Code schreiben, sollten Sie drei grundlegende Fragen beantworten:

– Wie breit soll der Gesamtkontainer sein?

– Wie breit soll der eigentliche Content-Bereich sein?

– Wie hoch soll der Header sein?

Diese Entscheidungen beeinflussen die Lesbarkeit, die Performance und das visuelle Erscheinungsbild Ihrer Seite.

Der Container: 1200 Pixel

Ein maximales Container-Width von 1200 Pixeln hat sich als guter Kompromiss bewährt. Das bietet ausreichend Platz für:

– Lange Textabschnitte ohne ermüdende Zeilenlängen

– Tabellen und Vergleichsübersichten

– Zwei- oder Dreispaltige Layouts nebeneinander

– Große Zitate und Code-Beispiele

Auf ultraweiten Monitoren (32 Zoll und mehr) wirkt ein 1200px-Container nicht gequetscht, während er auf Standard-Displays (13–16 Zoll) gut proportional erscheint.

Der Content: 800 Pixel

Der eigentliche Textbereich sollte auf 800 Pixel begrenzt sein. Dieser Wert basiert auf psycholinguistischen Untersuchungen zur Lesbarkeit:

Bei 18px Schriftgröße ergibt eine 800px-Breite etwa 44–48 Zeichen pro Zeile

– Die optimale Leselinienlänge liegt zwischen 45 und 75 Zeichen

– Kürzere Zeilen erhöhen das Lesetempo und reduzieren Augenanstrengung

Für Fachartikel mit viel Text — wie Glossareinträge, Gesetzestexte oder juristische Analysen — ist diese Breite ideal. Breitere Blöcke wie große Tabellen oder Code-Beispiele können über die Code (1200px) hinausgehen.

Der Header: 100 Pixel Höhe

Ein Header von 100 Pixeln Höhe auf dem Desktop bietet:

– Genug Raum für ein gut sichtbares Logo (ca. 40–50px)

– Platz für eine einzeilige Navigation

– Eine klare visuelle Trennung zum Content

– Touch-freundliche Klickflächen ohne Verschwenden von Above-the-Fold-Platz

Auf Mobilgeräten sollte der Header auf 80 Pixel reduziert werden — dort zählt jeder Pixel für den Content.

Zusammenfassung der Layout-Werte

ElementDesktopMobile Container1200px100% Content800px100% Header100px80px

Schritt-für-Schritt: Das Theme erstellen

Schritt 1: Der Ordner

Erstellen Sie einen neuen Ordner in Ihrem Themes-Verzeichnis:

Code

Der Ordnername sollte kleingeschrieben sein, Bindestriche statt Unterstriche verwenden und eindeutig sein — zum Beispiel Code oder Code.

Schritt 2: Die style.css

Jedes WordPress-Theme benötigt zwingend eine Code mit einem Header. Dieser ist auch dann erforderlich, wenn Sie kein einziges CSS geschrieben haben — WordPress erkennt das Theme sonst nicht.

Code

Schritt 3: Die theme.json

Die Code ist das Herzstück Ihres FSE-Themes. Hier definieren Sie Farben, Schriftarten, Layout-Größen und Block-Stile.

Grundlegende Struktur:

Code

Mit diesen beiden Zeilen setzen Sie die Content-Breite auf 800px und die Wide-Breite auf 1200px — genau die Werte, die wir zuvor besprochen haben.

Farben definieren:

Code

Schriftarten festlegen:

Code

Komplette theme.json — Ein Praxisbeispiel:

Code

Schritt 4: Der Header

Erstellen Sie den Ordner Code und darin die Datei Code:

Code

Was passiert hier?

– Die äußere Code ist der Header-Container mit 100px Mindesthöhe und 1200px breitem Layout

– Der innere Strich unten in Akzentfarbe trennt visuell den Header vom Content

– Code zeigt den Seitentitel (klickbar, verbindet sich mit den WordPress-Einstellungen)

– Code fügt die Hauptnavigation ein — Code sorgt für das Hamburger-Menü auf Mobilgeräten

Mobil-Anpassung: Für mobile Geräte passen Sie die Höhe in der `theme.json` oder direkt im Block-Editor an. Eine Media-Query in der `style.css` ist hier nicht nötig, da FSE-Blöcke responsiv konfiguriert werden können.

Schritt 5: Der Footer

Erstellen Sie Code:

Code

Wichtig: Die Zeile `` am Ende ist essenziell. Viele Plugins (SEO, Tracking, Formulare) benötigen diese Funktion, um Skripte korrekt in die Seite einzubinden.

Schritt 6: Die Template-Dateien

#### Single (Einzelner Beitrag)

Code

#### Index (Startseite / Beitragsliste)

Code

#### Page (Statische Seite)

Code

#### Archive

Code

#### 404

Code

Schritt 7: Deployment auf WordPress

#### Installation über das WordPress-Backend

Laden Sie den Them-Ordner als ZIP-Datei hoch:

1. Gehen Sie zu Design → Themes → Neues hinzufügen → Theme hochladen

2. Wählen Sie die ZIP-Datei aus

3. Klicken Sie auf Installieren und anschließend auf Aktivieren

#### Installation über FTP/SFTP

Kopieren Sie den Them-Ordner in `wp-content/themes/` Ihres WordPress-Verzeichnisses. Danach aktivieren Sie das Theme im WordPress-Backend unter Design → Themes.

#### Installation in einer Docker-Umgebung

Wenn Sie WordPress in Docker betreiben (z.B. mit dem offiziellen WordPress-Image):

Code

Wichtige Hinweise zur Umsetzung

Keine PHP-Dateien nötig

Ein reines FSE-Theme benötigt keine `header.php`, `footer.php`, `index.php` oder andere PHP-Template-Dateien. Diese können sogar Probleme verursachen, wenn sie neben den HTML-Templates existieren. Löschen Sie alle PHP-Template-Dateien aus dem Theme-Ordner.

Container-Hashes und Cache

WordPress generiert für jeden Container mit Layout-Einstellungen einen eindeutigen Hash (z.B. Code). Wenn Sie die Code ändern, aber die Templates nicht aktualisieren, bleiben alte Hashes im Cache. Änderungen an den Layout-Größen werden erst wirksam, nachdem Sie:

1. Die Templates bearbeitet haben (selbst eine kleine Änderung genügt)

2. Den Cache geleert haben (Code)

Responsive-Anpassung im Block-Editor

Sie können Block-Einstellungen direkt im Editor für verschiedene Bildschirmgrößen anpassen. Verwenden Sie die Code-Modifier in der Code:

Code

Die .htaccess prüfen

Stellen Sie sicher, dass Ihre Code korrekt konfiguriert ist, insbesondere wenn Sie Permalinks verwendet:

Code

Fazit: Ein Theme, das zu Ihnen passt

Die Erstellung eines eigenen WordPress-FSE-Themes mag zunächst nach viel Aufwand aussehen. Doch mit den richtigen Grundlagen — einer klaren Code, sauberen Template-Dateien und durchdachten Layout-Entscheidungen — lässt sich in wenigen Stunden ein professionelles, schnelles und vollständig anpassbares Theme erstellen.

Die drei Schlüsselentscheidungen, die wir besprochen haben — 1200px Container, 800px Content und 100px Header — bilden dabei eine bewährte Basis für Fachseiten und Lexika. Passen Sie die Werte gerne an Ihre individuellen Bedürfnisse an, aber behalten Sie immer die Lesbarkeit und Performance im Blick.

Ein eigenes Theme zahlt sich aus: Keine überflüssigen Funktionen, keine langsamen Frameworks, volle Kontrolle über das Design — und vor allem: Eine Website, die genau das tut, was Sie brauchen.

Ressourcen und weiterführende Literatur

– WordPress Developer Handbook — Block Themes

– theme.json Dokumentation

– Full Site Editing Docs

---

Stand: August 2026 · Basierend auf praktischen Erfahrungen mit dem ibp-theme-2608

Stichworte und Definitionen

---

Alle genannten Begriffe sind auch als Tags verlinkt und führen zu weiterführenden Artikeln auf unserer Seite.