Hübsche WordPress-Themes gibt es ja bekanntlich eine ganze Menge (ich hab da übrigens auch ein paar im Angebot). Aber selten gefällt ein Theme uneingeschränkt und natürlich versucht jeder Webseitenbetreiber durch die ein oder andere Anpassung ein wenig Individualität für seine Webseite zu gewinnen.

Eine andere Schriftgröße, eine andere Farbe, usw.. Ihr kennt das ja. Wer sich ein wenig mit CSS auskennt, für den sind die Änderungen im Stylesheet meist kein Problem und schnell erledigt.

So weit, so gut. Was aber, wenn der Theme-Autor ein Update für das Theme veröffentlicht? Sämtliche individuellen Änderungen würden damit ja überschrieben. Auf das Update verzichten? Die Änderungen nach dem Update nochmals machen? Nein, muss nicht sein. Für dieses Szenario gibt es seit WordPress Version 3.0 das sogenannte Child-Theme.

child-theme

Wenn ihr ein Child-Theme (Kind-Theme) nutzt, übernimmt dieses Templates, Stylesheet(s) und Einstellungen des Parent-Themes (Eltern-Theme). Wenn ihr nun Änderungen am Child-Theme macht, bleibt das Parent-Theme unangetastet. Bei einem Theme-Update wiederum bleibt das Child-Theme unverändert und es wird lediglich das Parent-Theme überschrieben, womit eure Änderungen erhalten bleiben. Klasse, oder?

In diesem Beitrag zeige ich am Beispiel meines neuen Themes ‚NEUNZEHN‘ wie ein Child-Theme eingerichtet und genutzt wird.

Die Vorteile

Wie bereits erwähnt besteht der große Vorteil eines Child-Themes darin, dass Änderungen, die ihr am Child-Theme macht ein Update des Parent-Themes überleben und nicht überschrieben werden. Es gibt aber noch weitere Vorteile:

Durch Anpassungen an einem Child-Theme kann man schnell mal etwas ausprobieren und, wenn etwas schief gelaufen ist, die Änderungen auch fix wieder rückgängig machen. Denn das Child-Theme enthält nur die Templates, die vom Parent-Theme abweichen und das Stylesheet des Child-Themes enthält nur Deklarationen, die vom Stylesheet des Parent-Themes abweichen. Dadurch bleibt ein Child-Theme immer recht schlank und übersichtlich.

So wird ein Child-Theme eingerichtet

Ihr benötigt dafür Zugang zu eurem Webspeicher sowie einen FTP-Client (z.B. das kostenlose Filezilla).

Zunächst legt ihr im WordPress-Theme-Verzeichnis einen neuen Ordner an. Der Name des Ordners ist zwar beliebig wählbar, der Übersichtlichkeit halber empfehle ich allerdings dem Ordner denselben Namen wie dem des Parent-Themes, gefolgt von einem Zusatz, wie z.B. -child, zu geben, etwa so:

/wp-content/themes/NEUNZEHN-child

Ladet nun mit dem FTP-Client das Stylesheet

/wp-content/themes/NEUNZEHN/style.css

sowie das Theme-Vorschaubild des Parent-Themes

/wp-content/themes/NEUNZEHN/screenshot.png

auf euren Rechner runter.

Das Theme-Vorschaubild siehst du in der Theme-Übersicht des WordPress-Backends unter „Design“ -> „Themes“. Fehlt das Theme-Vorschaubild, wird dort keine Vorschau angezeigt. Ist zwar nicht schlimm, sieht aber nicht besonders aus. Von daher kopieren wir es einfach mit. Natürlich könnt ihr auch ein eigenes Theme-Vorschaubild erstellen oder das vorhandene mit einem Grafikprogramm bearbeiten. Beachtet aber, dass die Grafik zwingend eine Größe von 600 x 450 Pixel haben und im PNG-Format gespeichert sein muss.

Öffnet nun das Stylesheet mit einem Editor, welcher mit CSS-Dateien umgehen kann (z.B. das kostenlose Notepad++).

Löscht nun alle Einträge aus der Datei bis auf die Kopfzeile:

