See More

Du möchtest dein eigenes WordPress Theme erstellen, bist aber unsicher, wo du anfangen sollst? Obwohl WordPress.org und zahlreiche Theme-Marktplätze tausende schöne und funktionale Themes anbieten, stößt du vielleicht an Grenzen, wenn es um ganz spezielle Design-Wünsche oder individuelle Funktionen geht. Die gute Nachricht: Mit etwas Grundwissen in HTML, CSS und PHP kannst du dein eigenes WordPress Theme selbst erstellen – und dieser umfassende Guide zeigt dir genau, wie das geht.

In diesem Tutorial lernst du alle wichtigen Schritte kennen, um dein eigenes WordPress Template zu erstellen. Vom Einrichten der Entwicklungsumgebung über die ersten Code-Zeilen bis hin zu fortgeschrittenen Techniken wie Child Themes und responsive Design – hier findest du alles, was du brauchst.

Das erwartet dich in diesem Artikel:

• Vollständige Vorbereitung deiner Entwicklungsumgebung
• Grundlagen der WordPress Theme-Struktur
• Schritt-für-Schritt Anleitung zum Erstellen deines ersten Themes
• Child Theme Entwicklung für Update-Sicherheit
• Responsive und Bootstrap-basierte Themes
• Gutenberg-Integration und moderne Best Practices
• Hilfreiche Tools und Software für die Theme-Entwicklung

Du entwickelst für Kunden? Dann brauchst du eine professionelle Domain – jetzt sichern!

Voraussetzungen & Was du mitbringen solltest

Bevor wir mit der eigentlichen Theme-Entwicklung starten, lass uns kurz klären, welche Kenntnisse du idealerweise mitbringen solltest. Keine Sorge – du musst kein Programmier-Profi sein, aber ein paar Grundlagen erleichtern dir den Einstieg erheblich.

Du solltest bereits Erfahrung haben mit:

• HTML: Grundlegende Struktur von Webseiten (Überschriften, Absätze, Listen, Links)
• CSS: Styling von HTML-Elementen (Farben, Schriftarten, Layouts)
• PHP: Grundlagen wie Variablen, Schleifen und Funktionen
• WordPress: Du hast bereits mit WordPress gearbeitet und weißt, was Themes, Plugins und Posts sind

Falls du bei einem dieser Punkte noch Auffrischung brauchst, ist das völlig okay. Du kannst während der Theme-Entwicklung parallel dazulernen – WordPress ist ein hervorragendes "Learning by Doing"-Projekt.

Warum überhaupt ein eigenes WordPress Theme erstellen?

Du fragst dich vielleicht, ob der Aufwand sich lohnt. Hier sind einige überzeugende Gründe:

• Volle Kontrolle: Du bestimmst jedes Detail deines Designs
• Performance: Nur der Code, den du wirklich brauchst – keine Bloat von Universal-Themes
• Individualität: Deine Website sieht aus wie keine andere
• Lerneffekt: Du verstehst WordPress von Grund auf
• Wartung: Du weißt genau, was dein Code macht
• Berufliche Perspektive: Theme-Entwicklung ist eine gefragte Fähigkeit

Entwicklungsumgebung einrichten

Bevor du im Editor deiner Wahl die ersten Code-Zeilen tippen kannst, brauchst du eine geeignete Entwicklungsumgebung. Um mit der WordPress-Theme-Entwicklung zu starten, musst du einen lokalen Webserver auf deinem Computer einrichten. Dafür gibt es verschiedene Lösungen, die dir den Einstieg erleichtern, wie Local by Flywheel, XAMPP oder MAMP. In diesem Artikel erfährst du, wie du diese Tools installierst und WordPress schnell zum Laufen bringst.

Lokalen Webserver installieren

Für die WordPress Theme-Entwicklung benötigst du eine lokale Installation mit:

• Webserver (Apache oder Nginx)
• Datenbank (MySQL oder MariaDB)
• PHP (mindestens Version 7.4, besser 8.0+)
• WordPress (aktuelle Version)

Die einfachsten Lösungen für Anfänger:

Local by Flywheel (empfohlen für Einsteiger)

