WordPress-Themes von Elmastudio erfreuen sich allseits großer Beliebtheit. Auch ich spreche gerne mal eine Empfehlung zugunsten dieser Theme-Schmiede aus, wenn mich jemand auf der Suche nach einem Theme um Rat fragt. Allerdings bin ich etwas zurückhaltend, wenn es um generelle Lobeshymnen auf die Themes der in Auckland, Neuseeland ansässigen Entwickler geht, vor allem, was den Code betrifft.

Bitte nicht falsch verstehen, dies soll kein Elmastudio-Bashing werden! Ich schätze die Produkte aus dem Hause Elmastudio sehr! Aber wie so oft gilt auch hier, dass auch Gutes noch verbessert werden kann. Dies will ich an einem kleinen Beispiel in diesem Artikel einmal zeigen:

Waipoua – ein fast perfektes Theme

Für ein neues Blogprojekt war ich auf der Suche nach einem optisch aufgeräumten Theme ohne viel Schnickschnack. Dafür bot sich das Theme Waipoua von Elmastudio in geradezu idealer Weise an. Das Theme ist nun beinahe auf den Tag genau drei Jahre alt. Drei Jahre sind, in Webdesign-Zeiträumen gedacht, eine lange Zeit. Dennoch wirkt das Theme immer noch zeitlos modern.

Ein paar Kleinigkeiten wollte ich optisch an diesem Theme trotzdem noch verändern und so entschied ich mich für eine ChildTheme-Lösung.

Waipoua, das Child Theme dazu und die Probleme damit

Erst vor etwa einem Monat erschien auf dem Elmastudio-Blog ein Artikel mit dem Titel „Ein WordPress Child-Theme anlegen – so geht’s richtig“. In diesem Artikel berichtet Ellen Bauer über den Wechsel von der CSS-Regel @import zu dem auch im WordPress Codex empfohlenen Verfahren, das Stylesheet des Parent-Themes mittels des Hooks wp_enqueue_scripts einzubinden.

Gegen Ende des Artikels schreibt Ellen noch:

Wie haben übrigens auch all unsere Elmastudio Beispiel Child-Theme Ordner mit der neuen Methode upgedatet. […]

Das liest sich auf den ersten Blick sehr gut. Der Web-Entwickler Torsten Landsiedel merkt aber prompt in einem Kommentar zu dem Artikel an:

[…] da wp_enqueue_styles die Styles im wp_head() aufruft ergibt diese neue Lösung bei den Child-Themes für die älteren Themes (Baylys, Bugis, Kerikeri, Meola, Nilmini, Nori, Piha, Pohutukawa, Tatami, Waipoua) allerdings keinen Sinn. Denn in diesen Themes wird durch den Direktaufruf über bloginfo( ‘stylesheet_url’ ) ja jetzt *zuerst* das Child-Theme aufgerufen und erst danach im wp_head-Aufruf das CSS des Eltern-Themes, welches eigentlich überschrieben werden sollte. Das ist aber bei dieser Reihenfolge der Stylesheet-Daten nicht mehr richtig möglich (bzw. nur durch haufenweise !important).
[…]

Diese zuletzt erwähnte Methode wird auch in der style.css des neuen Waipoua-Child-Themes empfohlen:

/* Now you can start adding your own styles here. Use !important to overwrite styles if neccessary. */

Das ist aus meiner Sicht allerdings ein extrem suboptimaler Workaround.

Eine bessere Lösung für Waipoua

Wie Torsten Landsiedel bereits richtig analysiert hat, liegt das Problem darin, dass in der header.php des Original-Themes das Stylesheet fest kodiert aufgerufen wird:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?/>" />

Die Lösung ist also relativ einfach und besteht aus folgenden Schritten:

  1. Die originale header.php aus dem waipoua-Ordner in den Child-Theme-Ordner kopieren.
  2. Die oben gezeigte Zeile (Zeile 40) aus der header.php löschen und die Datei speichern.
  3. Die functions.php des Child-Themes muss wie folgt (Zeile 13) erweitert werden:
<?php
/**
 * Waipoua child theme functions and definitions
 */

/*-----------------------------------------------------------------------------------*/
/* Include the parent and child theme style.css
/*-----------------------------------------------------------------------------------*/

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}

Bis zu einem Update des Waipoua-Themes ist dies wahrscheinlich der geeignetste Workaround, um ein Child-Theme sinnvoll einsetzen zu können. Dies gilt sinngemäß auch für alle anderen Elmastudio-Themes, bei denen das Stylesheet ebenfalls fest kodiert in der header.php aufgerufen wird.