Wer ein Theme für WordPress sucht, steht vor der Qual der Wahl. Zahlreiche Quellen [1] bieten eine beachtliche Auswahl von Themes an. Seit Version 2.8 von WordPress können Anwender direkt im Backend nach Themes suchen und diese automatisch installieren. Eine Alternative zu Themes von der Stange: ein eigenes Theme schreiben. Hierfür sind keine PHP-Kenntnisse nötig.

Oft werden die Begriffe Theme und Template im Zusammenhang mit WordPress synonym verwendet, obwohl es einen deutlichen Unterschied gibt. Das führt zu Missverständnissen – eine schlechte Grundlage für die Entwicklung eines eigenen Themes. Was ist also ein Theme, was ein Template und was sind Template-Dateien?

Beim Stöbern im Installationsverzeichnis von WordPress stößt man auf den Ordner „themes“, der sich im Verzeichnis „wp-content“ befindet. In diesem Ordner liegen alle Themes, die im Rahmen der WordPress-Installation verfügbar sein können, sofern sie die Mindestvoraussetzungen an ein Theme erfüllen. Dabei besteht jedes Theme aus einem Ordner und einer Datei oder mehreren Dateien. Neue Themes werden immer im Ordner „themes“ installiert.

Wenn man im Themes-Verzeichnis einen neuen Ordner anlegt, ist bereits der erste Schritt zur Erstellung eines eigenen Themes gemacht. Dabei sollte der Ordner einen eindeutigen Namen (ohne Umlaute und Sonderzeichen) haben. Bereits in diesem frühen Stadium wird das Theme im Backend von WordPress als Theme erkannt und angezeigt. Allerdings fehlt noch ein weiterer Grundstein auf dem Weg zum eigenen Theme, denn WordPress warnt mit einer Fehlermeldung, dass das Theme beschädigt ist. Das liegt daran, dass im Theme benötigte Elemente noch nicht vorhanden sind. Für WordPress besteht ein Theme immer aus mindestens zwei Dateien:

• index.php
• style.css

Die Auswahl an fertigen WordPress-Themes ist zwar riesig, doch oft erfüllt nur ein eigenes Thema sämtliche Wünsche.

Werden diese beiden Dateien in dem gerade erstellten Ordner angelegt, erkennt WordPress das Theme und es lässt sich im Backend aktivieren. Da die beiden Dateien derzeit noch keinen Inhalt haben und von WordPress nur auf Grund ihres Namens erkannt werden, ist das Ergebnis beim Aufruf des Blogs mit dem frisch erstellten Theme mit einer weißen Seite ernüchternd. Wird in der Datei „index.php“ zum Beispiel „Hallo Welt“ hineingeschrieben, so zeigt WordPress genau diesen Satz an ohne weitere Formatierung. Fügt man innerhalb der gleichen Datei einen PHP-Befehl ein, so führt WordPress diesen Befehl aus.

<?php echo 15+27; ?>

Innerhalb einer Template-Datei lassen sich HTML und PHP beliebig miteinander kombinieren. Gerade das ermöglicht einen sehr flexiblen Aufbau eigener Themes. Man sollte unbedingt verstehen, wie WordPress mit Themes umgeht, denn ein Theme wird nicht eingelesen und verarbeitet, sondern direkt an das Frontend weitergereicht. Sämtliche Bestandteile einer Blogseite müssen somit innerhalb eines Themes vorhanden sein. Das gilt auch für den HTML-Header, der nicht eigens von WordPress erstellt wird. Soll ein Theme ein vollständiges HTML-Dokument erzeugen, muss dies in den Dateien des Themes gelöst werden.

Ein WordPress-Theme besteht aus einem HTML-Gerüst, das über PHP-Anweisungen mit Inhalt gefüllt wird. Dabei wird das gesamte Ergebnis über CSS in Form gebracht. Was dann im Frontend zu sehen ist, demonstriert das Default-Theme von WordPress. Das Verzeichnis des Themes enthält diverse Dateien, die einzelne Aspekte des Blogs abdecken.

