Anleitung: WordPress-Plugin-Entwicklungsumgebung unter Windows 11 mit Docker, Cursor und ChatGPT

Diese Schritt-für-Schritt-Anleitung zeigt dir, wie du als Anfänger eine lokale WordPress-Plugin-Entwicklungsumgebung unter Windows 11 einrichtest. Wir nutzen dafür Docker (für WordPress, PHP und MySQL), die KI-gestützte Entwicklungsumgebung Cursor sowie ChatGPT zur Unterstützung. Am Ende erstellen wir ein einfaches WordPress-Plugin und laden es auf GitHub hoch. Jede Etappe wird ausführlich erklärt – Vorkenntnisse zu Docker oder WordPress-Entwicklung sind nicht erforderlich.

1. Docker auf Windows 11 installieren und einrichten

Damit wir WordPress in einem isolierten Container laufen lassen können, installieren wir zunächst Docker auf deinem Windows 11-System. Docker ermöglicht es, Software (wie WordPress und MySQL) in Containern auszuführen, die alle Abhängigkeiten mitbringen. Unter Windows 11 verwendet Docker das Windows Subsystem for Linux (WSL 2) im Hintergrund für optimale Leistung. Gehe wie folgt vor:

Schritt 1: Überprüfe Voraussetzungen und aktiviere WSL 2 (Windows Subsystem for Linux)

Schritt 2: Docker Desktop für Windows installieren

  • Lade Docker Desktop für Windows von der offiziellen Website herunter (Docker mit WSL 2 auf Windows 11 einrichten – Developbyter Blog). Öffne dazu die Seite https://www.docker.com in deinem Browser und klicke auf Get Docker (die Seite erkennt dein Betriebssystem und bietet den passenden Installer an). Speichere die Docker Desktop Installer.exe Datei auf deinem PC.
  • Führe die Installationsdatei aus und folge den Setup-Anweisungen. Während der Installation wirst du eventuell gefragt, ob du die WSL 2-basierten Engine verwenden möchtest – stelle sicher, dass diese Option aktiviert ist (sie ist in aktuellen Versionen standardmäßig gesetzt) (Docker mit WSL 2 auf Windows 11 einrichten – Developbyter Blog). Damit nutzt Docker die zuvor eingerichtete WSL 2-Umgebung für Container.
  • Nach erfolgreicher Installation starte Docker Desktop (z.B. über das Startmenü). Docker Desktop sollte im Hintergrund Docker Engine starten. Du siehst unten rechts in der Taskleiste ein Docker-Symbol (Wal-Logo). Warte, bis dort „Docker is running“ o. Ä. angezeigt wird.

Schritt 3: Docker für WSL konfigurieren und testen

  • Öffne Docker Desktop und klicke auf das Zahnrad-Symbol (Einstellungen). Unter General überprüfe, ob „Use the WSL 2 based engine“ aktiviert ist (Docker mit WSL 2 auf Windows 11 einrichten – Developbyter Blog).
  • Gehe in den Einstellungen zu Resources > WSL Integration. Dort solltest du die installierte Ubuntu-Distribution sehen. Aktiviere die Integration für Ubuntu (Schieberegler einschalten) (Docker mit WSL 2 auf Windows 11 einrichten – Developbyter Blog), damit Docker mit dieser Distribution zusammenarbeitet.
  • Bestätige die Einstellungen und schließe das Fenster.
  • Teste nun die Docker-Installation: Öffne ein Terminal (PowerShell oder die Eingabeaufforderung, kein Administrator nötig) und führe den Befehl aus: 
    docker --version

    Dieser sollte eine Docker-Versionsnummer anzeigen (Docker mit WSL 2 auf Windows 11 einrichten – Developbyter Blog), was bedeutet, dass Docker über die Kommandozeile erreichbar ist.

  • Führe anschließend einen kurzen Testcontainer aus: 
    docker run hello-world

    Docker lädt dabei ein kleines Test-Image herunter und startet es. Wenn alles korrekt eingerichtet ist, siehst du eine Ausgabe, die mit „Hello from Docker!“ beginnt (Docker mit WSL 2 auf Windows 11 einrichten – Developbyter Blog). Glückwunsch – Docker läuft nun unter Windows 11!

Docker ist jetzt bereit. Im nächsten Schritt richten wir eine lokale WordPress-Umgebung in Docker ein.

2. Lokale WordPress-Entwicklungsumgebung mit Docker einrichten

Jetzt verwenden wir Docker, um WordPress samt Datenbank lokal laufen zu lassen. Dazu erstellen wir einen Docker-Compose-Konfigurationsdatei, die zwei Container aufsetzt: einen für MySQL (die Datenbank) und einen für WordPress (PHP mit Webserver). Beide Container befinden sich im selben virtuellen Netzwerk und können miteinander kommunizieren. Wir werden außerdem einen Ordner für Plugins vom Host-System in den WordPress-Container einbinden, damit wir unsere Plugin-Dateien bequem mit dem Editor bearbeiten können.

Folge diesen Schritten:

Schritt 1: Projektverzeichnis anlegen
Lege ein neues Verzeichnis für deine Entwicklungsumgebung an, z.B. wordpress-dev auf deinem Desktop oder in deinen Dokumenten. Dieses Verzeichnis wird alle relevanten Dateien enthalten (z.B. die Docker-Compose-Datei und später unseren Plugin-Code).

Schritt 2: Docker-Compose Datei erstellen
In dem neuen Verzeichnis erstellst du eine Datei namens docker-compose.yml (achte darauf, dass sie die Endung .yml hat). Öffne die Datei mit einem Texteditor (z.B. Notepad oder einem Code-Editor). Füge folgenden Inhalt ein:

version: '3.9'
services:
  db:
    image: mysql:8.0             # oder mariadb, je nach Vorliebe
    container_name: wp-db
    restart: unless-stopped
    environment:
      - MYSQL_ROOT_PASSWORD=wordpress    # Passwort für den MySQL-Root-Benutzer
      - MYSQL_DATABASE=wordpress         # Name der Datenbank, die erstellt werden soll
      - MYSQL_USER=wordpress            # Benutzer, den WordPress zum Anmelden nutzt
      - MYSQL_PASSWORD=wordpress        # Passwort für den obigen Benutzer
    volumes:
      - db_data:/var/lib/mysql          # Persistente Speicherung der Datenbankdaten

  wordpress:
    image: wordpress:latest      # neuestes WordPress-Image mit integriertem Apache/PHP
    container_name: wp-site
    depends_on:
      - db                       # erst DB starten, dann WP
    restart: unless-stopped
    ports:
      - "8000:80"                # WordPress auf localhost:8000 verfügbar machen
    environment:
      - WORDPRESS_DB_HOST=db:3306        # Hostname und Port der DB (Service-Name von db)
      - WORDPRESS_DB_USER=wordpress      # muss mit MYSQL_USER übereinstimmen
      - WORDPRESS_DB_PASSWORD=wordpress  # muss mit MYSQL_PASSWORD übereinstimmen
      - WORDPRESS_DB_NAME=wordpress      # muss mit MYSQL_DATABASE übereinstimmen
    volumes:
      - ./plugins:/var/www/html/wp-content/plugins  # lokale Plugins ins Container einbinden

volumes:
  db_data: {}    # definiert das benannte Volume für die DB-Daten

Speichere die Datei. Schauen wir uns an, was diese Konfiguration bedeutet:

  • Wir definieren zwei Services: db für die MySQL-Datenbank und wordpress für die WordPress-Anwendung.
  • MySQL-Container (db): Nutzt das offizielle mysql:8.0 Image. Beim Start legt er eine Datenbank wordpress an und einen Benutzer wordpress mit Passwort wordpress (diese einfachen Zugangsdaten reichen für unsere lokale Entwicklung). Der Root-Zugang zur DB bekommt ebenfalls ein Passwort (wordpress). Alle Daten der DB werden im Volume db_data gespeichert, damit sie bei einem Neustart der Container erhalten bleiben (awesome-compose/official-documentation-samples/wordpress/README.md at master · docker/awesome-compose · GitHub) (d.h. unser Datenbankinhalt bleibt bestehen und WordPress verliert nichts).
  • WordPress-Container (wordpress): Nutzt das neueste WordPress-Image, das bereits einen Apache-Webserver und PHP enthält. Dieser Container wartet, bis die DB bereit ist (depends_on: db). Er lauscht innerhalb des Containers auf Port 80. Durch ports: "8000:80" wird Port 80 des Containers nach außen auf Port 8000 unseres Rechners gemappt – so können wir WordPress später über http://localhost:8000 im Browser aufrufen. Die Umgebungsvariablen (WORDPRESS_DB_*) geben die Datenbank-Verbindungsdetails an, damit WordPress die MySQL-Datenbank findet. Wichtig: WORDPRESS_DB_HOST ist auf db:3306 gesetzt, weil unser DB-Service im Compose-Netzwerk den Hostnamen „db“ hat.
  • Plugins-Verzeichnis einbinden: Die Zeile - ./plugins:/var/www/html/wp-content/plugins bindet einen lokalen Ordner plugins (den wir noch erstellen werden) in das Plugin-Verzeichnis der WordPress-Installation im Container ein. Dadurch können wir Plugins auf dem Host bearbeiten und WordPress sieht die Änderungen sofort. Wir beschränken uns bewusst darauf, nur den Plugin-Ordner einzubinden und nicht das gesamte WordPress-Verzeichnis. Das hat den Grund, dass die WordPress-Core-Dateien nicht direkt bearbeitet werden sollten, wenn man Docker nutzt (wordpress – Using volumes in Docker to access container filesystem – Stack Overflow). Jedes Mal, wenn du docker-compose up ausführst, stellt Docker sicher, dass die WordPress-Core-Dateien im Container aktuell sind; eigene Änderungen dort würden überschrieben (wordpress – Using volumes in Docker to access container filesystem – Stack Overflow). Daher ist es Best Practice, nur dynamische Inhalte (wie Plugins, Themes oder Uploads) vom Host einzubinden (wordpress – Using volumes in Docker to access container filesystem – Stack Overflow). Unsere Plugin-Entwicklung findet also komplett im Ordner ./plugins statt, und dieser wird vom Container verwendet.

Schritt 3: Plugins-Ordner erstellen
Erzeuge in deinem Projektverzeichnis den Ordner plugins (falls du das obige docker-compose.yml wörtlich übernommen hast, achte auf korrekte Schreibweise: in YAML wird zwischen Groß-/Kleinschreibung unterschieden, also „plugins“ in Kleinbuchstaben). Dieser Ordner ist zunächst leer, wird aber später unser Plugin-Code enthalten. Durch die Volume-Direktive wird dieser leere Ordner den Container-Inhalt unter wp-content/plugins überlagern. Beachte: Standardmäßig liefert WordPress ein oder zwei Beispiel-Plugins (wie „Hello Dolly“). Diese wären im Container vorinstalliert, werden aber ausgeblendet, da wir das gesamte Plugin-Verzeichnis überschreiben. Das ist in Ordnung, da wir eigene Plugins entwickeln wollen. (Du kannst ggf. das Hello-Dolly-Plugin später manuell in unseren Ordner kopieren, falls du es benötigst, aber es ist nicht notwendig.)

Schritt 4: WordPress-Container starten
Jetzt wird es Zeit, unsere Container hochzufahren. Öffne ein Terminal (PowerShell oder die Eingabeaufforderung, oder ein Terminal in deiner IDE, falls verfügbar) und navigiere in das Projektverzeichnis wordpress-dev (dort, wo sich die docker-compose.yml befindet). Führe dann den Befehl aus:

docker-compose up -d

Der Parameter -d startet die Container im Hintergrund (detached mode), sodass dein Terminal nicht blockiert wird (How To Install WordPress With Docker Compose | DigitalOcean). Docker wird nun die benötigten Images herunterladen (WordPress und MySQL, das kann einige Minuten dauern beim ersten Mal) und anschließend beide Container starten. Du kannst mit docker-compose ps prüfen, ob beide Services laufen (How To Install WordPress With Docker Compose | DigitalOcean). Die Ausgabe sollte etwa so aussehen, dass für wp-db der Status „Up“ mit Port 3306 angezeigt wird und für wp-site der Status „Up“ mit Port 80->8000 (How To Install WordPress With Docker Compose | DigitalOcean).

