Wie Sie Ihr eigenes WordPress-Theme entwickeln

Der Beitrag setzt etwas Erfahrung mit WordPress und Grundkenntnisse in der Webentwicklung voraus. Sie haben schon mit HTML, CSS und PHP gearbeitet und wissen, was ein WordPress-Theme ist? Dann kann es losgehen.

Die Vorbereitung

Bevor Sie im Editor Ihrer Wahl die ersten Code-Zeilen tippen können, brauchen Sie eine geeignete Entwicklungsumgebung mit Webserver (Apache, Nginx), Datenbank (MySQL/MariaDB), PHP und natürlich WordPress. Sie sollte sich möglichst wenig von der Serverumgebung unterscheiden, in der Ihre produktive WordPress-Installation laufen soll.

Wer Themes nicht nur für sich selbst entwickeln will, sollte diverse WordPress-Versionen installieren. Denn Rückwärtskompatibilität für mindestens zwei Versionen gilt als Standard (ältere Versionen finden Sie auf der Releases-Seite von WordPress.org). Profis erleichtern sich die Arbeit mit virtuellen Maschinen, Docker und/oder Vagrant (werfen Sie doch mal einen Blick auf Varying Vagrant Vagrants).

In WordPress sollten Sie einige Debugging-Optionen einschalten, um die Fehlersuche zu erleichtern. Den „Debug“-Modus von WordPress aktivieren Sie in der Datei wp-config.php im WordPress-Ordner. Suchen Sie die Zeile

define( 'WP_DEBUG', false );

und ändern Sie “false“ in „true“.

Im Debug-Modus stehen Ihnen nützliche Fehlerinformationen zur Verfügung. WP_DEBUG_LOG schreibt diese ins wp-content-Verzeichnis, WP_DEBUG_DISPLAY zeigt auftretende Fehler auf dem Bildschirm an. Beides aktivieren Sie ebenfalls in der wp-config.php. Wenn Sie mögen, können Sie darüber hinaus noch einige hilfreiche Debugging-Plugins für Entwickler installieren.

Hintergrund: So baut WordPress eine Seite

Für ein funktionierendes Theme benötigen Sie eigentlich nur zwei Code-Dateien, die Template-Datei index.php als Vorlage für die Struktur Ihrer Seite und style.css für das Layout. Template-Dateien bestehen aus HTML, PHP und WordPress-Template-Tags (mehr zu diesen weiter unten). Fast alle Themes bringen aber mehr als die beiden genannten Dateien mit, insbesondere verschiedene Templates. Das wird verständlicher, wenn man einen Blick auf die Arbeitsweise des Blog- und Content-Management-Systems WordPress wirft.

Wird eine URL aufgerufen, baut WordPress aus den Inhalten in seiner Datenbank dynamisch die passende Seite zusammen, so wie es das zugehörige Theme vorgibt. Dazu bestimmt WordPress zunächst, um welchen Post- oder Seiten-Typ es sich handelt, und sucht in Abhängigkeit davon die passende Template-Datei. WordPress kennt zahlreiche Typen von Seiten und Seitenelementen (Startseite, Blogbeiträge, statische Seiten, Footer- und Header-Bereiche, Seitenleisten u.v.m.) und folgt bei der Template-Auswahl einer vorgegebenen Hierarchie (hier im Detail beschrieben). Erwartet WordPress beispielsweise eine statische Seite, sucht es nacheinander nach einer benutzerdefiniert zugeordneten Template-Datei, einer Datei mit thematisch relevanten URL-Bestandteilen der Seite („Slug“) oder ihrer ID im Dateinamen und nach Dateien namens page.php oder singular.php. Wenn keine einzige dieser Dateien existiert, greift es zur index.php.

Seiten strukturieren

Hat sich WordPress für ein Template entschieden, beispielsweise die index.php, arbeitet es dieses ab. WordPress-Seiten bestehen gewöhnlich aus verschiedenen Bereichen, die jeweils eigene Templates haben können. WordPress kennt unter anderem header.php, footer.php oder comments.php; Sie können aber auch selbst solche partiellen Templates definieren. Eine separate header.php laden Sie beispielsweise mit get_header(), ein eigenes Template mit get_template_part():

<?php
get_template_part( 'your-special-section' );
?>

Sie haben also zahlreiche Möglichkeiten, verschiedene Seitentypen und Bereiche zu definieren und WordPress dann mit der gewünschten Vorlage zu versorgen. Dabei können Sie mehrfach genutzte Abschnitte auslagern und müssen sie nicht in sämtliche Templates kopieren, in denen sie vorkommen.

Inhalte einlesen – der Loop

Nicht weit hinter der Header-Einbindung stehen in den meisten Page-Templates Code-Zeilen ähnlich den folgenden:

<?php
	if ( have_posts() ) :
		while ( have_posts() ) : the_post();
