Block-Themes verstehen

Das Theme bestimmt, wie eine WordPress-Website aussieht. Lange Zeit bestanden Themes aus PHP-Vorlagen, CSS und JavaScript, und Anpassungen verlangten Programmierkenntnisse oder einen Page Builder. Mit Block-Themes hat sich das grundlegend geändert. Sie bestehen aus HTML-Vorlagen mit Blöcken und einer zentralen Konfigurationsdatei namens theme.json, in der Farben, Schriften, Abstände und Blockeinstellungen festgelegt werden. Das Ergebnis: Websites lassen sich im Website-Editor gestalten, Designs bleiben einheitlich, und der Code wird schlanker und schneller. Diese Lektion zeigt, wie Block-Themes aufgebaut sind und worauf es bei der Auswahl ankommt.

1. Klassisch oder Block?

2. Aufbau eines Block-Themes

1mein-theme/
2├── style.css          ← Name, Version, Beschreibung des Themes
3├── theme.json         ← Farben, Schriften, Abstände, Blockeinstellungen
4├── functions.php      ← optional: PHP für Hooks, Skripte
5├── templates/         ← Vorlagen: index.html, single.html, page.html …
6├── parts/             ← Template-Teile: header.html, footer.html
7├── patterns/          ← Muster als PHP-Dateien
8└── assets/            ← Schriften, Bilder

Das Herzstück ist theme.json. Hier werden Farbpaletten, Schriftarten und -größen, Abstände und Layoutbreiten festgelegt, dazu Standardstile für Blöcke und Elemente wie Buttons und Links. WordPress erzeugt daraus automatisch CSS-Variablen und stellt die Werte im Editor als Auswahl bereit. Zugleich legt theme.json fest, welche Einstellungen Redakteure überhaupt ändern dürfen – etwa nur die Farben der Palette statt beliebiger Farben. Probieren Sie es aus:

1{
2  "$schema": "https://schemas.wp.org/trunk/theme.json",
3  "version": 3,
4  "settings": {
5    "color": {
6      "palette": [
7        { "slug": "akzent", "color": "#21759b", "name": "Akzent" }
8      ]
9    }
10  },
11  "styles": {
12    "typography": { "fontFamily": "system-ui, sans-serif" },
13    "spacing": { "blockGap": "24px" },
14    "elements": {
15      "button": {
16        "color": { "background": "var(--wp--preset--color--akzent)" },
17        "border": { "radius": "12px" }
18      }
19    }
20  }
21}

3. Fertiges Theme oder eigenes?

Für viele Websites genügt ein gutes fertiges Block-Theme, etwa das mitgelieferte Standard-Theme von WordPress oder ein bewährtes Theme aus dem offiziellen Verzeichnis, angepasst über die globalen Stile. Ein eigenes Theme lohnt sich, wenn ein individuelles Design umgesetzt werden soll, wenn Redakteuren bewusst nur bestimmte Gestaltungsmöglichkeiten gegeben werden sollen oder wenn höchste Ansprüche an Ladezeit und Barrierefreiheit bestehen. Dank theme.json ist der Aufwand für ein eigenes Block-Theme deutlich geringer als früher. Modul 3 zeigt die Entwicklung im Detail.

4. Themes auswählen

5. Anpassen ohne Verlust

Wie beim Core gilt auch beim Theme: Nicht direkt in den Dateien eines fremden Themes arbeiten, denn Updates überschreiben Änderungen. Anpassungen über den Website-Editor werden in der Datenbank gespeichert und bleiben bei Updates erhalten. Für tiefere Änderungen – eigene Vorlagen, zusätzliche Muster, eigenes PHP – dient ein Child-Theme, das nur die Unterschiede zum Eltern-Theme enthält. Bei Block-Themes kann ein Child-Theme oft aus wenig mehr als einer style.css und einer theme.json bestehen. Auch Stilvarianten, alternative theme.json-Dateien im Ordner styles, erlauben es, verschiedene Farbwelten mitzuliefern, zwischen denen im Editor gewechselt werden kann.

6. Ein Beispiel

Eine Zahnarztpraxis nutzt das Standard-Theme von WordPress. Über die globalen Stile wurden Praxisfarben und Schriften festgelegt, Kopf- und Fußzeile im Website-Editor angepasst. Für zwei Besonderheiten – eine Vorlage für Behandlungsseiten mit Preisbox und ein Muster für Teamvorstellungen – entstand ein kleines Child-Theme mit einer theme.json, einer Vorlage und einem Muster. Die Farbauswahl im Editor ist auf die Praxisfarben beschränkt, damit die Seite einheitlich bleibt. Die ganze Anpassung dauerte zwei Tage, das Theme bleibt updatefähig, und die Seite erzielt sehr gute Ladezeiten.

7. Themes und Performance

Block-Themes haben einen weiteren Vorteil, der oft unterschätzt wird: Sie laden nur das CSS der Blöcke, die auf einer Seite tatsächlich vorkommen. Klassische Themes und Page Builder laden häufig große Stylesheets und Skripte auf jeder Seite, auch wenn nur ein Bruchteil gebraucht wird. Das wirkt sich direkt auf Ladezeit, Suchmaschinen-Bewertung und Nutzererlebnis aus. Wer ein Theme auswählt oder entwickelt, sollte deshalb immer auch mit einem Messwerkzeug wie PageSpeed Insights prüfen, wie schnell eine typische Seite lädt – bevor Inhalte und Plugins hinzukommen.

8. Häufige Fragen

Brauche ich zum Anpassen eines Block-Themes Programmierkenntnisse? Für Farben, Schriften, Abstände, Kopf- und Fußzeile und viele Vorlagen nicht – das geht im Website-Editor. Programmierkenntnisse werden erst für eigene Blöcke, besondere Vorlagen mit Logik oder tiefe Eingriffe gebraucht. Wer theme.json versteht, kann aber mit wenig Aufwand sehr viel steuern, ganz ohne PHP oder CSS.

Was passiert mit meinen Anpassungen im Website-Editor bei einem Theme-Update? Sie bleiben erhalten, weil sie in der Datenbank gespeichert werden und die Dateien des Themes überlagern. Das hat allerdings eine Kehrseite: Verbessert der Theme-Hersteller eine Vorlage, die Sie angepasst haben, sehen Sie die Verbesserung nicht, solange Ihre Anpassung aktiv ist. Im Website-Editor lässt sich eine angepasste Vorlage jederzeit auf den Stand des Themes zurücksetzen.

Kann ich bestehende Websites auf ein Block-Theme umstellen? Ja, aber nicht auf Knopfdruck. Inhalte bleiben erhalten, doch Kopf- und Fußzeile, Widgets, Menüs und Page-Builder-Layouts müssen neu aufgebaut werden. Am besten geschieht das auf einer Staging-Kopie, Seite für Seite, mit einer Liste aller Vorlagen und Sonderfälle. Der Aufwand lohnt sich meist beim nächsten Relaunch.

Stand: September 2026, WordPress 7.1, PHP 8.3. Kursmaterial der Klarwerk Akademie. WordPress entwickelt sich schnell – maßgeblich ist die aktuelle Dokumentation auf developer.wordpress.org.