Claude Code WordPress Theme Entwicklung

Ein komplettes WordPress Block Theme, gebaut mit Claude Code. Mein Einstieg in die Arbeit mit einem KI-Coding-Agenten, an einem Projekt, das ich kenne: WordPress.

Das Problem

Ich arbeite seit über sechs Jahren mit WordPress. Habe mit ACF gearbeitet, mit Elementor Seiten erstellt, Child Themes gemanaged und sogar eine paar eigene Web-Tools eingebaut. Grundlegende Kenntnisse in HTML und CSS waren aus dem 11. Klasse Informatik-Grundkurs auch noch da.

Was ich noch nie gemacht hatte: ein eigenes Theme von Grund auf bauen. Und schon gar kein Block Theme.

Dabei müssen viele Dateien zusammenspielen: Templates, Patterns, eine theme.json für das gesamte Design-System, eine functions.php für Custom Logic, dazu CSS. Die Syntax ist streng, die Lernkurve steil.

Ich wollte eine persönliche Website, die meine Arbeit mit KI-Tools zeigt. Use Cases, Blog, interaktive Tools. Aber in erster Linie war das Projekt dafür da, Claude Code richtig kennenzulernen. Ich wollte mit etwas anfangen, das ich schon in vielen Bereichen verstehe, und wo ich das Ergebnis vor Augen habe.

WordPress war dafür perfekt.

Der Ansatz

Ich habe das gesamte Theme mit Claude Code entwickelt. Claude Code ist ein CLI-Agent, der direkt im Terminal läuft und Dateien lesen, schreiben und bearbeiten kann. Ich beschreibe, was ich will, Claude Code setzt es um.

Bei mir lief Claude Code immer in VSCode als Extension, das Terminal hab ich direkt übersprungen.

Der erste Anlauf hat nicht gut funktioniert. Ich bin zu schnell losgelaufen, ohne das Projekt vorher richtig zu strukturieren. Und ohne die richtigen Skills einzusetzen. Mehr dazu bei den Herausforderungen weiter unten.

Beim zweiten Versuch habe ich mir Zeit genommen: Ordnerstruktur, Konventionen, Designrichtung.

Und vor allem: Skills. Danach lief es.

Der Prozess war iterativ. Ich habe nie versucht, eine komplette Seite in einem Prompt zu erzeugen. Dafür hatte ich das Plugin „superpowers“ das für mich Brainstorming, Planung und Ausführung regelt.

Claude Code erstellt direkt einen Plan mit Tasks für dich, der die Aufgaben in kleine Schritte zerlegt und immer wieder verifiziert.

Erst die Farbpalette, dann eine einzelne Komponente, dann ein Template. Kleine Schritte, die ich jeweils im Browser prüfen konnte. Als Designrichtung hatte ich „Retro-70s, dunkle Flächen, Akzentfarben“ im Kopf, dazu ein paar hochgeladene Bilder. Es gab aber kein fertiges Mockup, kein Vorbild von einer anderen Website.

Wenn es Arbeitsschritte gab, die gleichzeitig abgehandelt werden konnten, launched Claude Code mehrere kleine Agenten gleichzeitig. Das fühlt sich an wie Magie.

Ich musste die Gutenberg-Block-Syntax nicht vorab lernen. Claude Code kennt die Spezifikation und generiert valides Block-Markup. Ich musste nicht wissen, wie ein wp:group-Block mit Spacing-Presets aussieht.

Ich musste beschreiben können, was ich auf der Seite sehen will. Inzwischen verstehe ich das System aber ziemlich gut, einfach durch die Arbeit damit.

Was dabei entstanden ist

Das Theme hat einen Umfang, der mich selbst überrascht hat.

Das Design-System

Das gesamte visuelle System — Farben, Schriftgrößen, Abstände, Schatten — läuft über eine zentrale Stelle. Claude Code hat das so aufgebaut. Wenn ich eine Farbe ändern will, genügt eine Änderung, der Rest passt sich an. Das klingt selbstverständlich, war für mich aber neu.

Templates und Patterns

