WordPress: So erstellst Du ein eigenes Child-Theme

Seitdem WordPress mit der Version 3.0 die Child-Theme-Funktion eingeführt hat, können Themes individuell erweitert werden, ohne Gefahr zu laufen, mühsame Änderungen durch Theme-Updates zu verlieren.

Webdesigner und Entwickler profitieren von Child-Themes, da ein gutes Parent-Theme als Framework flexibel eingesetzt werden und das Webprojekt dadurch zügiger umgesetzt werden kann. Alle guten – meist kostenpflichtigen – WordPress Themes bieten haufenweise Funktionen und Anpassungsmöglichkeiten, sodass Du selbst nicht mehr von Grund auf programmieren brauchst. Das Erstellen eines Child-Themes kann so einfach sein wie das Erstellen einer neuen style.css-Datei. Und tatsächlich ist es das auch!

Das Ergebnis einer Umfrage auf elegantthemes.com hat jedoch gezeigt, dass die meisten Webdesigner immer noch auf das Original-Theme zugreifen, um Änderungen vorzunehmen. Nur etwa ein Drittel greift auf Child-Themes zurück. Offensichtlich scheint die Mehrheit der Webdesigner Schwierigkeiten mit der Umsetzung von Child-Themes zu haben. Dabei ist die Erstellung sehr leicht und dauert in der Umsetzung nur wenige Minuten.

Diese Anleitung widmet sich dieser irrtümlichen Schwierigkeit und zeigt, wie ein WordPress-Child-Theme erstellt wird und gibt außerdem Hinweise zur sinnvollen Verwendung.

Sprungmarken:

• Was ist ein Child Theme?
• Wann ist ein Child-Theme sinnvoll?
• Erstelle Dein eigenes Child-Theme

Was ist ein Child Theme?

Das Child-Theme ist ein Theme, das die Funktionen eines übergeordneten originalen Themes erbt, des sogenannten Parent-Themes (Eltern- oder auch Mutter-Theme). Das Parent-Theme dient dabei als Basis für das Child-Theme. Durch das Erstellen eines Child-Themes wird eine separate Gruppe verschiedener Dateien angelegt, die Du verwenden kannst, um das Child-Theme ohne Beeinflussung des originalen Parent-Themes anzupassen. Ein Child-Theme ist bisher der eleganteste und sicherste Weg, individuelle Änderungen am Parent-Theme vorzunehmen.

Wann ist ein Child-Theme sinnvoll?

Die Entscheidung, ein Child-Theme einzusetzen, hängt oft von Deinen Bedürfnissen ab. Viele Entwickler bauen Websites mit Child-Themes von Framework basierten Themes wie z.B. Genesis, Elegant Themes oder Themify, usw. In den seltensten Fällen, wenn das Projekt sehr einfach oder zu komplex wird, werden individuelle Themes von Grund auf neu gebaut. Schließlich müssen WordPress-Entwickler während der Theme-Entwicklung ihre Arbeitsabläufe optimieren. Ein Parent-Theme als Framework zu nutzen, ist genau das richtige Hilfsmittel, um das zu erreichen.

Wenn Du dein Theme regelmäßig um einige neue Funktionen erweitern möchtest und/oder regelmäßige Änderungen an der style.css-Datei vornehmen möchtest, dann ist der Einsatz eines Child-Themes durchaus sinnvoll.

Warum ist ein gutes Parent-Theme wichtig?

Alle WordPress-Frameworks sind Parent-Themes, aber nicht alle Parent-Themes sind Frameworks. Während jedes WordPress-Theme ein Child-Theme haben kann, können nicht alle Themes als Framework genutzt werden. Anfänger machen häufig den Fehler, ein Child-Theme zu erstellen, das vom Parent-Theme nur wenige Funktionen mitgeliefert bekommt.

Falls Du also gerade dabei sein solltest, ein Child-Theme zu erstellen und dabei eine Menge Dateien vom Parent-Theme zu ersetzen, dann solltest Du jetzt Deinen Prozess überdenken.

Beispiel:
Nehmen wir mal an, Du möchtest ein Child-Theme vom Twenty Eleven-Theme erstellen. Dann beschließt du, dass der Footer Dir in irgendeiner Weise nicht zusagt. Gleiches gilt für den Header, die Sidebar, usw. Wenn dies der Fall ist, dann solltest Du das Twenty-Eleven-Theme nicht als Parent-Theme einsetzen. Vielmehr solltest Du ein Parent-Theme verwenden, das Deinen Anforderungen grundsätzlich entspricht und über einen hohen Funktionsumfang verfügt.

