Child-Theme erstellen – So wird es gemacht!

Grips.Art - Webdesign Kassel

Wie und Wieso du ein Child-Theme erstellen solltest - erkläre ich dir anhand von praktischen Beispielen im folgenden Tutorial.

Child-Theme erstellen – So wird es gemacht!

Wieso ein Child-Theme erstellen?

Ein Child-Theme ist wohl der eleganteste Weg, Änderungen an deinem Theme vorzunehmen, ohne die originalen Dateien zu überschreiben.

Das bringt zum einem den Vorteil, immer den Urzustand wiederherstellen zu können, aber viel wichtiger noch, bei einem Theme-Update die Änderungen nicht zu verlieren.

Diese Dinge kannst du mit einem Child-Theme ändern:

  • CSS Anweisungen einfügen oder ändern
  • Aufbau des Themes verändern
  • Theme Funktionen abändern oder hinzufügen
  • Spezielle Seiten-Templates anlegen

Doch Child-Themes haben auch Nachteile, welche das sind, findest du hier.

Die rote oder die blaue Pille?

Wie auch in der Matrix, musst du dich für einen Weg entscheiden, gehst du den Weg mit einem WordPress Plugin oder erstellst du es selbst?

Ich habe für dich 3 kostenlose Child-Theme-Plugins getestet, mehr dazu erfährst du am Ende dieses Beitrages. Springe zu den Plugins

Child Theme erstellen in 2 Schritten – Let´s Go!

Schritt 1: Die Child-Theme Grundstruktur

Als erstes verbindest du dich  mit einem FTP-Programm mit deinem Server/Webspace und navigierst zu deiner WordPress-Installation in den Ordner /wp-content/themes . Hier siehst du alle Themes die installiert sind.

Auf dieser Ebene erstellst du nun einen neuen Ordner und benennst ihn nach folgender Struktur: themename_child
also z.B. twentyseventeen_child,
wenn du ein Child Theme für das neue Twenty Seventeen Theme erstellen willst.

Erstelle eine neue leere Datei mit der Bezeichnung „style.css“ in den eben angelegten Ordner.

Damit WordPress dein Child-Theme als Theme erkennt, musst du ein paar Zeilen Code in deine neue „style.css“ einfügen.

Hier ein Beispiel für das Twenty Seventeen Theme:

/*
Theme Name: Twenty Seventeen Child-Theme
Description: Ein Child-Theme für Twentyseventeen
Author: Grips.Art
Author URI: https://webdesign-vellmar.de
Template: twentyseventeen
Version: 1.0
*/

 

In Zeile 2 findest du den Namen, unter dem du dein Child-Theme später im Backend unter Design / Themen findest.

Am wichtigsten ist hier allerdings Zeile 6, denn hier musst du den Verzeichnis-Namen deines Parent-Themes, also des Themes für das du ein Child-Theme erstellst, einfügen.

Zur Grundstruktur eines Child-Themes gehört eine weitere Datei, die „functions.php“.

Lege also eine neue, leere Datei mit dem Namen „functions.php“ in deinem Child-Theme Ordner an.

Mit der „functions.php“ können wir nun unsere CSS-Datei im Theme einbinden, da du aber sicherstellen musst, dass deine Child-CSS-Datei nach der originalen CSS-Datei geladen wird, musst du erst die originale Datei deregistrieren und danach in der richtigen Reihenfolge wieder registrieren.

Wie das gemacht wird, zeige ich dir hier:

<?php 
function twentyseventeen_child_styles() { 
wp_deregister_style( 'twentyseventeen-style'); 
wp_register_style('twentyseventeen-style', get_template_directory_uri(). '/style.css'); 
wp_enqueue_style('twentyseventeen-style', get_template_directory_uri(). '/style.css'); 
wp_enqueue_style( 'childtheme-style', get_stylesheet_directory_uri().'/style.css', 
array('twentyseventeen-style') ); 
} 
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_styles' ); 
?>

 

Der Code schnell erklärt:
In Zeile 2 erstellst du eine function, die du in Zeile 8 mit der Funktion add_action() einhängst/aufrufst.

In Zeile 3 deregistriert du die Originale CSS-Datei deines Themes, der Handler (in diesem Fall „twentyseventeen-style“) ist von Theme zu Theme unterschiedlich und muss aus der Parent-Theme functions.php herausgesucht werden.

Im Falle des Twenty Seventeen Themen findest du ihn in Zeile 376.
twentyseventeen_child slug

Danach (Zeile 4-6) registrierst du die gleiche Datei wieder und bindest beide CSS-Dateien, also die Originale und die deines Child-Themes, in der richtigen Reihenfolge wieder ein.

Schritt 2: Das Backend

Nachdem du nun die Grundstruktur deines Child-Themes erstellt hast, logge dich in dein WordPress-Backend ein und navigiere zu den Themes.

wordpress_backend_themes