Jeder Inhaltstyp hat sein eigenes Layout: Startseite, Blog, einzelne Beiträge, eine Fotografie-Galerie, ein Glossar mit alphabetischer Navigation, Tool-Seiten und Use Cases. Claude Code hat jeden Baustein einzeln gebaut, ich habe ihn im Browser abgenommen — und dann kam der nächste.

Interaktive Tools

Direkt ins Theme eingebaut: ein SVG Designer, ein Glass Card Slide Designer, ein Image Converter, ein LinkedIn Formatter, ein HTML Preview, ein ChatGPT Converter und ein Meta Checker. Claude Code hat die Integration übernommen.

Die meisten dieser Tools hatte ich schon vorher gebaut, auch mit KI. Claude Code hat bei der Restrukturierung geholfen, sie ins neue Design überführt und ein paar Features nachgebessert, die nicht sauber waren.

Der Grundgedanke war: Ich brauche ein Tool ohne Werbung, das genau so funktioniert wie ich will. Also code ich es mir.

Custom Funktionen

Das Theme kann mehr als ein Standard-Theme: eigene Kategorien für Tools und Use Cases, strukturierte Daten für Suchmaschinen, automatische Sitemap-Steuerung und Abkürzungen, die ich immer wieder brauche. Alles von Claude Code auf Zuruf geschrieben — ich musste nicht wissen, wie das geht, nur was ich brauche.

Die Herausforderungen

Der gescheiterte erste Anlauf

Mein erster Versuch ist gescheitert. Ich hatte die Idee von einem YouTube-Video übernommen, eine riesige CLAUDE.md mit über 400 Zeilen angelegt, und bin einfach losgelaufen. Das Ergebnis war ein Durcheinander. Zu viel auf einmal, zu wenig Struktur, keine klare Designrichtung.

Beim zweiten Versuch habe ich zuerst die Ordnerstruktur aufgesetzt, die Konventionen definiert und die CLAUDE.md auf unter 40 Zeilen gekürzt. Statt alles in eine Datei zu packen, verweist sie jetzt auf detaillierte Sub-Dokumente.

Ab da hat Claude Code konsistent gearbeitet, über Sessions hinweg.

Visuelle Feinarbeit

Das CSS hat Claude Code geschrieben. In den meisten Fällen habe ich beschrieben, was ich visuell sehe oder haben will, und Claude Code hat es umgesetzt. Bei Problemen habe ich manchmal gesagt „Das ist wahrscheinlich ein CSS-Fehler“ und Claude Code hat die Stelle gefunden und korrigiert. In einzelnen Fällen habe ich selbst kleine Korrekturen gemacht, aber das waren Ausnahmen.

Die eigentliche Arbeit war zu entscheiden: Wie soll sich eine Card beim Hover anfühlen? Wie schnell soll die Animation sein? Wie verhält sich die mobile Navigation? Was mich am meisten freut: wie haptisch die Buttons und Cards geworden sind, mit einer Klickanimation wie ein dicker physischer Knopf. Das konnte mir kein Tool abnehmen, diese Entscheidungen. Aber die Umsetzung dann schon.

Was ich heute anders machen würde

Ich würde von Anfang an das Projekt besser aufsetzen. Ordnerstruktur, Konventionen, Entwicklungsordner getrennt vom Theme. Jeden Plan, den Claude Code schreibt, abspeichern, um später darauf zurückzukommen.

Und ich würde die richtigen Skills einsetzen. Ich bin inzwischen ein Fan von den superpowers, dem frontend-design Skill von Anthropic und meinem eigenen Skill für meine Brand Voice. Diese Skills machen den Unterschied zwischen „Claude Code generiert irgendwas“ und „Claude Code generiert das Richtige“.

Mit meinem heutigen Verständnis von Gutenberg Blocks würde ich auch an die Erstellung etwas anders herangehen. Aber: immer wieder mit Claude Code. Ich bin richtig süchtig geworden. Habe im Zug, vor dem Einschlafen im Bett und in der Küche beim Kochen gecoded.

Am Ende steht eine Website, die von Elementor unabhängig ist, einen Pagespeed von 99-100 hat und genau so aussieht und funktioniert, wie ich es mir vorgestellt habe. Genau das Theme, auf dem du diesen Text liest.