Viele machen den Fehler, das Child-Theme als Ersatz für das Parent-Theme zu verwenden, statt es als ergänzendes Werkzeug wahrzunehmen.

Vorteile eines WordPress-Child-Themes

1. Sichere Updates

   Ein Child-Theme erbt automatisch die Funktionen, Styles und Templates des Parent-Themes. Dies Ermöglicht Dir, Änderungen an Deiner Website vorzunehmen, ohne am Eltern-Theme herumwerkeln zu müssen. Sobald eine neue Version des Eltern-Themes herauskommt, kannst Du es problemlos aktualisieren, während alle Änderungen am Child-Theme vorhanden bleiben.

2. Einfach zu erweitern

   Ein Child-Theme, das auf ein leistungsfähiges Parent-Theme aufgebaut ist, ermöglicht ein hohes Maß an Flexibilität, auch für Webdesigner ohne umfangreiche Programmierkenntnisse.

3. Sicherer Fallback

   Wenn Du ein komplettes Theme von Grund auf selbst erstellst, musst Du dir über alle Szenarien im Klaren sein und den dafür notwendigen fehlerfreien Code bereitstellen. Wenn Du jedoch mit einem Child-Theme arbeitest und dabei mal ein wenig Code für etwas nicht berücksichtigt haben solltest, dann stellt Dir ein gutes Parent-Theme immer eine Fallback-Option zur Verfügung.

4. Learning by Doing

   Anfänger können sich an Theme-Entwicklung ausprobieren, ohne dabei Gefahr zu laufen, Schäden am eigentlichen Theme zu verursachen.

Nachteile bei einem Child Theme

Auf zwei Nachteile möchte ich Dich auch noch hinweisen:

1. Eines der größten Nachteile bei der Verwendung von Child-Themes ist die Zeit, die Du investieren musst, um das Parent-Theme kennenzulernen. Es ist ein Lernprozess, besonders, wenn Du mit einem robusten Framework als Parent-Theme arbeitest, schließlich haben viele von ihnen ihre eigenen Hooks und Filter. Um das Potential aus solchen Themes herauszuholen, solltest Du sie auswendig kennen. Und sobald Du dich in ein Parent-Theme eingearbeitet hast, wirst Du vielleicht auch noch etwas Zeit benötigen bis Du dein erstes Child-Theme erstellt haben wirst. Dieser notwendige Lernprozess ist jedoch eine einmalige Sache. Danach wirst Du im Stande sein, eigene Websites in einem Bruchteil der Zeit umzusetzen.
2. Ein weiterer Nachteil weist häufig darauf hin, dass Theme-Entwickler das Interesse am Projekt verlieren könnten und eingestellt wird. Support, Sicherheit und zukünftige Kompatibilität mit anderen Skripten und Plugins wären dann nicht mehr gewährleistet. Deshalb ist es wichtig, auf populäre Theme-Entwickler zu vertrauen, da häufig andere Entwickler aus der Community das Theme-Projekt übernehmen und weiterführen würden.

Erstelle Dein eigenes Child-Theme

In drei einfachen Schritten erstellst Du dein eigenes Child-Theme (Schritt 3 ist optional):