Und siehe da, dein Child-Theme wird angezeigt, doch ups – gar kein Bild vorhanden?

Genau! Denn das musst du noch in deinen Child-Theme Ordner legen.
Hierbei ist lediglich zu beachten, dass die Datei „screenshot.png“ heißen muss und eine Auflösung von 600px mal 450px haben sollte.

Aktiviere nun dein Child-Theme, wie jedes andere Theme auch, über den Button „Aktivieren“.

Schritt 3: Spezifische Seiten-Template erstellen

Wenn du spezifische Seiten wie z.B. Beitragsseiten ändern möchtest, kannst du dies sehr einfach tun.

Kopiere hierfür die Datei „single.php“ aus deinem Parent-Theme in deinen Child-Theme-Ordner und nimm deine Änderungen vor.

Ein Beispiel für einen kurzen Test.

Setze eine h3-Überschrift in die neue „single.php“ ein und lade diese in deinen Child-Theme-Ordner:

überschrift im child-theme

Öffne deinen Blog im Browser und navigiere zu einem deiner Beiträge.

Je nachdem, wo du deine Überschrift im Code platziert hast, siehst du sie nun bei jedem deiner Beiträge.

frontend

Gibt es auch Nachteile von Child-Themes?

Warum legen wir doch gleich Child-Themes an?

Genau, damit du Änderungen am Theme vornehmen kannst, ohne sie bei einem Update zu verlieren.

Aber das heißt auch, eventuelle Sicherheitslücken im Theme werden bei einem Update zwar im Parent-Theme geschlossen, du überschreibst den Fix aber mit deiner alten anfälligen Datei im Child-Theme.

Damit ist die Sicherheitslücke praktisch von dir konserviert und existiert auch nach einem Theme-Update.

Also doch kein Child-Theme?

Doch, allerdings mit einem zusätzlichen Plugin.

Mit dem Plugin „Template Checker“ kannst du dein Child-Theme mit dem Parent-Theme vergleichen, wenn es Unterschiede gibt, bekommst du eine Warnung angezeigt und kannst so entscheiden, ob es Änderungen sind die du gemacht hast, oder ob Änderungen am Parent-Theme nach einem Update gemacht wurden. 

Mehr Informationen gibt es in dieser Slideshow von Torsten Landsiedel:

Child-Theme erstellen – mit einem Plugin

Für alle die mit noch weniger Aufwand diese Aufgabe erledigen wollen, gibt es wie für alles andere natürlich auch Plugins.

Aus diesem Grund habe ich die 2 am meisten aktiv genutzten Plugins aus der WordPress.org Plugin Liste ausprobiert und mir den Code der produziert wird genauer angeschaut.

child-theme-plugins

Das Plugin mit den meisten aktiven Installationen ist Child Theme Configurator von Lilaea Media. Bereits ziemlich abgeschlagen liegt das Child Theme Creator by Orbisius von Svetoslav Marinov.

Child Theme Configurator

  • Sehr übersichtliches Backend
  • Optionen gut und einfach beschrieben
  • Spezifische Dateien können eingebunden werden
  • Sauberer Quellcode

Orbisius Theme Editor

  • Spezifische Dateien können eingebunden werden
  • Dateien können im Backend angepasst werden
  • Erstellt unnötig 3 Seiten im Backend – Unübersichtlich am Anfang
  • Erstellt ohne Nachfrage direkt header.php und footer.php im Child-Theme

Fazit

Mit wenigen Handgriffen ist ein Child-Theme erstellt – ganz egal ob mit oder ohne Plugin.

Die Vorteile liegen auf der Hand und ich empfehle jedem ein Child-Theme anzulegen. Auch wenn man bezüglich der oben genannten Möglichkeiten von Sicherheitslücken immer ein Auge darauf behalten sollte.

 

Hast du noch Fragen zu diesem Thema?
Dann beantworte ich diese gerne in den Kommentaren!


Tobias Paulik Author
Tobias Keller

Hi, ich bin Tobias - WordPress-Enthusiast und Web-Entwickler aus Leidenschaft. Ich bin Inhaber der Agentur Grips.Art und ich liebe es Probleme zu lösen!

Meinungen und Feedback zu diesem Artikel sind uns sehr wichtig!

Schreibe jetzt einen Kommentar!

Lasse uns und andere wissen, was du über dieses Thema denkst.

Name*
E-Mail*
Website*

*Name = Keine Pseudonyme / Keywords
*E-Mail Adresse = Wird nicht veröffentlicht
*Website = Keine Spam-Links / Alle No-Follow

Pingback #1 von Einen Text vor dem Titel in einem Wordpress-Post hinzufügen

[…] Eine sehr gute Beschreibung darüber wie die Child-Themes funktionieren und wie man sie erstellt, könnte Ihr im folgenden Beitrag von Tobias Paulik nachlesen: https://webdesign-vellmar.de/child-theme-erstellen/ […]

Geschrieben am 23. Juli 2017 um 22:16 Uhr