• Kostenlos und benutzerfreundlich
• Ein-Klick WordPress-Installation
• Integrierte SSL-Zertifikate
• Verfügbar für Windows und Mac
• Download: localwp.com

XAMPP (klassische Lösung)

• Kostenlos und Open Source
• Manuelle WordPress-Installation nötig
• Für Windows, Mac und Linux
• Download: apachefriends.org

MAMP (Mac-Alternative)

• Einfache Einrichtung auf macOS
• Kostenlose Basisversion verfügbar
• Download: mamp.info

WordPress lokal installieren

Nachdem du deinen lokalen Server eingerichtet hast, geht es nun darum, WordPress zu installieren. Lade dazu die neueste Version von WordPress herunter und entpacke die Dateien in den entsprechenden Ordner. Im nächsten Schritt musst du eine Datenbank erstellen und die Installation über deinen lokalen Server starten.

1. Lade WordPress herunter von wordpress.org/download
2. Entpacke die Dateien in den entsprechenden Ordner:
   • Local by Flywheel: Automatisch im App-Ordner
   • XAMPP: htdocs/dein-projekt
   • MAMP: htdocs/dein-projekt
3. Erstelle eine Datenbank über phpMyAdmin
4. Führe die WordPress-Installation aus über localhost/dein-projekt

Debug-Modus aktivieren – unverzichtbar für Theme-Entwicklung

Um Fehler schnell zu finden und zu beheben, solltest du den WordPress Debug-Modus aktivieren. Das ist ein absolutes Muss für die Theme-Entwicklung!

So aktivierst du WP_DEBUG:

1. Öffne die Datei wp-config.php im WordPress-Hauptverzeichnis
2. Suche nach der Zeile:

php

3. Ändere sie zu:

php

Erweiterte Debug-Optionen (füge diese Zeilen direkt nach WP_DEBUG ein):

php

Wichtig: Deaktiviere WP_DEBUG_DISPLAY wieder, bevor du dein Theme auf einen Live-Server überträgst!

Empfohlene Code-Editoren

Ein guter Code-Editor kann die Entwicklung deines WordPress-Themes deutlich erleichtern und effizienter machen. Visual Studio Code ist eine der beliebtesten und leistungsfähigsten Optionen, besonders durch seine vielen nützlichen Erweiterungen. Aber auch andere Editoren wie Sublime Text oder PHPStorm bieten jeweils ihre eigenen Vorteile.

Visual Studio Code (am beliebtesten)

• Kostenlos und leistungsstark
• Hervorragende PHP- und WordPress-Extensions
• Integriertes Git
• Syntax-Highlighting für alle relevanten Sprachen
• Download: code.visualstudio.com

Empfohlene VS Code Extensions:

• PHP Intelephense
• WordPress Snippets
• HTML CSS Support
• Prettier Code Formatter

Alternativen:

• Sublime Text: Schnell und elegant
• PHPStorm: Professionelle IDE (kostenpflichtig)
• Atom: Open Source Alternative zu VS Code

Mehrere WordPress-Versionen testen (für fortgeschrittene Entwickler)

Wenn du dein WordPress Theme nicht nur für dich selbst erstellen möchtest, sondern planst, es zu verteilen oder zu verkaufen, solltest du es mit verschiedenen WordPress-Versionen testen. Der Standard ist Kompatibilität mit mindestens den letzten zwei Major-Releases.

Ältere WordPress-Versionen findest du auf der offiziellen Releases-Seite: wordpress.org/download/releases/

Professionelle Lösungen für Multi-Version-Testing:

• Docker: Containerisierte WordPress-Installationen
• Vagrant: Virtuelle Maschinen für Entwicklung
• VVV (Varying Vagrant Vagrants): WordPress-spezifische Vagrant-Konfiguration

WordPress Theme Grundlagen

Bevor du dein erstes WordPress Theme selbst erstellen kannst, ist es wichtig zu verstehen, wie WordPress überhaupt funktioniert und wie Themes in dieses System integriert sind.

Wie WordPress eine Seite aufbaut

WordPress ist ein dynamisches Content Management System. Das bedeutet: Wenn jemand deine Website aufruft, baut WordPress die Seite in Echtzeit aus verschiedenen Komponenten zusammen:

1. URL-Analyse: WordPress analysiert die aufgerufene URL
2. Query: WordPress fragt die Datenbank nach den passenden Inhalten ab
3. Template-Auswahl: WordPress wählt die passende Template-Datei aus deinem Theme
4. Rendering: WordPress verarbeitet PHP-Code, fügt Inhalte ein und generiert HTML
5. Ausgabe: Der fertige HTML-Code wird an den Browser geschickt

Die WordPress Template-Hierarchie

Ein entscheidendes Konzept beim WordPress Theme Erstellen ist die Template-Hierarchie. WordPress folgt einer klaren Rangfolge bei der Auswahl, welche Template-Datei für welchen Seitentyp verwendet wird.

Beispiel für eine einzelne Seite (Page):

WordPress sucht in folgender Reihenfolge:

1. page-.php – Spezifische Seite basierend auf URL-Slug
2. page-.php – Spezifische Seite basierend auf ID
3. page.php – Allgemeines Seiten-Template
4. singular.php – Template für einzelne Posts/Pages
5. index.php – Fallback-Template (wird IMMER benötigt)

Beispiel für Blog-Posts:

1. single-.php – Für Custom Post Types
2. single.php – Für normale Blog-Posts
3. singular.php – Allgemeines Single-Template
4. index.php – Fallback

Für die Startseite:

1. front-page.php – Statische Startseite
2. home.php – Blog-Startseite
3. index.php – Fallback

Diese Hierarchie gibt dir enorme Flexibilität: Du kannst für jeden Seitentyp ein eigenes Design erstellen, oder mit wenigen Templates arbeiten und die index.php als Basis nutzen.

Die absolut notwendigen Dateien für ein WordPress Theme

Um ein funktionierendes WordPress Theme zu erstellen, brauchst du minimal nur zwei Dateien:

1. style.css – Die Theme-Stylesheet-Datei

• Enthält CSS für das Design
• Enthält Theme-Informationen im Header-Kommentar
• Pflichtdatei – ohne sie erkennt WordPress dein Theme nicht

2. index.php – Das Haupt-Template

• Fallback-Template für alle Seitentypen
• Enthält die grundlegende HTML-Struktur
• Pflichtdatei – WordPress braucht mindestens ein Template

Empfohlene zusätzliche Dateien (für reale Projekte)

In realen Projekten wirst du neben den grundlegenden Dateien noch viele weitere benötigen, um dein Theme funktional und strukturiert zu gestalten. Zu den wichtigsten gehören Template-Dateien wie header.php, footer.php oder single.php, die jeweils spezifische Bereiche deiner Website steuern. Darüber hinaus kommen funktionale Dateien wie die functions.php und das Screenshot-Bild hinzu, um das Theme weiter anzupassen und zu optimieren.

Template-Dateien:

• header.php – Header-Bereich (Logo, Navigation, Meta-Tags)
• footer.php – Footer-Bereich (Copyright, Footer-Menü, Scripts)
• sidebar.php – Sidebar mit Widgets
• single.php – Einzelner Blog-Post
• page.php – Statische Seiten
• archive.php – Archiv-Seiten (Kategorien, Tags, Datum)
• 404.php – Fehlerseite
• search.php – Suchergebnisse
• comments.php – Kommentarbereich

Funktionale Dateien:

• functions.php – Theme-Funktionen und -Features
• screenshot.png – Vorschaubild (empfohlen: 1200×900 Pixel)

Asset-Ordner (optional aber empfohlen):

Wo werden WordPress Themes gespeichert?

Alle Themes befinden sich im Verzeichnis:

Jedes Theme hat seinen eigenen Unterordner. WordPress erkennt automatisch alle Ordner in diesem Verzeichnis als potenzielle Themes – vorausgesetzt, sie enthalten mindestens eine style.css mit korrektem Header.

Dein erstes WordPress Theme erstellen – Let's Code!

Jetzt wird es praktisch! In diesem Abschnitt erstellen wir gemeinsam Schritt für Schritt dein erstes WordPress Theme. Keine Sorge – wir starten einfach und bauen nach und nach aus.

Schritt 1: Theme-Ordner anlegen