1. Erstelle einen Ordner im Themes-Verzeichnis Deiner WordPress-Installation. Der Pfad des Verzeichnisses sollte dein-wordpress/wp-content/themes lauten. Vergib eine sinnvolle Ordnerbezeichnung ohne Leerzeichen. Dabei solltest Du die Bezeichnung des Ordners vom Parent-Theme verwenden und mit „-child“ ergänzen wie z.B. „twentyfourteen-child„.
2. Erstelle nun eine CSS-Datei namens style.css und lade sie in das Child-Theme-Verzeichnis wp-content/themes/twentyfourteen-child. Diese CSS-Datei ist die einzige Datei, die Du für die Erstellung eines Child-Themes benötigst.

   Der benötigte CSS-Code sieht aus wie folgt:

   /*
    Theme Name:   Twenty Fourteen Child
    Theme URI:    https://pixeltuner.de//wordpress-child-theme-erstellen
    Description:  Twenty Fourteen Child-Theme
    Author:       Jonathan Torke
    Author URI:   https://pixeltuner.de/
    Template:     twentyfourteen
    Version:      1.0.0
    Tags:         light, dark, right-sidebar, responsive-layout
    Text Domain:  twenty-fourteen-child
   */
   
   @import url("../twentyfourteen/style.css");
   
   /* Theme Anpassungen beginnen hier */
   p {
       margin-bottom: 2em;
   }
   /* Theme Anpassung enden hier */
   

   „Theme Name“ (Zeile 2) und „Template“ (Zeile 7) sind die einzigen Zeilen, die für die Erstellung eines Child-Themes erforderlich sind. Jede weitere Zeile ist optional und kann nach Belieben angepasst oder entfernt werden.

   • Vergebe für Theme Name eine sinnvolle Bezeichnung wie z.B. Twenty Fourteen Child.
   • Für Template benötigst Du die Ordnerbezeichnung des Parent-Themes. In diesem Beispiel liegt das Parent-Theme im Ordner „twentyfourteen„. Verwende deshalb bei „Template:“ die Bezeichnung twentyfourteen.
   • Nun kannst Du Deine Änderungswünsche durch CSS vornehmen. In diesem Beispiel habe ich den Absatzabstand auf 2em geändert (Zeile 16-18).
   • Der Aufruf @import url('../twentyfourteen/style.css'); (Zeile 13) kann entfallen, vorausgesetzt Du möchtest eigene CSS-Strukturen aufbauen.
3. Erstelle eine Screenshot-Grafik (880px x 660px), bevor Du das Child-Theme aktivierst; diese wird als Vorschaubild der verfügbaren Themes im Adminbereich dienen. Lade diese Grafik als screenshot.png in wp-content/themes/twentyfourteen-child.

Child-Theme aktivieren

Aktiviere jetzt das Child-Theme.

1. Logge Dich in den Adminbereich Deiner WordPress-Instanz ein und navigiere Dich über die linke Admin-Navigation zu Design > Themes. Dort solltest Du nun das ein Thumbnail Deines Child-Themes sehen, zusammen mit den anderen verfügbaren Themes.
2. Klicke auf „Aktivieren“.
   

   WordPress Child-Theme aktivieren

Das war’s. Dein Child-Theme ist jetzt aktiv. Alle Stylesheet-Änderungen in twentyfourteen-child/style.css überschreiben nun die angesprochenen Stylesheets des originalen Themes.

Child-Theme über functions.php erweitern

Falls Du weitere Funktionen zu Deinem Theme hinzufügen möchtest, kannst Du dies tun, indem Du eine functions.php-Datei mit den gewünschten Funktionen in das Verzeichnis Deines Child-Themes lädst. Innerhalb der functions.php-Datei gehört ein öffnendes PHP-Tag am Anfang, ein schließendes PHP-Tag am Ende und dazwischen die gewünschten Funktionen.

Das folgende Beispiel zeigt den Inhalt einer solchen functions.php-Datei, in der eine Funktion ausgeführt wird – HTML-Code in Widget-Titel aktivieren:

<?php // Öffnendes PHP-Tag

function html_widget_title( $title ) {
	//HTML tag opening/closing brackets
	$title = str_replace( '[', '<', $title );
	$title = str_replace( '[/', '</', $title );
	// center
	$title = str_replace( 'center]', 'center>', $title );
	$title = str_replace( 'c]', 'center>', $title );
	// bold -- changed from 's' to 'strong' because of strikethrough code
	$title = str_replace( 'strong]', 'strong>', $title );
	$title = str_replace( 'b]', 'b>', $title );
	// italic
	$title = str_replace( 'em]', 'em>', $title );
	$title = str_replace( 'i]', 'i>', $title );
	// underline
	// $title = str_replace( 'u]', 'u>', $title ); 
	$title = str_replace( '<u]', '<span style="text-decoration:underline;">', $title );
	$title = str_replace( '</u]', '</span>', $title );
	// superscript
	$title = str_replace( 'sup]', 'sup>', $title );
	// subscript
	$title = str_replace( 'sub]', 'sub>', $title );
	// del
	$title = str_replace( 'del]', 'del>', $title ); 
	// strikethrough or <s></s>
	$title = str_replace( 'strike]', 'strike>', $title );
	$title = str_replace( 's]', 'strike>', $title ); 
	$title = str_replace( 'strikethrough]', 'strike>', $title ); 
	$title = str_replace( 'tt]', 'tt>', $title ); 
	// marquee
	$title = str_replace( 'marquee]', 'marquee>', $title );
	// blink
	$title = str_replace( 'blink]', 'blink>', $title ); 
	// wtitle1 (to be styled in style.css using .wtitle1 class)
	$title = str_replace( '<wtitle1]', '<span class="wtitle1">', $title );
	$title = str_replace( '</wtitle1]', '</span>', $title );
	// wtitle2 (to be styled in style.css using .wtitle2 class)
	$title = str_replace( '<wtitle2]', '<span class="wtitle2">', $title );
	$title = str_replace( '</wtitle2]', '</span>', $title );
	return $title;
}
add_filter( 'widget_title', 'html_widget_title' );