Neben diesen Dateien, die die Funktionslogik eines Themes enthalten, finden sich Style-Dateien und ein Ordner mit Grafiken und Dateien, die für die Lokalisierung eines Themes benötigt werden. Abgerundet wird ein Theme durch die Datei „screenshoot.png“, die im Backend von WordPress ein Thumbnail des Themes anzeigen soll. Zentraler Eintrittspunkt eines Themes ist stets die Datei „index.php“. Sofern neben der Datei „style.css“ keine weiteren Dateien im Ordner des jeweiligen Themes vorhanden sind, erwartet WordPress, dass sämtliche Darstellungsmöglichkeiten des Blogs von „index.php“ geregelt werden.

Damit bei der Entwicklung eines Themes nicht jedes Mal das Rad neu erfunden werden und die Abfrage der Datenbank von WordPress mühsam mittels eigenem PHP-Code erfolgen müssen, stellt WordPress eine ganze Reihe von vorgefertigten, leicht zu konfigurierenden Funktionen und Methoden zur Verfügung, die so genannten Template-Tags [2]. Diese Template-Tags lassen sich innerhalb eines Themes verwenden und sorgen für die Anzeige der Inhalte, die dann mittels HTML und CSS gestaltet werden können.

Auch wenn sich ein Theme mit lediglich zwei Dateien erstellen lässt, ist es übersichtlicher, unterschiedliche Elemente und Funktionen einer Seite in separate Dateien auszulagern. WordPress kennt bereits einige Dateien, die sich einbinden lassen, ohne dass dafür explizit der Pfad zur Datei angegeben werden muss. Drei dieser besonderen Dateien sind „header.php“, „sidebar.php“ und „footer.php“. Die Namen der Dateien liefern einen Hinweis darauf, für welchen Zweck sie gedacht sind. Werden diese Dateien innerhalb des Themes-Ordners angelegt, lassen sie sich mittels des entsprechenden Template-Tags in der „index.php“-Datei einbinden:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Wenn die Reihenfolge der Template-Tags im Theme geändert wird, bindet WordPress die Dateien entsprechend dieser neuen Reihenfolge ein. Neben den bereits vorgestellten drei Include-Tags gibt es noch eine vierte Anweisung, mit der üblicherweise Kommentare in einem Theme eingebunden werden:

<?php get_comments(); ?>

Wie bei den vorangegangenen Tags gilt auch hier, dass damit vorerst nur eine Datei eingebunden wird. Für die tatsächliche Darstellung der Kommentare sind weitere Template-Tags notwendig. Sofern noch weitere Dateien eingebunden werden sollen, muss dies über eine reguläre include-Anweisung in PHP erfolgen. WordPress stellt dabei den relativen Pfad zum Theme in Form der Konstante
TEMPLATEPATH zur Verfügung:

<?php include (TEMPLATEPATH . "example.php"); ?>

Voraussetzung für die erfolgreiche Einbindung ist dabei, dass sich die Datei im Verzeichnis des aktuell aktiven Themes befindet. Sollte es notwendig sein, eine Datei außerhalb des Theme-Ordners einzubinden, stellt WordPress auch dafür eine Konstante zur Verfügung:

<?php include(ABSPATH . "wp-content/plugins/example/functions.php"); ?>

Auf diese Vorgehensweise sollte jedoch nach Möglichkeit verzichtet werden – insbesondere dann, wenn das fertige Theme öffentlich zur Verfügung gestellt werden soll.

Ein zentraler Teil jedes WordPress-Themes ist die so genannte Loop. Diese Abfrageschleife dient der Darstellung der Inhalte aus der Datenbank. Eine ganze Reihe von Template-Tags funktioniert ausschließlich innerhalb der Loop. Eine Minimalvariante der Loop sieht folgendermaßen aus:

<?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
		<?php the_content(); ?>
		<?php endwhile; ?>
<?php endif; ?>

Neben dem eigentlichen Beitragsinhalt, der mittels „the_content()“ ausgegeben wird, lassen sich per Template-Tag weitere Informationen ausgeben, wie zum Beispiel der Titel des Blogbeitrags mittels „the_title()“ und „the_time()“. Bei letztgenanntem Tag sollte man jedoch wissen, dass dieser Datum und Uhrzeit so ausgibt, wie sie in den Konfigurationseinstellungen von WordPess festgelegt wurden. Alternativ kann ein anderes Format [3] angegeben werden.

Bereits mit diesen wenigen Zeilen ist das WordPress-Theme lauffähig. Die Loop holt über das Template-Tag „the_content()“ den Inhalt der aktuellen Beiträge aus der Datenbank. Schaut man sich bei einem Aufruf des Blogs im Frontend den Quelltext der Ausgabe an, ist zu erkennen, dass WordPress formatiertes HTML ausgibt. Die einzelnen Formatierungsoptionen stehen dabei im WYSIWYG-Editor von WordPress zur Verfügung.

Damit das Theme auch ein vollständiges und valides HTML-Dokument ausgibt, muss es noch etwas erweitert werden. Zunächst erfolgt die Anpassung der Datei „header.php“:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" />
   <head>
      <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8" />
      <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
            type="text/css" media="screen" />
      <title>WordPress-Buch-Basis-Theme</title>
   </head>
   <body>

Durch den Template-Tag „bloginfo“ mit der Option „stylesheet_url“ wird die CSS-Datei des Themes, also „style.css“, eingebunden. Als nächstes wird das Ende des HTML-Dokuments in der Datei „footer.php“ angelegt:

   </body>
</html>

Eingebunden werden beide Dateien in der„index.php“, sodass sich der Inhalt der Loop im Body-Bereich des HTML-Dokuments befindet. Die vollständige Datei „index.php“ sieht jetzt folgendermaßen aus:

<?php get_header(); ?>
<?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
		<?php the_content(); ?>
		<?php endwhile; ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Die im Header eingebundene Stylesheet-Datei wurde zwar eingebunden, entspricht aber noch nicht den formalen Vorgaben. Damit WordPress das Theme im Backend nicht nur erkennt, sondern auch noch zusätzliche Metainformationen anzeigt, muss die Datei „style.css“ erweitert werden. Die notwendigen Informationen werden dabei in einem Kommentarblock hinterlegt. Dabei sollte darauf geachtet werden, die passenden Schlüssel innerhalb des Kommentarbereichs zu verwenden, da WordPress die Werte andernfalls nicht auslesen kann. Im Anschluss an die offiziellen Schlüssel kann der Block durch weitere Informationen ergänzt werden.

/*
Theme Name: Name des Themes
Theme URL: URL, unter der es Informationen zum Theme gibt
Description: eine kurze Beschreibung
Version: die Versionsnummer Ihres Themes
Author: Name des Autors
Author URL: URL des Autors
Tags: Tags zu diesem Theme

	Zusätzliche Informationen, Danksagungen oder Lizenz-Infos.
*/

In diesem Artikel haben Sie anhand eines einfachen Beispiels erfahren, auf was Sie bei der Erstellung eines eigenen WordPress-Themes in Bezug auf den grundlegenden Aufbau achten müssen. Mit diesem Rüstzeug sollte es gelingen, eigene Themes für WordPress zu entwickeln [4]. Der Kreativität sind dabei dank der Flexibilität von WordPress fast keine Grenzen gesetzt.

Der Autor

Thomas Boley arbeitet als Webentwickler bei der Essener Internetagentur incoWeb (incoweb.de). Seit 2005 beschäftigt er sich mit WordPress als Blog und als Content Management System und ist Co-Autor des WordPress-Buchs „Vom Blog zum Content Management System.“ Privat bloggt er seit 2003 unter wildbits.de.