Öffne dein WordPress-Verzeichnis und navigiere zu:

Erstelle hier einen neuen Ordner für dein Theme. Der Name sollte:

• Kleingeschrieben sein
• Keine Leerzeichen enthalten (nutze Bindestriche)
• Beschreibend sein

Beispiel:

Schritt 2: style.css erstellen – Die Identität deines Themes

Erstelle im Theme-Ordner eine neue Datei namens style.css. Der Anfang dieser Datei ist besonders wichtig: Der Theme-Header-Kommentar teilt WordPress alle wichtigen Informationen über dein Theme mit.

Vollständiger style.css Header:

css

Erklärung der wichtigsten Header-Felder:

• Theme Name: Der Name, der im WordPress-Backend angezeigt wird (Pflichtfeld)
• Description: Kurze Beschreibung deines Themes
• Version: Versionsnummer für Updates
• Text Domain: Wichtig für Übersetzungen (sollte dem Ordnernamen entsprechen)
• Tags: Stichwörter zur Kategorisierung (bei öffentlichen Themes relevant)

Schritt 3: index.php erstellen – Das Herzstück deines Themes

Die index.php ist das wichtigste Template deines Themes. Sie wird verwendet, wenn keine spezifischere Template-Datei existiert.

Erstelle eine neue Datei index.php mit folgendem Inhalt:

php

Wichtige WordPress-Funktionen erklärt:

• wp_head(): Unverzichtbar! Lädt WordPress-Scripts, Styles und Meta-Tags. Muss im <head> stehen.
• wp_footer(): Unverzichtbar! Lädt Scripts vor </body>. Wichtig für Plugins.
• language_attributes(): Fügt Sprach-Attribute für HTML-Tag ein
• bloginfo(): Gibt Website-Informationen aus (Name, Beschreibung, Charset, etc.)
• body_class(): Fügt dynamische CSS-Klassen zum Body-Tag hinzu
• home_url(): URL zur Startseite
• esc_url(): Macht URLs sicher (Security Best Practice)

Der WordPress Loop – Das Herzstück der Content-Ausgabe

Wenn du mit WordPress arbeitest, begegnet dir früher oder später der sogenannte WordPress Loop – und ohne ihn läuft gar nichts. Er ist das Herzstück der Content-Ausgabe und entscheidet, welche Inhalte auf deiner Webseite erscheinen. Verstehst du den Loop, verstehst du WordPress – denn hier steuerst du, wie Posts geladen, verarbeitet und ausgegeben werden.

php

Was passiert hier?

1. have_posts(): Prüft, ob Posts vorhanden sind
2. while ( have_posts() ): Durchläuft alle gefundenen Posts
3. the_post(): Setzt die Post-Daten für den aktuellen Durchlauf
4. Innerhalb der Schleife kannst du Template-Tags verwenden

Wichtige Template Tags im Loop:

• the_title(): Titel des Posts
• the_content(): Vollständiger Inhalt
• the_excerpt(): Kurzzusammenfassung
• the_permalink(): URL zum Post
• the_ID(): Post-ID
• get_the_date(): Veröffentlichungsdatum
• the_author(): Autor-Name
• post_class(): CSS-Klassen für den Post
• the_post_thumbnail(): Beitragsbild (Featured Image)

Schritt 4: Theme aktivieren und testen

Glückwunsch – du hast jetzt ein funktionierendes WordPress Theme erstellt! Jetzt ist es an der Zeit, es zu aktivieren:

1. Logge dich in dein WordPress-Backend ein (http://localhost/dein-projekt/wp-admin)
2. Gehe zu Design → Themes
3. Du solltest dein Theme mit dem Namen sehen, den du in der style.css angegeben hast
4. Klicke auf Aktivieren

Tipp: Füge einen Screenshot hinzu (1200×900 Pixel, gespeichert als screenshot.png im Theme-Ordner), damit dein Theme eine Vorschau hat.

Schritt 5: header.php und footer.php auslagern

Für bessere Wartbarkeit solltest du Header und Footer in separate Dateien auslagern. Das ist ein wichtiger Schritt beim professionellen WordPress Theme Erstellen.

Erstelle header.php:

php