?> //Schließendes PHP-Tag

Diese neue PHP-Funktion wird nun vor den Funktionen des Parent-Themes geladen.

Weitere Theme-Dateien anpassen

Neben den Änderungen an der style.css– und functions.php-Datei, kannst Du auch weitere strukturelle Änderungen an den Template-Dateien des Parent-Themes vornehmen, die Du durch das Child-Theme ersetzen kannst wie zum Beispiel:

• header.php
• footer.php
• index.php
• single.php
• page.php
• sidebar.php
• includes/loop.php
• includes/slider.php

Im Gegensatz zur Bearbeitung der fucntions.php-Datei, wo die ursprünglichen Funktionen einfach nur ergänzt werden, werden bei den Template-Dateien die ursprünglichen Dateien ignoriert und stattdessen die neue Template-Datei verwendet. Das was Du hier also tun musst ist, die ursprüngliche Template-Datei zu replizieren und in das Child-Theme zu kopieren, das die gleiche Struktur aufweist, wie das originale Parent-Theme.

Beispiel:
Wenn Du twentyfourteen/page-templates/full-width.php anpassen möchtest, brauchst Du diese Datei nur kopieren, dessen Inhalt in twentyfourteen-child/page-templates/full-width.php laden und nach Belieben zu ändern.

Child-Theme-Struktur

WordPress weiß, dass die neue Template-Datei geladen werden soll, weil der Dateiname und die Dateistruktur dem der Original-Datei entspricht.

Beispiel:
Sollte das Parent-Theme keine home.php-Datei beinhalten, kannst Du sie dennoch in das Child-Theme hinzufügen. WordPress wird sie erkennen und laden, da es immer zuerst nach einem Child-Theme und einer darin angeforderten Datei sucht. Erst im weiteren Schritt bedient sich WordPress am Parent-Theme.

Schluss

Es ist wichtig, sich über geplante Änderungen frühzeitig bewusst zu sein, um entscheiden zu können, ob der Einsatz eines Child-Themes tatsächlich sinnvoll ist. Wenn sich herausstellen sollte, dass zu viele Änderungen am Parent-Theme notwendig sind, dann solltest Du ein besser geeignetes Parent-Theme einsetzen oder vielleicht sogar ein individuelles Theme von Grund auf neu bauen.

Man sollte sich bei der Erstellung von Parent- und Child-Themes stets im Klaren darüber sein, über ausreichendes und professionelles Verständnis zu verfügen. Zwar ist das Erstellen eines eigenen Stylesheets sehr leicht, wie zuverlässig ein Child-Theme aber tatsächlich funktioniert, ist dann doch von den Fähigkeiten des jeweiligen Entwicklers abhängig.

Über folgenden Download-Link kannst Du das, in diesem Tutorial beschriebene, „Twenty Fourteen“-Child-Theme herunterladen:

Zusätzliche Child-Theme-Ressourcen

1. One-Click Child-Theme-Plugin:
   Wenn Du dennoch Schwierigkeiten bei der Erstellung eines Child-Themes haben solltest, wird Dir dieses Plugin sicherlich eine große Hilfe sein. Es erstellt für Dich ein Child-Theme mit nur einem Klick.
2. WordPress Codex:
   Wenn Du noch Klärungsbedarf zu diesem Tutorial hast, schau doch mal bei den WordPress-Dokumentationen vorbei. Dort gibt es eine Menge zusätzlicher Informationen über WordPress-Child-Themes.
3. WordPress Theme:
   Das Unuk Theme für WordPress erstellt automatisch Child Themes oder Duplikate der Eltern Themes, schnell und sicher über den Admin Bereich – Du bist nur einen Klick davon entfernt.