// Post-Inhalt, etwa mit eigenem Template „content-page.php: 
		get_template_part( 'content', 'page' );
		endwhile;
	endif;
?>

Das ist der sogenannte WordPress-Loop, der Standard-Mechanismus, mit dem WordPress die in der Datenbank vorhandenen Posts durchsucht und sie – bzw. bestimmte Informationen daraus – auf der aufgerufenen Seite darstellt. Hier zeigt sich WordPress‘ Herkunft als Blogsoftware – für statische Seiten wird die while-Schleife eigentlich nicht benötigt (schadet aber auch nicht).

Welche Informationen aus der Datenbank WordPress auf der Seite darstellt, steuern Sie dynamisch mit sogenannten Template Tags, also PHP-Tags, die auf eingebaute WordPress-Funktionen verweisen. Mit get_header() oder get_template_part() haben wir schon einige Template Tags kennengelernt, aber es gibt noch sehr viele mehr – das Spektrum anzeigbarer Daten reicht von Blogtiteln und Links über Beitragsinhalte bis hin zu Auflistungen etwa von Kategorien, Kommentaren oder Autoren. Viele Template Tags können oder müssen im Loop platziert werden, weil Inhalte mehrerer Posts benötigt werden.

Layout und Funktionalität

Bis hierhin ging es „nur“ um die Anordnung von Datenbank-Inhalten. Wie das Ganze präsentiert wird, können Sie wie gewohnt per CSS steuern. Die Datei style.css ist obligatorisch, aber Sie können bei Bedarf weitere Stylesheets anlegen und laden. Benötigte JavaScript-Funktionen können Sie standardmäßig in die optionale, aber in nahezu jedem Theme benötigte Datei functions.php packen. Dort können Sie natürlich auch weitere Skripte und Bibliotheken referenzieren. Bitte beachten Sie aber, dass WordPress bereits eine ganze Reihe von JavaScript-Dateien mitbringt, beispielsweise verbreitete Bibliotheken wie jQuery, und die meisten Installationen zusätzlich zahlreiche Plugins mit JavaScript-Code nutzen. Damit das alles reibungslos zusammenarbeitet, sollten Sie die Standardmethode von WordPress zum Laden von Stylesheets und JavaScript nutzen. Laden Sie also CSS-Dateien in der functions.php über die Funktion wp_enqueue_style() und JavaScript analog mit wp_enqueue_script().

Und noch ein Tipp: Wenn Sie oder Ihr Nutzer das Theme wieder wechseln möchten – dafür kann es viele Gründe geben – sollte dadurch keine wesentliche Funktionalität verloren gehen. Solche Funktionen packen Sie also besser nicht in die functions.php, sondern in ein Plugin.

Gutenberg-Editor

Seit Ende 2018, mit WordPress 5.0, ist „Gutenberg“ der neue Standard-Editor von WordPress. Das müssen Sie bei der Entwicklung Ihres Themes beachten. So gibt es mit Blocks und Block Patterns ein neues Design-Konzept sowie erweiterte Möglichkeiten für Redakteure (z. B. Farbpalette, Textgrößen, eigene Styles für Redakteure, Block Styles), die Sie Ihren Theme-Nutzern bereitstellen können. Entsprechende Einstellungen nehmen Sie auch in der functions.php über die Funktion add_theme_support() vor (diese regelt auch viele andere Features Ihres Themes). Auch müssen Sie das Layout der Gutenberg-Blocks an Ihr Theme anpassen. Mehr Informationen finden Sie im Gutenberg-Handbuch.

Eigenes WordPress-Theme entwickeln - endlich loslegen

Wie Sie sehen, erfordert die Entwicklung von WordPress-Themes etwas Einarbeitung, auch wenn Sie sich mit HTML, CSS und PHP schon gut auskennen. Eine gute Referenz dazu ist der WordPress-Codex. Sie können sich aber die Arbeit deutlich erleichtern, indem Sie fertige Themes studieren oder zur Grundlage eigener Entwicklungen machen. Alle auf Wordpress.org angebotenen Themes stehen unter der GPL General Public License, können also frei genutzt und angepasst werden. Zudem stellen die WordPress-Macher extra für diesen Zweck ein Starter-Theme mit zahlreichen kommentierten Templates und fünf Beispiel-Stylesheets bereit, genannt „Underscores“- oder „_s“-Theme. Auf https://underscores.me/ finden Sie dazu nicht nur mehr Informationen, sondern können sich sogar Ihr eigenes Theme-Paket mit angepasstem Slug und anderen Optionen generieren lassen. Es bietet wertvolle Einblicke in die Funktionsweise von Themes und WordPress-Funktionen und beschleunigt die Entwicklung. Also, worauf warten Sie noch?

Titelmotiv: Photo by Patrik Michalicka on Unsplash