Schritt 5: WordPress einrichten
Sobald die Container laufen, öffne deinen Webbrowser und rufe http://localhost:8000 auf. Du solltest die WordPress Installationsseite sehen. Wähle deine Sprache und klicke auf „Los geht’s“ (bei neueren WordPress-Versionen kann es sein, dass der Installationsprozess automatisch startet, sobald die DB erreichbar ist). Gib dann die benötigten Informationen für die Installation ein:

  • Seitentitel – einen beliebigen Namen für deine Testseite (z.B. „Plugin Dev“).
  • Benutzername und Passwort für den WordPress-Administrator (wähle etwas Einfaches wie „admin“/„admin123“ für diese lokale Umgebung, aber merke dir die Daten).
  • E-Mail-Adresse – kann eine Dummy-Adresse sein.
  • Klicke auf „WordPress installieren“.

Nach wenigen Sekunden sollte die Meldung kommen, dass WordPress installiert ist. Klicke auf „Anmelden“ und logge dich mit den gerade gewählten Admin-Zugangsdaten in das WordPress-Dashboard ein.

Schritt 6: Überprüfen der Laufenden Umgebung
Du hast nun eine vollständige WordPress-Installation in Docker laufen!
Gehe im Admin-Dashboard auf „Plugins“. Dort sollten derzeit nur die Standard-Plugins von WordPress erscheinen (falls WordPress keine vorinstallierten Plugins mehr anzeigt, könnte die Liste auch leer sein, weil wir das Plugin-Verzeichnis gemountet haben und es noch leer ist). Keine Sorge, wir werden gleich ein eigenes Plugin hinzufügen.

Tipp: Die MySQL-Datenbank ist innerhalb des Containers erreichbar. Falls du z.B. phpMyAdmin zur Verwaltung nutzen möchtest, könntest du einen zusätzlichen phpMyAdmin-Container im Compose hinzufügen. Für unsere Zwecke (einfaches Plugin) ist das aber nicht zwingend nötig.

Schritt 7: Container verwalten
Solange du an deinem Projekt arbeitest, können die Docker-Container laufen. Wenn du eine Pause machst oder den Rechner neu startest, kannst du die Container stoppen:

docker-compose down

