Code Crash #9 – Child-Themes in WordPress erstellen

In diesem Beitrag biete ich euch eine Anleitung für die Erstellung und Benutzung von Unter-Themen (auch Child-Themes genannt) in WordPress.

Übersicht der Anleitung zur Erstellung und Nutzung von Child-Themes in WordPress

Zuerst möchte ich euch einen kurzen Überblick geben, was ihr in dieser Anleitung erwarten dürft.

[mwm-aal-display]

Klickt auf den jeweiligen Punkt, um direkt zu der gewünschten Information zu springen. Mit einem Klick auf das Zeichen # neben einer Überschrift kommt ihr zurück zu dieser Themen-Übersicht.

Voraussetzungen in dieser Anleitung

Als Grundlage dieser Anleitung dient die Installation von WordPress, die wir in einem früheren Tutorial durchgeführt haben.

Erstellung und Benutzung von Child-Themes in WordPress

Einführung in Child-Themes

WordPress bietet jedem Webseiten-Betreiber über Themes die Möglichkeit, das Aussehen der Webseite 100% an die eigenen Bedürfnisse anzupassen. Für alle, die nicht die Zeit haben, ein komplett eigenes Theme zu erstellen gibt es im Internet mehr als genug Quellen für kostenlose oder kostenpflichtige Themes. Da diese Themes jedoch von jemand erstellt wurden, passend diese meistens nicht genau zu den eigenen Wünschen für das Theme. An dieser Stelle bietet WordPress mit Child-Themes eine sehr gute Möglichkeit, diese fremden Themes anzupassen, ohne das Fremd-Theme selbst anpassen zu müssen. Dies ermöglicht dann weiterhin, dass dieses Theme Updates vom Ersteller erhalten kann. Nach diesen Updates müssen dann, sollte es zu Fehlern gekommen sein, diese im Child-Theme korrigiert werden.

Generell kann man sagen dass WordPress bei einem Child-Theme nach einer Grund-Regel arbeitet:

Existiert eine Datei im Child-Theme wird diese genutzt. Existiert diese nicht, wird im Eltern-Theme gesucht und diese, falls vorhanden, genutzt.

In diesem Beispiel werde Ich zeigen, wie ein Child-Theme der WordPress-Theme twentyfourteen erstellt und benutzt wird.

Erstellung eines neuen Child-Themes

Um ein Child-Theme anzulegen, legt Ihr einen neuen Ordner im Verzeichnis ‚/wp-content/themes‘  an. In diesem Verzeichnis legt Ihr eine neue Datei mit dem namen ’style.css‘ an.

Um WordPress mitzuteilen, dass es sich bei diesem Theme um ein Child-Theme eines bestehenden Themes handelt, müsst Ihr in dieser Datei folgenden Code direkt am Anfang einfügen:

/*
 Theme Name:   Twenty Fourteen Child
 Template:     twentyfourteen
*/

 Unter ‚Theme Name‚ gebt Ihr einen Namen für euer Child-Theme an. Dieser Name wird von WordPress im Menü ‚Design‚ >> ‚Themes‚ verwendet.

Unter ‚Template‚ müsst Ihr den Namen des Eltern-Themes einfügen. Der Name entspricht dem Ordner-Namen im Verzeichnis ‚/wp-content/themes‘.

Ihr könnt in diesem Snippet noch viel mehr Informationen über euer Theme angeben. Wenn Ihr mehr erfahren möchtet, könnt Ihr unter folgendem Link mehr erfahren.

Mehr zu Child-Themes erfahren (WordPress Codex in Englisch)

Von nun an könnt Ihr in eurem Child-Theme Verzeichnis jede Datei überschreiben, die in dem Eltern Theme verwendet wird. Dazu müsst Ihr in dem Child-Theme Verzeichnis eine Datei mit exakt demselben Namen erstellen. Wenn Ihr nur kleine Anpassungen an einer Datei vornehmen wollt, solltet Ihr den bisherigen Inhalt der Datei in eure neue Datei kopieren.

Benutzung von Child-Themes in WordPress

Um ein Child-Theme zu benutzen müsst Ihr im WordPress Backend in das Mneü ‚Design‚ >> ‚Themes‚ gehen.

Hier werden euch alle Themes aufgelistet, die WordPress im Verzeichnis ‚/wp-content/themes‘ gefunden hat und verwenden kann.

Hier sollte nun auch euer Child-Theme angezeigt werden.

Wenn Ihr nun mit der Maus über euer Child-Theme geht, erhaltet Ihr eine blaue Schaltfläche ‚Aktivieren‘. Klickt Ihr auf diese Schaltfläche, wird euer Child-Theme verwendet und alle Änderungen werden aktiv.

Hinweise zu Child-Themes in WordPress

An dieser Stelle möchte Ich euch noch ein paar Tipps zur Nutzung von Child-Themes auf den Weg geben.

Nutzung des CSS des Eltern-Themes

Wer nicht nach jedem Update das aktualisierte CSS des Eltern-Themes mit seinem Child-Theme CSS abgleichen will, kann über folgendes Snippet, dass in die Datei ‚functions.php‘ im Child-Theme eingefügt werden muss, das Eltern-CSS mit laden lassen. In der Datei ’style.css‘ im Child-Theme müssen dann nur noch die überarbeiteten CSS-Anweisungen hinterlegt werden.

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

---