WordPress-Plugin für HTML, CSS und JavaScript direkt an der Seite

Es gibt diese typischen WordPress-Momente, die sich über Jahre langsam aufstauen. Nicht dramatisch. Nicht katastrophal. Aber irgendwann merkt man: Das hier passt eigentlich nicht mehr zum eigenen Workflow.

Genau so entstand die „RW Page Code Suite“ – ein kleines internes Entwickler-Plugin, das ich gemeinsam mit KI entwickelt habe. Ursprünglich war es nur als pragmatische Lösung gedacht. Mittlerweile ist daraus aber ein erstaunlich sauberes Werkzeug für die tägliche Arbeit geworden.

Und ehrlich gesagt: Ich frage mich inzwischen wirklich, warum ich das nicht schon viel früher gebaut habe.

Das eigentliche Problem: Zu viele Snippets für eine einzige Seite

Ich arbeite auf vielen Seiten inzwischen fast vollständig mit eigenem HTML, CSS und JavaScript. Keine klassischen WordPress-Builder, keine visuellen Konstruktionen, sondern eher rohe, direkt kontrollierbare Seitenlayouts.

Das Problem dabei: WordPress selbst ist für diese Art zu arbeiten nicht wirklich gemacht.

Natürlich gibt es Plugins wie Woody Snippets – und das meine ich ausdrücklich nicht negativ. Woody ist für viele Dinge hervorragend geeignet. Gerade globale Funktionen, systemweite Snippets, kleine Utilities oder schnelle Tests funktionieren damit wirklich gut.

Aber sobald man beginnt, komplette Seiten in eigenem HTML aufzubauen, wird die Struktur irgendwann unübersichtlich.

Plötzlich besteht eine einzige Seite aus:

• dem eigentlichen Seiteninhalt
• einem Woody-Snippet für CSS
• einem Woody-Snippet für JavaScript
• mehreren HTML-Shortcodes
• zusätzlichen Helper-Snippets
• und irgendwelchen kleinen Debug-Blöcken

Das funktioniert technisch – aber irgendwann verliert man den Überblick.

Vor allem dann, wenn man Monate später auf eine Seite zurückkehrt und erst einmal rekonstruieren muss, welche Snippets überhaupt zusammengehören.

Die Idee: Eine komplette Code-Umgebung direkt an der Seite

Die Lösung war letztlich erstaunlich simpel:

Warum nicht einfach ein eigenes Plugin bauen, das pro Seite:

• HTML-Blöcke
• CSS
• JavaScript

direkt innerhalb des Editors verwaltet?

Ohne Builder. Ohne riesiges Framework. Ohne SaaS-Ideen. Ohne visuelle Klick-Orgie.

Einfach nur:

• eine Seite
• ein zentraler Ort
• der komplette Seiten-Code

Genau daraus entstand die „RW Page Code Suite“.

Die Entwicklung mit KI war überraschend produktiv

Besonders spannend war diesmal weniger das Plugin selbst, sondern die Zusammenarbeit mit KI während der Entwicklung.

Die erste Version entstand innerhalb weniger Minuten. Danach begann aber der eigentlich interessante Teil: Architekturentscheidungen, UX-Fragen und kleine technische Fallen.

Zum Beispiel:

• Soll das Plugin eigene Datenbanktabellen verwenden?
• Wie verhindert man kaputte Shortcodes beim Löschen von Blöcken?
• Wie baut man stabile IDs?
• Wie verhindert man Render-Probleme?
• Wie schafft man einen Editor ohne WordPress-Altlasten?
• Wie sieht ein vernünftiger Fallback aus?

Und genau dort wurde das Projekt interessant.

Warum bewusst keine eigene Datenbank verwendet wurde

Ein wichtiger Punkt war die Frage nach der Datenstruktur.

Natürlich hätte man sofort anfangen können, eigene Tabellen zu bauen. Komponenten-Systeme. Dependency-Manager. Versionsverwaltung. Export-Container. Alles theoretisch möglich.

Aber genau das wollte ich bewusst vermeiden.

Die „RW Page Code Suite“ sollte kein gigantisches Framework werden.

Sondern ein Werkzeug.

Deshalb verwendet das Plugin bis heute einfach WordPress-Post-Meta. Direkt, nachvollziehbar und stabil.

Und ehrlich gesagt: Für diesen Einsatzzweck reicht das vollkommen aus.

Die Sache mit den stabilen HTML-Block-IDs

Ein kleines Detail entwickelte sich schnell zu einem der wichtigsten Architekturpunkte des gesamten Plugins.

Ursprünglich arbeiteten die HTML-Blöcke einfach mit fortlaufenden Nummern:

[WPSC-1]
[WPSC-2]
[WPSC-3]

Das Problem daran merkt man oft erst später.

Wenn man Block 1 löscht, verschieben sich plötzlich alle Nummern. Und damit zeigen bestehende Shortcodes unter Umständen auf völlig falsche Inhalte.