/*  
Theme Name: NEUNZEHN
Theme URI: http://themes.olivergast.de/neunzehn/
Description: A modern stylish WordPress-Theme
Version: 1.02
Author: Oliver Gast
Author URI: http://www.olivergast.de
License:
License URI:
Tags: green, white, two-columns, fixed-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: og-neunzehn
*/

und ändert diese wie folgt (der Übersichtlichkeit halber habe ich die weiteren Meta-Daten (Version, Autor, etc.) aus der Kopfzeile weggelassen. Du kannst die Daten aber auch stehenlassen. Bleibt dir überlassen):

/*  
Theme Name: NEUNZEHN (Child-Theme)
Template: NEUNZEHN
*/

@import url("../NEUNZEHN/style.css");

Diese Anpassungen müsst ihr machen:

  1. Theme-Name anpassen (Zeile 2)
  2. Verweis auf das Parent-Theme einfügen (Zeile 3)
  3. Stylesheet des Parent-Themes per @import-Deklaration einbinden (Zeile 6)

Anschließend ladet ihr die beiden Dateien in das Child-Theme-Verzeichnis hoch. Die Struktur sieht dann so aus:

Das Child-Theme-Verzeichnis mit den angepassten Dateien

Das Child-Theme wird nun auch in der Theme-Auswahl (Menü „Design“ -> „Themes“) auftauchen, wo wir es auch gleich aktivieren:

Das Child-Theme in der Theme-Auswahl

Einrichtung abgeschlossen.

Wie mache ich nun Änderungen?

Fangen wir mit einem einfach Beispiel an: wir wollen die Farbe der fixierten oberen Leiste verändern. Mittels des Entwicklertools unseres Browsers

Element mittels Browser-Entwicklertools finden

finden wir heraus, dass das Element #top benannt ist und die Hintergrundfarbe #333 verpasst bekommen hat.

Um dies zu ändern öffnen wir das Stylesheet des Child-Themes über „Design“ -> „Editor“ und ergänzen dort folgendes:

/*  
Theme Name: NEUNZEHN (Child-Theme)
Template: NEUNZEHN
*/

@import url("../NEUNZEHN/style.css");


/* Hintergrundfarbe der Top-Leiste ändern */
#top {
    background: #666;
}

Diese Angabe im Child-Theme wird ab jetzt von WordPress genutzt und übersteuert die Farbangabe der Top-Leiste im Stylesheet des Parent-Themes.

Noch ein Beispiel? Wie wäre es mit einem nach innen gerichteten Schlagschatten für die Eingabefelder?

Bitte sehr… Wir ergänzen das Child-Theme-Stylesheet um

/*  
Theme Name: NEUNZEHN (Child-Theme)
Template: NEUNZEHN
*/

@import url("../NEUNZEHN/style.css");


/* Hintergrundfarbe der Top-Leiste ändern */
#top {
    background: #666;
}

/* Eingabefelder mit Innen-Schlagschatten */
textarea,
input:not([type=submit]):not([type=file]),
select {
    box-shadow: inset 1px 1px 3px #bbb;
}

und bekommen einen feschen Schlagschatten für die Eingabefelder:

Eingabefelder mit Schlagschatten nach Innen

Dies funktioniert aber leider nicht immer, denn viele Element-Eigenschaften (z.B. Schriftgröße, Schriftarten, Farben, etc.) werden über Theme-Optionen festgelegt. Diese Theme-Optionen werden als sogenannte Inline-Styles in das Theme integriert und haben dadurch Vorrang vor den Deklarationen in einem Stylesheet, egal ob Parent- oder Child-Theme.

Aber auch hierfür gibt es eine Lösung: das Attribut !important. Wenn ihr dieses hinter eine Deklaration hängt, bekommt diese Eigenschaft oberste Priorität und Vorfahrt vor einem konkurierenden Inline-Style.

Ein Beispiel? Das Theme hat ein Kommentar-Info-Feld. Dort wird angezeigt, wenn keine Kommentare vorhanden sind, die Kommentare geschlossen sind, usw..

Theme-Farben im Child-Theme finden

Die Hintergrundfarbe des Elements wird durch eine Theme-Farbe bestimmt, welche durch einen Inline-Style in der Datei header.php festgelegt ist:

.wp-pagenavi a:hover,
h6.notice,
.social li:hover img,
a.more-link:hover,
.post-edit a:hover,
.comment-navigation a:hover,
.header-menu li a:hover,
.header-menu li.current-menu-item a,
.button a:hover,
input[type="submit"]:hover { 
	background-color: #<?php echo $options['alternate_color']; ?>;
}

Wenn wir im Stylesheet des Child-Themes eine Hintergrundfarbe mit dem Anhang !important hinzufügen

/*  
Theme Name: NEUNZEHN (Child-Theme)
Template: NEUNZEHN
*/

@import url("../NEUNZEHN/style.css");


/* Hintergrundfarbe des Kommentar-Info-Feld ändern */
h6.notice {
    background: orange !important;
}

findet das Inline-Style keine Anwendung und der Hintergrund erstrahlt künftig in strahlendem Orange.

Weitergehende Möglichkeiten

Mittels eines Child-Themes können nicht nur Stylesheets angepasst werden. Auch die Templates des Parent-Themes lassen sich individualisieren.

Ein Beispiel: das Menü in der Fußzeile nutzt als Trennzeichen einen Punkt:

Menü mit Punkt als Trennzeichen

Wir machen daraus gleich

Menü mit Strich als Trennzeichen

Und zwar so: kopiert die Datei footer.php aus dem Parent-Theme-Verzeichnis in das Child-Theme-Verzeichnis und öffnet die Datei mit dem WordPress-Editor (Menü „Design“ -> „Editor“). Achtet darauf, dass ihr auch wirklich die Datei aus dem Child-Theme-Verzeichnis bearbeitet (s. Anzeige des Themes oben rechts im Editor).

Sucht nach dem Aufruf des Menüs:

<?php if ( has_nav_menu( 'footer_menu' ) ) { ?>

	<?php

		$defaults = array(
		'depth'      => 1,
		'container_class' => 'footer-menu',
		'theme_location'  => 'footer_menu',
		'menu_class'      => 'footer-navigation',
		'after'		  => '<span class="menu-divider">•</span>',
		);

		wp_nav_menu( $defaults );

	?>

<?php } ?>

und verändert es wie folgt:

<?php if ( has_nav_menu( 'footer_menu' ) ) { ?>

	<?php

		$defaults = array(
		'depth'      => 1,
		'container_class' => 'footer-menu',
		'theme_location'  => 'footer_menu',
		'menu_class'      => 'footer-navigation',
		'after'		  => '<span class="menu-divider">|</span>',
		);

		wp_nav_menu( $defaults );

	?>

<?php } ?>

Fertig.

Und noch eine weitere Möglichkeit der Individualisierung über ein Child-Theme:

WordPress hat eine ausgefeilte Template-Hierarchie. Wenn beispielsweise eine Kategorie aufgerufen wird, prüft WordPress das Vorhandensein von Templates im Theme-Verzeichnis nach folgender Reihenfolge:

  1. category-{slug}.php
  2. category-{id}.php
  3. category.php
  4. archive.php
  5. index.php

Warum ich das schreibe? Theme ‚NEUNZEHN‘ verwendet zum Anzeigen von Kategorien, Schlagworten und sonstigen Archivseiten die Datei archive.php. Angenommen ihr möchtet Schlagworte und Kategorien unterschiedlich darstellen, so könnt ihr über ein Child-Theme auch Templates anlegen, die im Parent-Theme gar nicht vorhanden sind.

Um das Beispiel weiterzuspielen: kopiert die Datei archive.php aus dem Parent-Theme-Verzeichnis in das Child-Theme-Verzeichnis und benennt sie in category.php für Kategorien sowie tag.php für Schlagworte um. Nun könnt ihr die beiden Templates nach Belieben anpassen.

WordPress wird erkennen, dass im Child-Theme ein vorrangiges Template vorhanden ist und beim Aufruf einer Kategorie oder eines Schlagwortes dieses verwenden.

Fazit

Ihr seht, ein Child-Theme ist ziemlich praktisch und bietet eine Vielzahl von Möglichkeiten das Theme eurer Wahl nach euren Vorstellungen anzupassen. Und das auch noch nach dem nächsten Theme-Update.