Dieser Befehl stoppt und entfernt die Container, aber dank unserer definierten Volumes bleiben die WordPress-Daten und die MySQL-Datenbank erhalten. Wenn du später weiterarbeiten willst, navigiere wieder ins Projektverzeichnis und führe docker-compose up -d aus – die Seite ist dann im selben Zustand wie vorher (Beiträge, Einstellungen und Plugins bleiben bestehe (awesome-compose/official-documentation-samples/wordpress/README.md at master · docker/awesome-compose · GitHub)1】.

Damit ist die lokale WordPress-Umgebung einsatzbereit. Nun widmen wir uns der Entwicklungsumgebung und den Tools, um effektiv ein Plugin zu erstellen.

3. Cursor als Entwicklungsumgebung verwenden (Installation & Agent/Composer-Modus)

Für die Plugin-Entwicklung nutzen wir Cursor, einen KI-unterstützten Code-Editor. Cursor basiert auf Visual Studio Code und integriert KI (wie ChatGPT) direkt in den Edit (Cursor AI: Your 2024 Installation & Review Guide | HackerNoon)8】. Das Tool bietet intelligente Autovervollständigung, eine Chat-Oberfläche für Fragen und sogar einen Agent-Modus, der komplexe Aufgaben in deinem Code übernehmen kann. Die Nutzung von Cursor ist kostenlos, und es läuft unter Windows, Linux und Mac (Cursor AI: Your 2024 Installation & Review Guide | HackerNoon)9】.

Cursor installieren (Windows 11)

  • Download: Besuche die offizielle Cursor-Website cursor.com. In der Regel erkennt die Seite dein Betriebssystem automatisch und bietet den passenden Download (Cursor AI: Your 2024 Installation & Review Guide | HackerNoon)1】. Für Windows wird eine .exe-Installationsdatei bereitgestellt. Lade diese herunter. (Alternativ findest du den Download auch über Softwareportale oder das Cursor-GitHub-Projekt.)
  • Installation: Führe die heruntergeladene Cursor-Setup-Datei aus. Der Installationsprozess ist unkompliziert – klicke dich durch die Schritte. (Eventuell musst du zustimmen, dass das Programm Änderungen am System vornehmen darf.)
  • Erster Start: Starte Cursor nach der Installation. Du wirst eine Oberfläche sehen, die Visual Studio Code ähnelt. Möglicherweise bietet Cursor an, sich mit einem OpenAI-API-Schlüssel zu verbinden oder dein OpenAI-Konto zu nutzen, um bessere KI-Modelle (wie GPT-4) zu verwenden. Für den Anfang kannst du aber die voreingestellten Modelle nutzen, die Cursor mitliefert. (Hinweis: In den Einstellungen von Cursor kannst du später eigene API Keys hinterlegen, um z.B. GPT-4 zu nutzen, falls du einen Zugang hast.)

Projekt in Cursor öffnen

Wir öffnen nun unser WordPress-Projekt in Cursor, damit wir die Plugin-Dateien bearbeiten können:

  • Klicke in Cursor auf „File“ -> „Open Folder“ (Ordner öffnen). Navigiere zum Ordner wordpress-dev (dein Projektverzeichnis) und wähle es aus. Das Projekt wird in Cursor geladen. In der linken Seitenleiste siehst du den Ordnerinhalt: Die docker-compose.yml und den Ordner plugins (der noch leer ist).
  • Du kannst die docker-compose.yml in Cursor öffnen, der Syntax-Highlighting für YAML anzeigt. Für die Plugin-Entwicklung ist aber vor allem der plugins-Ordner relevant. Darin werden wir gleich eine neue Datei anlegen.

KI-Unterstützung in Cursor nutzen

Cursor bietet zwei Hauptwege, die KI zu nutzen: den Chat-Modus und den Composer (Agent) Modus.

  • Chat-Fenster: Ähnlich wie ChatGPT im Browser hat Cursor ein Chat-Fenster integriert. Drücke Ctrl+L (oder über Menü View -> Chat), um das Chat-Fenster zu öffn (Cursor AI: A Guide With 10 Practical Examples | DataCamp)2】. Dieses erscheint typischerweise seitlich. Du kannst hier in natürlicher Sprache Fragen stellen oder Befehle eingeben, z.B. „Erkläre mir, was die Funktion X in meinem Code macht“ oder „Schreibe eine Funktion, die Y tut“. Wenn die KI Code als Antwort generiert, kannst du diesen prüfen und per Klick auf „Apply“ direkt in deine Datei übernehm (Cursor AI: A Guide With 10 Practical Examples | DataCamp)9】. Das Chat-Fenster ist ideal, um Hilfe zu einzelnen Problemen zu bekommen oder kleine Codeänderungen durchzuführen, während du den Editor nicht verlässt. Du kannst auch Code aus deinen Dateien ins Chat-Fenster ziehen oder kopieren, damit die KI spezifisch darauf eingehen kann.
  • Autovervollständigung: Beim Tippen von Code wird Cursor mithilfe der KI kontextbasierte Vorschläge machen. Diese erscheinen ausgegraut im Editor und du kannst sie durch Drücken der Tab-Taste übernehm (Cursor AI: A Guide With 10 Practical Examples | DataCamp)2】. Beispielsweise, wenn du anfängst function my_plugin_ zu schreiben und Klammern öffnest, könnte Cursor eine komplette Funktionsdefinition vorschlagen. Auch Kommentare in natürlicher Sprache können Vorschläge auslösen (etwa wenn du schreibst // loop through posts, könnte Cursor den passenden PHP-Code vorschlage (Cursor AI: A Guide With 10 Practical Examples | DataCamp)1】.
  • Agent/Composer-Modus: Das vielleicht leistungsfähigste Feature ist der Composer-Agent. Dieser Modus erlaubt der KI, größere Aufgaben end-to-end auszuführen – sie kann eigenständig mehrere Schritte durchführen, sogar neue Dateien erstellen oder Terminal-Befehle ausführen, um dein Ziel zu erreich (Cursor – Composer)7】. Um den Agent-Modus zu nutzen, öffne das Composer-Fenster (Shortcut meistens Ctrl+I oder über das „Zauberstab“-Symbol). Oben im Composer kannst du zwischen Normal und Agent umschalt (Cursor – Composer)3】. Wähle „Agent“. (Die Entwickler beschreiben: *„Cursor’s agent mode can complete tasks end to end… Try it out by selecting ‚agent‘ in Composer. (Features | Cursor – The AI Code Editor)6】). Jetzt kannst du der KI ein Ziel vorgeben, z.B.: „Erstelle ein neues Plugin-Verzeichnis mit einer PHP-Datei, die einen Text am Ende jedes Beitrags ausgibt.“ Der Agent wird diese Anweisung zerlegen und versuchen, sie Schritt für Schritt umzusetzen. Er kann z.B. einen neuen Ordner und eine Datei anlegen, Code generieren und diesen einfügen. Du siehst dabei live, welche Aktionen er durchführt, und kannst sie überwachen und bestätigen. Der Agent nutzt dazu fortgeschrittenes Reasoning (überlegt Zwischenschritte) und hat sogar Zugriff auf einen internen Terminal, um z.B. grep auszuführen oder den Code zu test (Cursor – Composer)7】. Beachte: Diese Funktion ist sehr mächtig, aber noch Beta – manchmal braucht sie etwas Nachhilfe oder produziert nicht sofort perfekten Code. Sei also bereit einzugreifen oder mehrere Anläufe zu nehmen.

Praktische Anwendung von Cursor:
Stellen wir uns vor, du möchtest eine neue PHP-Datei für dein Plugin erstellen und gleich einen Grundrahmen darin haben. Mit Cursor könntest du das auf verschiedene Weise tun:

  • Manuell + Autocomplete: Lege die Datei an (Rechtsklick auf plugins Ordner > New File > mein-plugin.php). Beginne zu tippen: 
    <?php
/**
 * Plugin Name: Mein Plugin
 * Description:

    Sobald du Plugin Name: geschrieben hast, wird Cursor eventuell vorschlagen, die restlichen Header-Felder auszufüllen. Du kannst das annehmen oder selbst vervollständigen. Anschließend könntest du einen Kommentar schreiben, was du tun willst, z.B. // fügt Text zum Content hinzu – Cursor erkennt die Absicht und könnte direkt eine Funktion mit add_filter('the_content', ...) vorschlagen. So hilft dir die Autovervollständigung.

  • Chat nutzen: Alternativ hättest du auch im Chat-Fenster schreiben können: „Schreibe den Code für ein WordPress-Plugin, das ‚Hallo Welt‘ am Ende jedes Blogposts anzeigt.“ Die KI würde daraufhin vermutlich einen PHP-Codeblock mit Plugin-Header und einer entsprechenden Funktion liefern. Du könntest auf Apply klicken, und Cursor würde fragen, wohin die Datei gespeichert werden soll – du gibst den Pfad im plugins Ordner an. Schon hättest du das Grundgerüst fertig, ohne selbst Code tippen zu müssen.
  • Agent nutzen: Mit dem Agent-Modus könntest du sogar noch höher ansetzen: Im Composer (Agent) könntest du als Ziel formulieren: „Create a WordPress plugin named HelloWorld that appends ‚Hello World‘ to post content.“ Der Agent würde dann eigenständig eine neue Plugin-Datei erstellen mit dem passenden Code. Du müsstest das Ergebnis dann überprüfen und ggf. anpassen. (Der Agent spart dir Tipparbeit, aber es ist wichtig, zu verstehen, was er tut – er soll dich unterstützen, nicht vollständig ersetzen.)

Zusammenfassend: Cursor ist deine “Schaltzentrale” fürs Coden. Du hast einerseits die gewohnte Editorfunktionalität, andererseits ChatGPT-artige Hilfe immer griffbereit. So kannst du im selben Tool programmieren, KI-Ratschläge einholen und Code generieren lassen, was deinen Workflow beschleunigt.

Im nächsten Abschnitt schauen wir uns an, wie wir ChatGPT (bzw. die KI in Cursor oder im Browser) gezielt für WordPress-Plugin-Entwicklung einsetzen – mit ein paar Beispielen.

4. Nutzung von ChatGPT zur Unterstützung bei der Plugin-Entwicklung

Bei Programmierfragen oder wenn du nicht weiterweißt, ist ChatGPT ein wertvoller Helfer. Ob direkt über die ChatGPT-Weboberfläche im Browser oder integriert in Cursor – die KI kann Erklärungen liefern, Codebeispiele generieren und sogar ganze Plugins entwerfen. Hier erfährst du, wie du ChatGPT effektiv nutzt und worauf du achten solltest.

Wofür kann ChatGPT eingesetzt werden?

  • Verständnisfragen klären: Wenn du z.B. neu bei WordPress bist, kannst du Fragen stellen wie „Was ist ein WordPress-Hook und wie funktioniert er?“ oder „Wofür steht die Funktion add_filter?“. ChatGPT gibt dir in Sekundenschnelle eine verständliche Erklärung.
  • Code-Snippets und Beispiele: Möchtest du wissen, wie man eine bestimmte Aufgabe in einem Plugin umsetzt, frage einfach. Beispiel: „Wie füge ich einem WordPress-Post per Plugin am Ende einen Text hinzu?“. ChatGPT könnte dir antworten: „Du kannst den the_content Filter benutzen. Hier ein Beispiel:“ und würde dir ein Code-Snippet zeigen, das genau das tut – nämlich eine Funktion definieren, die $content modifiziert, und dann add_filter('the_content', 'deine_funktion'). Solche konkreten Hinweise sind Gold wert, wenn man die WordPress-API noch lernt.
  • Fehleranalyse: Falls dein Plugin einen Fehler wirft oder nicht wie erwartet funktioniert, kannst du ChatGPT um Hilfe bitten. Kopiere die Fehlermeldung oder beschreibe das Problem (z.B. „Ich erhalte einen ‚headers already sent‘ Fehler, nachdem ich mein Plugin aktiviert habe’“). Oft kennt ChatGPT typische Ursachen und Lösungsmöglichkeiten und kann dir Schritte zur Behebung nennen.
  • Ideen und Optimierungen: Nicht nur Probleme – du kannst ChatGPT auch nach Vorschlägen fragen. Etwa: „Welche Sicherheitsmaßnahmen sollte ich in meinem Plugin beachten?“ oder „Hast du eine Idee, wie ich Feature X umsetzen kann?“. Die KI kann Denkanstöße liefern, an die du vielleicht nicht gedacht hast (z.B. Verwendung eines Nonce für Formularverarbeitung, etc.).

Praktische Beispiele

Schauen wir uns zwei beispielhafte Dialoge mit ChatGPT an, die dich bei der Plugin-Entwicklung unterstützen:

Beispiel 1: Einfaches Code-Beispiel erfragen
Du: „Ich möchte, dass mein Plugin an jeden Blogpost einen Disclaimer anhängt. Wie kann ich das machen?“
ChatGPT: „Du kannst in WordPress den Filter-Hook the_content verwenden. Dieser erlaubt es, den Beitragsinhalt zu verändern, bevor er ausgegeben wi (Is it possible to add a filter to the_content() to group the content …) (How to Use WordPress add_filter + Useful Examples)7】. Du würdest eine Funktion schreiben, die an den Inhalt einen Text anfügt, und diese Funktion mit add_filter registrieren. Zum Beispiel:

function add_disclaimer($content) {
    // Hänge Disclaimer nur an Beiträge (nicht an Seiten) an
    if (is_single()) {
        $content .= '<p><em>Alle Angaben ohne Gewähr.</em></p>';
    }
    return $content;
}
add_filter('the_content', 'add_disclaimer');

“Dieses Snippet prüft mit is_single(), ob der Inhalt ein einzelner Blogpost ist, und hängt dann einen Disclaimer-Text in Kursivschrift an. Du kannst die Bedingung weglassen, wenn es überall erscheinen soll. Platziere diesen Code in deinem Plugin nach dem Plugin-Header.“

Wie du siehst, hat ChatGPT nicht nur die allgemeine Idee geliefert, sondern gleich einen fertigen Code-Vorschlag mit Erklärung. Tatsächlich ähnelt dieser Vorschlag sehr dem, was wir benötigen. (Das Beispiel benutzt is_single(), um den Code nur auf Einzelansicht von Beiträgen auszuführen – je nach Anforderung kannst du das anpassen.)

Beispiel 2: Ganzes Plugin generieren lassen
ChatGPT kann auch komplette Plugin-Strukturen erstellen. Angenommen, du bittest: „Schreibe ein vollständiges WordPress-Plugin namens ‚Simple Admin Notice‘, das nach Aktivierung im Admin-Dashboard einen ‚Hello World‘-Hinweis anzeigt.“ ChatGPT würde daraufhin wahrscheinlich folgendes liefern:

  • Einen Kommentarblock mit Plugin-Header (Plugin Name: Simple Admin Notice, Beschreibung, Version, Author etc.).
  • PHP-Code mit einer Funktion, die den Admin Notice ausgibt (z.B. mittels add_action('admin_notices', ...)).
  • Eventuell eine register_activation_hook-Funktion, um die Notice nur einmal bei Aktivierung zu zeigen.

Tatsächlich haben Entwickler berichtet, dass ChatGPT nach solch einer Aufforderung in wenigen Minuten ein funktionierendes Plugin-Gerüst mit ~70 Zeilen Code erstellt hat – inklusive Standard-Plugin-Header und einer Einstellungsseite im Adm (So, I Built a WordPress Plugin With ChatGPT – The WP Minute)7】. Das zeigt, wie mächtig ein einzelner gut formulierter Prompt sein kann. Wichtig ist jedoch, das Ergebnis zu prüfen. In dem erwähnten Fall hat ChatGPT sogar WordPress-Best Practices wie die Verwendung von Sanitisierungsfunktionen beacht (So, I Built a WordPress Plugin With ChatGPT – The WP Minute)9】, dennoch sollte man stets kontrollieren, ob der Code sicher und sinnvoll ist, bevor man ihn einsetzt.

Tipp zur Nutzung von ChatGPT: Formuliere deine Prompts (Fragen/Aufgaben) so klar und präzise wie möglich. Je genauer du beschreibst, was du willst, desto besser kann die KI dir helf (So, I Built a WordPress Plugin With ChatGPT – The WP Minute)6】. Statt „Ich brauche Hilfe bei einem Plugin“ könntest du schreiben „Mein Plugin soll X machen, welche Funktionen von WordPress kann ich dafür nutzen?“. Du kannst ChatGPT auch schrittweise füttern: zunächst um eine Idee bitten, dann Details nachfragen, dann um konkreten Code bitten. Dieser iterative Prozess führt oft zu den besten Ergebnissen – ähnlich wie wenn du mit einem menschlichen Mentor arbeitest.

Zusammengefasst ist ChatGPT eine hervorragende Ergänzung: Es beschleunigt den Lernprozess, löst Verständnisprobleme und liefert Boilerplate-Code, den du anpassen kannst. Dennoch ersetzt es nicht das eigene Testen und Verstehen. Nutze die Vorschläge als Grundlage, lerne daraus und verbessere deinen Code damit.

Nun, da unsere Umgebung steht und wir KI-Unterstützung nutzen können, lass uns konkret werden: Wir entwickeln ein einfaches Plugin Schritt für Schritt.

5. Entwicklung eines einfachen WordPress-Plugins (Schritt für Schritt)

Als praktisches Beispiel erstellen wir jetzt ein kleines Plugin in unserer Umgebung. Dieses Plugin soll – passend zu den obigen Beispielen – an das Ende jedes Blogbeitrags einen kurzen Text anhängen (z.B. einen Gruß oder Disclaimer). Wir gehen den Prozess Schritt für Schritt durch, damit du siehst, wie ein Plugin strukturiert ist.

Schritt 1: Plugin-Ordner und -Datei anlegen
Wechsle in deinem Projekt zum Ordner wordpress-dev/plugins. Lege dort einen neuen Unterordner für dein Plugin an, beispielsweise my-footer-text (Plugins können entweder direkt als einzelne PHP-Datei im plugins-Verzeichnis liegen oder – üblicher in moderner Entwicklung – in einem eigenen Unterordner mit einer Hauptdatei). Wir verwenden einen Unterordner, um bei komplexeren Plugins später z.B. weitere Dateien (Bilder, CSS, etc.) sauber darin ablegen zu können.

Öffne den neuen Ordner my-footer-text und erstelle darin eine PHP-Datei, z.B. my-footer-text.php. (Der Dateiname kann grundsätzlich beliebig sein, typisch ist aber gleich oder ähnlich dem Ordnernamen.)

Schritt 2: Plugin-Kopf (Header) hinzufügen
Öffne die leere PHP-Datei in Cursor. Zunächst braucht jedes WordPress-Plugin einen speziellen Kommentarblock am Anfang, der Meta-Informationen enthält. WordPress erkennt eine Datei nur dann als Plugin, wenn dieser Header-Kommentar vorhanden ist und mindestens den Plugin-Namen enthä (Header Requirements – Plugin Handbook | Developer.WordPress.org)7】. Füge nun folgendes in die Datei ein:

<?php
/**
 * Plugin Name: My Footer Text
 * Description: Dieses Plugin fügt am Ende jedes Blogbeitrags einen individuellen Text hinzu.
 * Version: 1.0
 * Author: Dein Name
 * Author URI: https://example.com
 */

Speichere die Datei. Der PHP-Tag <?php am Anfang ist wichtig. Alles innerhalb des /** … */ Kommentarblocks sind die Plugin-Header-Felder. Wir haben hier die wichtigsten Felder ausgefüllt:

  • Plugin Name – der Name des Plugins, so wie er im WordPress-Admin unter Plugins erscheinen soll (erforderlich).
  • Description – eine kurze Beschreibung, was das Plugin tut.
  • Version – die Plugin-Version (Format beliebig, z.B. 1.0).
  • Author und Author URI – dein Name und (optional) eine Website von dir.
    (Es gibt noch weitere mögliche Felder wie License, Text Domain etc. Diese sind für ein einfaches Plugin nicht zwingend nötig, aber du kannst sie ergänzen. Wichtig ist mindestens der Plugin-Na (Header Requirements – Plugin Handbook | Developer.WordPress.org)7】.)

Schritt 3: Plugin-Funktionalität implementieren
Unterhalb des Kommentarblocks beginnen wir nun mit dem eigentlichen PHP-Code des Plugins. Unser Ziel: Text an Beitragsinhalte anhängen. Dafür nutzen wir, wie zuvor gelernt, den Filter-Hook the_content. Schreib nun in die Datei (unterhalb des Headers):

// Fügt an das Ende des Inhalts eines Blogposts einen Text an
function mft_add_footer_text($content) {
    // Prüfe, ob es ein Einzelartikel ist (kein Auszug auf Übersichtsseiten)
    if (is_single()) {
        $footer_text = "<p><em>Danke fürs Lesen!</em></p>";
        $content .= $footer_text;
    }
    return $content;
}
add_filter('the_content', 'mft_add_footer_text');

Speichere die Datei. Schauen wir uns den Code an:

  • Wir definieren eine Funktion mft_add_footer_text. Sie nimmt den ursprünglichen $content (den Beitragstext) als Parameter, fügt unseren eigenen HTML-Absatz mit Dankestext an ($content .= $footer_text;) und gibt den modifizierten Inhalt zurück.
  • Die Funktion wird nur ausgeführt, wenn is_single() true ergibt – das heißt, wenn gerade ein einzelner Blogpost angezeigt wird (nicht auf Übersichtsseiten wie der Blog-Startseite, wo mehrere Beiträge gelistet sein könnten). Das ist optional, aber verhindert, dass unser Footer-Text z.B. in Kurzfassungen oder anderen Content-Kontexten auftaucht, wo es vielleicht unerwünscht ist.
  • Schließlich registrieren wir die Funktion bei WordPress mit add_filter('the_content', 'mft_add_footer_text');. Damit wird unsere Funktion automatisch aufgerufen, jedes Mal wenn WordPress den Inhalt eines Beitrags generiert, und zwar nach dem Laden aus der Datenbank, aber bevor er an den Browser gesendet wi (the_content – Hook – WordPress Developer Resources) (Is it possible to add a filter to the_content() to group the content …)3】. Unsere Änderung wird also in den endgültigen HTML-Code eingebettet, den der Besucher sie (How to Use WordPress add_filter + Useful Examples)7】.

Wir haben damit ein voll funktionsfähiges Plugin geschrieben! Insgesamt sind es nur wenige Zeilen. (Falls du dich fragst: Der Funktionspräfix mft_ ist einfach eine Abkürzung für „My Footer Text“, um einen eindeutigen Namen zu gewährleisten. In WordPress ist es üblich, Funktionsnamen zu prefixen, um Kollisionen zu vermeiden.)

Schritt 4: Plugin testen (aktivieren und prüfen)
Wechsle zurück in das Browserfenster mit dem WordPress-Dashboard. Navigiere zu Plugins. Wenn du alles richtig gemacht hast, solltest du dort jetzt einen neuen Eintrag „My Footer Text“ sehen, mit der Beschreibung, die du im Header angegeben hast, und deinem Namen als Autor. (Falls es nicht erscheint, prüfe, ob du die Datei im richtigen Ordner erstellt hast und ob der Kommentar-Header korrekt formatiert ist. Ein fehlendes <?php oder ein Tippfehler im Kommentar /* ... */ kann dazu führen, dass WordPress die Datei nicht als Plugin erkennt.)

Klicke unter „My Footer Text“ auf „Aktivieren“. WordPress wird das Plugin nun laden. Im Idealfall bekommst du oben eine grüne Erfolgsmeldung „Plugin aktiviert.“. Sollte stattdessen eine Fehlermeldung kommen (z.B. Parse error), dann ist vermutlich ein Syntaxfehler im PHP-Code – öffne in dem Fall Cursor und überprüfe/berichtige den Code (vergiss nicht zu speichern).

Jetzt zur Überprüfung der Funktion: Erstelle im WordPress-Dashboard einen Beispiel-Blogbeitrag (oder nutze einen bestehenden, falls die frische Installation einen Demo-Post „Hallo Welt“ hat). Rufe die Einzelansicht des Beitrags auf (z.B. „Beitrag ansehen“ anklicken). Scrolle ans Ende des Beitragsinhalts. Dort sollte nun „Danke fürs Lesen!“ in Kursivschrift erscheinen – das ist der Text, den unser Plugin hinzugefügt hat.

Wenn du möchtest, ändere den Text ruhig ab (z.B. füge noch einen Smiley hinzu) und speichere die PHP-Datei. Beim Neuladen des Blogposts siehst du sofort die Änderung, da unser Container den plugins-Ordner ja live mit unserem Editor synchronisiert.

Schritt 5: Weitere Verbesserungen (optional)
Du hast nun ein sehr einfaches Plugin erstellt. Von hier aus kannst du experimentieren:

  • Ändere die Bedingung is_single() vielleicht zu is_page() oder entferne sie, um zu sehen, wie sich das auswirkt (z.B. der Text würde dann auch auf Seiten oder Blogübersichten erscheinen).
  • Füge eine CSS-Klasse zu deinem <p> Tag hinzu und probiere, per Theme-Customizer oder einem kleinen Stylesheet im Plugin die Gestaltung zu verändern.
  • Oder schreibe mit Hilfe von ChatGPT das Plugin etwas um, sodass der Text im Adminbereich konfigurierbar wird (das wäre schon fortgeschrittener, mit Optionen speichern etc., aber eine gute Übung – die KI kann dir auch hier ein Grundgerüst liefern).

Denke daran: Wenn du im Code etwas änderst und speicherst, braucht WordPress keinen Neustart – einfach die Seite neu laden, da PHP-Code immer beim Request ausgeführt wird. Sollte dein Code mal einen schwerwiegenden Fehler haben, der sogar das Dashboard lahmlegt, keine Panik: Du kannst das Plugin einfach deaktivieren, indem du es umbenennst oder den Code reparierst, oder via Datenbank in der Tabelle wp_options den active_plugins-Eintrag anpassen. Aber solche Rettungsaktionen bleiben dir hoffentlich erspart.

Wir haben unser Plugin erfolgreich lokal entwickelt. Als Nächstes gehen wir den letzten Schritt: den Code mit Git versionieren und auf GitHub hochladen, um ihn zu sichern oder mit anderen zu teilen.

6. Einrichtung von GitHub und Hochladen des Plugins in ein Repository

In der Software-Entwicklung ist es üblich, den Quellcode mit Versionsverwaltung zu verwalten. Git ist das verbreitetste Versionskontrollsystem, und GitHub ist ein Dienst, um Git-Repositories in der Cloud zu hosten und mit anderen zu kollaborieren. Wir werden nun unser Plugin-Code in ein Git-Repository aufnehmen und es auf GitHub hochladen.

Git auf Windows installieren (falls noch nicht vorhanden)

Falls du Git bereits installiert hast oder z.B. GitHub Desktop verwendest, kannst du diesen Schritt überspringen. Ansonsten:

  • Lade den Git-Installer für Windows von der offiziellen Seite (https://git-scm.com/downloads) herunter und installiere Git mit den Standardoptionen. Dadurch bekommst du auch Git Bash (eine Terminal-Shell) und Git wird in der Eingabeaufforderung verfügbar sein.
  • Nach Installation kannst du ein Terminal öffnen und git --version tippen, um zu prüfen, ob Git funktioniert.

Neues Repository auf GitHub erstellen

  1. Gehe auf github.com und melde dich an (oder registriere dich kostenlos, falls du noch keinen Account hast).
  2. Klicke oben rechts auf das + Symbol und wähle “New repository” (GitHub für Anfänger: Repository anlegen und Code hochladen)43】.
  3. Gib einen Namen für dein Repository ein, z.B. „my-footer-text“. Du kannst eine Beschreibung hinzufügen (z.B. „WordPress plugin that adds a footer text to posts“). Wähle aus, ob das Repository Public (öffentlich sichtbar) oder Private sein soll. Für einen Plugin-Prototyp kannst du ruhig Public wählen, dann können andere es finden und nutzen.
  4. Initialisierung: Du kannst zunächst darauf verzichten, das Repository mit README o.ä. zu initialisieren (also lass die Kästchen für README, .gitignore, License ungehakt). Warum? Weil wir bereits lokalen Code haben, werden wir diesen direkt hochladen. Wenn du ein leeres Repo erstellst, ist es etwas einfacher, unsere vorhandenen Dateien hochzuschieben (keine potenziellen Konflikte mit einer bereits vorhandenen README).
  5. Klicke auf “Create repository”. GitHub legt nun das neue Repository an. Du wirst zu einer Seite weitergeleitet, die Git-Befehle zeigt, wie du dein lokales Projekt mit diesem Repository verbinden kannst.

Git-Repository lokal einrichten

Jetzt verbinden wir unseren lokalen Ordner mit dem GitHub-Repository:

  1. Öffne ein Terminal (Git Bash oder PowerShell) und navigiere in den Plugin-Ordner. Da unser Plugin in wordpress-dev/plugins/my-footer-text liegt, wechseln wir dorthin: 
    cd /Pfad/zu/wordpress-dev/plugins/my-footer-text

    (Ersetze den Pfad entsprechend. In Windows kannst du z.B. in Git Bash cd ~/Desktop/wordpress-dev/plugins/my-footer-text verwenden, falls dein Projektordner auf dem Desktop liegt. In PowerShell geht auch der normale Windows-Pfad.)

  2. Initialisiere ein neues lokales Git-Repository: 
    git init

    Dieser Befehl erzeugt im aktuellen Ordner ein verstecktes Unterverzeichnis .git und macht den Ordner damit „git-fäh (GitHub für Anfänger: Repository anlegen und Code hochladen)67】. (Falls hier eine Meldung kommt wie „Reinitialized existing git repository“, war evtl. im Oberordner schon ein Git-Repo – achte darauf, wirklich im Plugin-Unterordner zu sein, außer du möchtest das ganze Projekt versionieren. Für unser Beispiel versionieren wir nur das Plugin selbst.)

  3. Füge die Dateien dem Git-Index hinzu und mache den ersten Commit: 
    git add .
git commit -m "Initialer Commit: Plugin My Footer Text v1.0"

    git add . nimmt alle aktuellen Dateien (unser PHP-File, evtl. noch keine weiteren) in den sogenannten „Staging Area“ (GitHub für Anfänger: Repository anlegen und Code hochladen)L9】. Der commit sichert dann diese Version in der lokalen Historie mit der angegebenen Kommentar-Nachri (GitHub für Anfänger: Repository anlegen und Code hochladen)16】. Du hast nun eine erste Revision in Git lokal gespeichert.

  4. Verbinde das lokale Repository mit GitHub. Dazu kopieren wir die Repository-URL von GitHub. Auf der GitHub-Seite deines neuen Repos steht z.B. eine Zeile https://github.com/DeinUsername/my-footer-text.git. Kopiere diese.
    Jetzt im Terminal:

    git remote add origin https://github.com/DeinUsername/my-footer-text.git

    Dies fügt eine entfernte Verbindung namens „origin“ zu unserem lokalen Repo hinzu und verweist auf die GitHub- (GitHub für Anfänger: Repository anlegen und Code hochladen)70】.

  5. Standardmäßig hat Git unseren Branch „master“ genannt (bei neueren Git-Versionen evtl. auch schon „main“). GitHub verwendet meist „main“ als Hauptbranch. Um das konsistent zu haben, führen wir aus: 
    git branch -M main

    Dies stellt sicher, dass der aktuelle Branch auch „main“ heißt. (Wenn du diesen Schritt auslässt und Git „master“ nennt, ist das auch ok – GitHub wird dann „master“ als Standard nehmen, da kein anderer Branch existiert. Konsistenzhalber nehmen wir aber „main“.)

  6. Jetzt pushen wir unser Commit zu GitHub: 
    git push -u origin main

    Du wirst beim ersten Push nach GitHub-Zugangsdaten gefragt. Gib deinen GitHub-Benutzernamen und das Passwort ein. Wichtig: GitHub akzeptiert seit August 2021 kein direktes Passwort mehr; stattdessen musst du ein Personal Access Token anstelle des Passworts eingeben (falls du zwei-Faktor-Auth nutzt oder generell). Falls du kein Token hast, erstelle eines in deinem GitHub-Account (unter Settings > Developer Settings > Personal Access Tokens, mit Rechte „repo“). Kopiere das Token und nutze es als „Passwort“ in der Abfrage.
    Wenn alles klappt, wird die Übertragung durchgeführt. Git meldet dann so etwas wie „branch ‚main‘ set up to track ‚origin/mai (GitHub für Anfänger: Repository anlegen und Code hochladen)L9】. Jetzt liegen deine Plugin-Dateien auf GitHub.

  7. Gehe zurück zur GitHub-Webseite und aktualisiere dein Repository. Du solltest nun die Datei my-footer-text.php sehen. Dein Plugin-Code ist nun online verfügbar. GitHub zeigt auch automatisch den Inhalt des Kommentar-Header an (Name, Beschreibung) in der Dateiübersicht.

Von nun an kannst du jede Änderung, die du lokal vornimmst, auch versionieren: git add, git commit mit Nachricht, git push. Jeder Push aktualisiert das GitHub-Repo. So hast du ein Backup und eine Verlaufshistorie. Außerdem könntest du das Repo mit anderen Entwicklern teilen, Issues nutzen, etc.

Hinweis: In echten Projekten versioniert man meistens die gesamte WordPress-Plugin-Struktur (also unseren Ordner mit allen Dateien). In unserem Beispiel besteht das Plugin nur aus einer PHP-Datei, aber wenn du mehr Dateien hinzufügst (CSS, weitere PHP-Module, Readme, etc.), solltest du diese natürlich auch ins Repo aufnehmen (git add kümmert sich um neue Dateien). Sensible Daten (Passwörter, API-Keys) gehören nicht ins Repo – in unserem Fall gibt es keine, da das Plugin keine solchen Infos enthält.

Damit ist die grundlegende Einführung abgeschlossen. Du hast jetzt:

  • Docker erfolgreich installiert und eine lokale WordPress-Umgebung konfiguriert (mit persistenten Daten und gemountetem Plugin-Ordner).
  • Den KI-Code-Editor Cursor eingerichtet und gelernt, wie du dessen Chat- und Agent-Funktionen zum Programmieren nutzen kannst.
  • Gesehen, wie ChatGPT / KI-Assistenten dir bei Entwicklungsfragen, Codegenerierung und Problembehebung helfen – mit Beispielen aus der WordPress-Plugin-Praxis.
  • Schritt für Schritt ein eigenes Plugin entwickelt, getestet und verstanden (inkl. WordPress-spezifischer Konzepte wie Hooks).
  • Deinen Plugin-Code mit Git versioniert und auf GitHub hochgeladen, wodurch du nun eine öffentliche (oder private) Code-Basis hast, auf die du von überall zugreifen oder die du mit anderen teilen kannst.

Herzlichen Glückwunsch! Du hast die ersten Schritte zum WordPress-Plugin-Entwickler erfolgreich gemeistert. Von hier aus kannst du dein Plugin erweitern oder neue Ideen umsetzen. Bei Schwierigkeiten weißt du, wie du Docker-Container verwaltest, und dass KI-Tools wie Cursor und ChatGPT dich unterstützen können – aber auch, dass du ihre Ausgaben immer prüfen solltest. Viel Spaß beim Coden deines nächsten WordPress-Plugins!

Quellen und weiterführende Links:

Von Published On: 14.2.2025Kategorien: KI, WordPress, Wordpress PluginsSchlagwörter: , , , , , , , , ,