Das ist genau die Art von Fehler, die erst Wochen später auffällt – und dann maximal unangenehm wird.

Die Lösung war deshalb ein System mit stabilen internen IDs.

Die sichtbaren Nummern bleiben reine UI-Elemente. Intern besitzt jeder Block aber eine feste Kennung, die sich niemals verändert.

Damit bleiben alle Shortcodes stabil – selbst wenn Blöcke gelöscht, verschoben oder umsortiert werden.

Warum WordPress CodeMirror wieder rausflog

Ein besonders interessantes Kapitel war die Editor-Frage.

Am Anfang wurde testweise der klassische WordPress-CodeMirror eingebunden.

Das Ergebnis war allerdings ernüchternd.

Plötzlich ließen sich bestimmte völlig normale Code-Strukturen nicht mehr sauber speichern. Teilweise griffen WordPress-interne Filter ein. Teilweise entstanden seltsame Sanitizer-Probleme.

Und genau das wollte ich vermeiden.

Wenn ich HTML, JavaScript oder CSS direkt eingebe, dann möchte ich rohe Kontrolle. Keine „hilfreichen“ WordPress-Mechanismen, die plötzlich meinen Code verändern.

Deshalb flog WordPress-CodeMirror wieder komplett raus.

Die Entscheidung für CodeMirror 6

Die endgültige Lösung war CodeMirror 6 – allerdings nicht über WordPress eingebunden, sondern direkt kompiliert und vollständig eigenständig.

Dadurch entstand:

• ein moderner Editor
• ohne WordPress-Abhängigkeiten
• mit sauberem Syntax-Highlighting
• mit deutlich besserer Kontrolle
• und ohne die typischen WordPress-Editor-Probleme

Besonders wichtig war dabei ein sauberer Fallback.

Wenn CM6 nicht geladen wird oder das Bundle fehlt, bleiben die normalen Textareas sichtbar. Das Plugin funktioniert also weiterhin vollständig – nur eben ohne Editor-Komfort.

Genau solche kleinen Sicherheitsmechanismen machen interne Werkzeuge langfristig stabil.

Die Aktiv-Schalter waren wichtiger als gedacht

Eine weitere interessante Erkenntnis waren die Aktiv-Schalter für HTML, CSS und JavaScript.

Technisch könnte man natürlich argumentieren:

„Dann löscht man den Shortcode halt einfach aus dem Inhalt.“

In der Praxis ist das aber extrem unkomfortabel.

Gerade bei Tests, Debugging oder Experimenten möchte man Bereiche schnell deaktivieren können, ohne Inhalte zu verlieren oder später wieder zusammensuchen zu müssen.

Deshalb geben deaktivierte HTML-Blöcke einfach einen leeren String zurück. Die Shortcodes bleiben bestehen, rendern aber nichts mehr.

Das klingt banal – ist im Alltag aber unglaublich praktisch.

Die Oberfläche wurde am Ende überraschend angenehm

Mit dem CM6-Editor bekam das Plugin plötzlich eine völlig andere Wirkung.

Es fühlte sich nicht mehr wie eine klassische WordPress-Metabox an, sondern eher wie ein kleines internes Entwickler-Werkzeug.

Ruhige Syntaxfarben. Große Editorflächen. HTML zuerst, danach CSS und JavaScript. Keine visuelle Überladung.

Und genau das war eigentlich das Ziel.

Nicht möglichst viele Features.

Sondern möglichst wenig Reibung beim Arbeiten.

Was die RW Page Code Suite heute macht

Aktuell bietet das Plugin unter anderem:

• mehrere stabile HTML-Blöcke pro Seite
• dynamische Shortcodes
• CM6-Integration
• Fallback-System bei fehlendem Editor-Bundle
• separate CSS- und JavaScript-Bereiche
• Aktiv-Schalter pro Bereich
• stabile interne Block-IDs
• automatische Synchronisierung vor dem Speichern
• Shortcode-Stabilität beim Löschen und Umsortieren
• saubere WordPress-nahe Architektur ohne Framework-Overkill

Fazit

Die spannendsten Werkzeuge entstehen oft nicht aus Business-Plänen oder großen SaaS-Ideen, sondern aus echter täglicher Reibung.

Die „RW Page Code Suite“ war ursprünglich einfach nur ein Versuch, den eigenen Workflow sauberer zu machen.

Inzwischen ist daraus aber ein erstaunlich stabiles internes Entwickler-Tool geworden, das genau das tut, was es soll:

HTML, CSS und JavaScript direkt dort verwalten, wo sie hingehören – an der Seite selbst.

Ohne Builder-Hölle. Ohne Snippet-Chaos. Ohne künstliche Komplexität.

Und genau deshalb wird dieses kleine Plugin vermutlich deutlich länger im Einsatz bleiben, als ursprünglich geplant.

Download

Die aktuelle Version der „RW Page Code Suite“ kann hier direkt heruntergeladen werden:

Download ZIP: Hier herunterladen. Viel Freude damit.