WP Meetup Hannover, 28. Februar 2013

Frank Staude <frank@staude.net>

Ihr kennt das, Stunden oder Tagelang hat man nach einem passenden Theme gesucht. Irgendwann hat man dann endlich „DAS“ Theme gefunden, fast perfekt nur noch ein bisschen im CSS was anpassen und in der einen oder anderen Themedatei was ändern – Perfekt. Dann Blogt man fröhlich vor sich hin und eines Tages gibt es ein Update des Themes. Nichtsahnend führt man die Aktualisierung aus – doch oh Schreck – alle Änderungen sind weg!

Bei einem Update des Themes wird das Verzeichnis gelöscht und mit dem Inhalt des neu heruntergeladenen Pakets befüllt. Das bedeutet, das alle selbst gemacht Anpassungen verloren sind.

Um das Problem zu umgehen, gibt es in WordPress das Konzept der s.g. Childthemes. Vereinfacht gesagt, erbt ein Theme alles von seinem Elterntheme und man beginnt dann Einstellungen zu überschreiben. Dadurch erreicht man ein Trennung von Theme und seinen eigenen manuellen Anpassungen und die Anpassungen werden nicht gelöscht, wenn das Haupttheme aktualisiert wird.
Ich habe in meinem System nur die letzten 3 „Default“ Themes.

Legen wir nun ein Childtheme an, das von Twenty Twelve abgeleitet ist. Die Themes liegen im Dateisystem unterhalb des Ordners wp-content im Ordner themes,

Unser Childtheme soll Twenty Twelve Child heissen. Dazu legen wir als erstes im themes Ordner einen neuen Unterordner an und nennen ihn twentytwelve-child

In dieses neue Verzeichnis wird nun eine Datei style.css angelegt, mit folgenden Inhalt

/*
Theme Name: Twenty Twelve Child
Theme URI: http://meine-theme-url.de/
Description: Child-Theme von "Twenty Twelve" zur Childtheme Demo.
Author: Name des Autors
Author URI: URL des Autors
Template: twentytwelve
Version: 0.1
*/
@charset "UTF-8";
@import url("../twentytwelve/style.css");

Die Zeilen bedeuten im einzelnen:
Theme Name: Der Name des Child-Themes (Angabe ist nötig)
Theme URI: Die Webseite des Themes (Angabe ist optional)
Description: Eine kurze Beschreibung, die auf der Theme Übersichtsseite im WordPress Backend mit ausgegeben wird. (Angabe ist optional)
Author: Der Name des Autors des Themes. Fairerweise sollte man den Autor des Originalthems mit erwähnen. (Angabe ist optional)
Template: Name des Verzeichnisses des Originalthemes unterhalb von /wp-content/themes (Angabe ist nötig)
Version: Angabe einer Versionsnummer des Child-Themes. (Angabe ist optional)

Durch die @import Angabe wird das CSS des Originalthemes geladen.
Wenn alles richtig ist, haben wir nun ein neues Theme zur Auswahl.

Das neue Theme hat noch keine Grafik in der Themeübersicht. Entweder man kopiert einfach die screenshot.php aus dem Parenttheme oder legt eine neue Datei an (z.B. mit einem Screenshot der Webseite).

Nach Aktivierung des neuen Themes sollte die Seite genauso aussehen wie vorher.
Mit der @import Anweisung wird das original CSS geladen, danach können wir dann das CSS des Parentthemes überschreiben. Um z.B. die Hintergrundfarbe zu ändern, ändern wir die style.css wie folgt.

/*
Theme Name: Twenty Twelve Child
Theme URI: http: //meine-theme-url.de/
Description: Child-Theme von "Twenty Twelve" zur Childtheme Demo.
Author: Name des Autors
Author URI: URL des Autors
Template: twentytwelve
Version: 0.1
*/
@charset "UTF-8";
@import url("../twentytwelve/style.css");
body {
background-color: #000000;
}

So können die CSS Anweisungen Stück für Stück überschrieben werden.
Templatedateien können ebenso ersetzt werden. Wenn man z.B. die page.php ändern möchte, kopiert man die page.php aus dem Verzeichnis des Parentthemes in das Verzeichnis des Childthemes und verändert diese. WordPress merkt das die Datei im Childtheme vorhanden ist und verwendet diese, statt der des Parentthemes.
Eine Besonderheit ist die functions.php Datei. Die werden beide geladen, zuerst die aus dem Childtheme und dann die aus dem Parenttheme. Wenn das Parenttheme darauf vorbereitet ist, kann man auch einzelne PHP Funktionen überschreiben.
Funktionen die man „Überschreiben“ kann, erkannt man in der Parenttheme functions.php daran, das diese in ein if (! function_exists (“Funktionsname“)) gekapselt sind.
Beispiel:

if ( ! function_exists( 'twentytwelve_content_nav' ) ) :
/**
* Displays navigation to next/previous pages when applicable.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_content_nav( $html_id ) {
global $wp_query;

$html_id = esc_attr( $html_id );

if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="<?php echo $html_id; ?>" role="navigation">
<h3><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
<div><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
<div><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentytwelve' ) ); ?></div>
</nav><!-- #<?php echo $html_id; ?> .navigation -->
<?php endif;
}
endif;

Was passiert? Die Funktion twentytwelve_content_nav wird nur registriert, wenn sie noch nicht existiert. Wenn in der functions.php des Childthemes, welche ja vor der functions.php des Parentthemes geladen wird, ebenfalls diese Funktion definiert wird, wird diese verwendet.

Zusammenfassung:

• Wenn man an Themes „rumfummelt“, sollte man Childthemes verwenden damit die Änderungen nicht verloren gehen bei Aktualisierungen
• Für eine minimales Childtheme braucht man nur eine style.css Datei.
• Template Dateien des Childs überschreiben die Dateien des Parents
• Die functions.php werden beide geladen, zuerst die des Childs, dann des Parents.