WordPress: Vom CSS-Chaos zur Erleuchtung: Die 7 Säulen der theme.json (Inspiriert von T.E. Lawrence)WordPress: Theme.json

Wer heute ein modernes WordPress-Theme entwickelt, kommt an einer Datei nicht mehr vorbei: der theme.json. Eingeführt mit dem Full Site Editing (FSE), hat sie die Art und Weise, wie wir Websites gestalten, komplett revolutioniert. Vorbei sind die Zeiten, in denen wir Tausende Zeilen CSS schreiben oder Funktionen mühsam über PHP in der functions.php registrieren mussten.

Der berühmte britische Offizier T.E. Lawrence schrieb einst sein monumentales Meisterwerk „Die sieben Säulen der Weisheit“. Für viele klassische WordPress-Entwickler fühlt sich der Wechsel zu Gutenberg und FSE oft wie ein ganz eigener Befreiungskampf an – weg vom unübersichtlichen CSS-Sumpf, hin zu moderner, klarer Struktur.

Passenderweise baut sich die Architektur deines Themes auf exakt 7 Säulen der theme.json-Weisheit auf. Wenn du diese sieben Kernbereiche verstehst, beendest du das Code-Chaos und meisterst jedes Block-Theme im Schlaf.

Ein zukunftssicheres Fundament (Die Äre von WordPress 7)

Obwohl wir mittlerweile in der Ära von WordPress 7 angekommen sind, steht in der Datei immer noch version: 3. Warum? Die Versionsnummer in der theme.json zählt nur hoch, wenn sich die grundlegende Struktur der Datei ändert. Das WordPress-Team legt extremen Wert auf Abwärtskompatibilität. Selbst wenn irgendwann Version 4 erscheint, laufen deine Version-3-Themes nahtlos weiter. Du investierst hier also in absolut zukunftssicheres Wissen.

Brechen wir die sieben Säulen logisch auf:

Die 7 Säulen der theme.json

1. Die Meta-Säule (Das Fundament)

Ganz oben in deiner Datei triffst du auf die Formalitäten. Sie sorgen dafür, dass WordPress und dein Code-Editor die Datei fehlerfrei verstehen.

  • $schema: Die wichtigste Zeile für dich! Sie verbindet deine Datei mit den WordPress-Regeln. Dadurch zeigt dir dein Editor (wie VS Code) sofort Fehler an und schlägt dir Einträge per Autovervollständigung vor
  • version: Die API-Version. Für moderne Themes nutzt du hier immer die 3.
{
  "$schema": "https://wp.org",
  "version": 3
}

2. settings – Die Säule der Kontrolle (Editor-Optionen)

Im Bereich settings entscheidest du, was der Nutzer im WordPress-Editor tun darf. Hier definierst du Schalter (true/false) und Vorgaben (Presets), aus denen WordPress automatisch globale CSS-Variablen generiert.

  • appearanceTools: Ein echter Lebensretter. Schaltest du dies auf true, aktiviert WordPress auf einen Schlag alle erweiterten Designwerkzeuge (wie Rahmen, Abstände und Linienhöhen).
  • Praxis-Beispiel: Die Farbpalette einschränken.
    Wenn du ein Theme für einen Kunden baust, willst du verhindern, dass dieser mit dem freien Farbwähler das Corporate Design zerstört. Wir setzen "custom": false und geben stattdessen exakte Markenfarben vor:
{
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "color": {
      "custom": false,
      "palette": [
        {
          "slug": "primary",
          "color": "#1e3a8a",
          "name": "Primärfarbe (Blau)"
        },
        {
          "slug": "secondary",
          "color": "#10b981",
          "name": "Sekundärfarbe (Grün)"
        }
      ]
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  }
}

Aus diesem Code generiert WordPress im Hintergrund automatisch CSS-Variablen wie --wp--preset--color--primary.

3. styles – Die Säule der Ästhetik (Das Standard-Design)

Während settings nur die Optionen bereitstellt, legst du in styles fest, wie das Theme beim ersten Laden tatsächlich aussieht. WordPress wandelt diese Angaben direkt in CSS um.

  • elements: Style HTML-Elemente wie Links, Buttons oder Überschriften global – inklusive :hover-Zuständen.
  • blocks: Das mächtigste Feature! Du kannst gezielt jeden WordPress-Core-Block vorstylen.

Praxis-Beispiel: Globale Farben setzen und den Button-Block vorstylen:

{
  "version": 3,
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#333333"
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        },
        ":hover": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          }
        }
      }
    },
    "blocks": {
      "core/button": {
        "border": {
          "radius": "4px"
        },
        "spacing": {
          "padding": {
            "top": "12px",
            "bottom": "12px",
            "left": "24px",
            "right": "24px"
          }
        }
      }
    }
  }
}

4. customTemplates – Die Säule der Flexibilität (Seiten-Layouts)

Wenn du spezielle Layouts für deine Seiten baust (z. B. eine Landingpage ohne Header), müssen diese im Ordner templates/ deines Themes als HTML-Datei liegen. In dieser vierten Säule registrierst du sie, damit der Nutzer sie im Admin-Bereich unter „Vorlagen“ auswählen kann.

"customTemplates": [
  {
    "name": "landing-page",
    "title": "Landing Page (Ohne Header/Footer)",
    "postTypes": ["page"]
  }
]

5. templateParts – Die Säule der Struktur (Layout-Bausteine)

Hier sagst du WordPress, welche wiederverwendbaren Layout-Stücke (wie Header oder Footer) in deinem parts/-Ordner liegen. Durch die Zuweisung einer area (z. B. header) weiß das System genau, wie es diese Bausteine im Editor kategorisieren muss.

"templateParts": [
  {
    "name": "header",
    "title": "Globaler Header",
    "area": "header"
  },
  {
    "name": "footer",
    "title": "Globaler Footer",
    "area": "footer"
  }
]

6. patterns – Die Säule der Effizienz (Design-Vorlagen)

T.E. Lawrence wusste, wie man Ressourcen strategisch nutzt. Du musst das Rad im Theme ebenfalls nicht neu erfinden. In diesem einfachen Array kannst du die offiziellen Slugs (IDs) von fertigen Block-Patterns aus dem WordPress-Verzeichnis eintragen. Diese werden dann automatisch geladen.

"patterns": [
  "core/two-buttons",
  "core/text-two-columns"
]

7. styles.variations – Die Säule der Verwandlung (Design-Skins)

7. styles.variations – Die Säule der Verwandlung (Design-Skins)

Die siebte und letzte Säule ist ein echtes Highlight für moderne Themes. Hier kannst du komplette alternative Design-Skins hinterlegen (z. B. einen Dark Mode oder ein alternatives Farbschema). Der Nutzer kann dann im Editor mit nur einem Klick das gesamte Erscheinungsbild der Website austauschen, ohne dass du ein neues Theme schreiben musst.

Fazit: Deine Reise zur WordPress-Erleuchtung

Die theme.json mag auf den ersten Blick lang und sandig wie eine Wüste wirken. Doch genau wie die sieben Säulen der Weisheit folgt sie einer unumstößlichen, inneren Logik: In den Settings verwaltest du die Rechte, in den Styles bestimmst du das Aussehen, und in den restlichen Abschnitten strukturierst du deine Vorlagen. Sobald du dieses Prinzip verinnerlicht hast, hast du den Befreiungskampf gegen das alte CSS-Chaos endgültig gewonnen.

Ähnliche Beiträge