Ultimativer Guide für dein Child-Theme in WordPress

Du möchtest in deiner WordPress Webseite ein Child-Theme installieren?

Dann bist du hier richtig!

Ich erläutere dir alles was du dazu wissen musst mittels meines WordPress-Theme ‘Elitepress’. Du kannst selbst darüber entscheiden, ob du es lieber mit oder ohne Zugang zu deinem FTP-Server erstellen möchtest.

Im Laufe der Zeit habe ich bereits mehrere WordPress-Blogs erstellt und habe mich leider erst recht spät mit dem Erstellen eines Child-Theme in WordPress beschäftigt.

Das Child-Theme kannst du aber – so wie ich – jederzeit und ohne Probleme auch erst später im Nachhinein erstellen.

Was ist ein Parent-Theme?

Mit ‘Parent-Theme’ oder zu Deutsch auch ‘Eltern-Theme’ wird das Themes bezeichnet, welches dem zu erstellenden Child-Theme übergeordnet ist, weil es alle Funktionen  und Stylings für deine WordPress Webseite enthält.

Was ist ein Child-Theme?

Ein ‘Child-Theme’ ist ein eingeschränktes Abbild deines WordPress-Themes mit nur wenigen Dateien.

Diese dürfen vom ‘Parent-Theme’ abweichen und enthalten eigene Änderungen am Design, den Templates und den Funktionen.

Child-Themes werden von WordPress als empfohlenen Weg vorgeschlagen, wenn du Änderungen an deinem WordPress-Theme vornehmen willst. Mit einem Child-Theme kannst du deine selbst getätigten Änderungen an Dateien aus dem Theme vor dem Überschreiben durch ein Theme-Update schützen.

Wenn du ein Child-Theme installiert und richtig konfiguriert hast, wird beim Laden deiner WordPress-Webseite zuerst im Orignal-Theme (Parent-Theme) nach dem Styling und den Funktionen gesucht. Anschließend wird im Child-Theme nach den darin enthaltenen Änderungen geprüft und angewendet.

Möchtest du also Änderungen am Theme vornehmen, sind die Dateien vom Child-Theme der richtige Ort dafür.

Beispiel anhand meines WordPress-Themes ‘Elitepress’

Im Child-Theme muss die selbe Struktur zu deiner geänderten Datei abgebildet werden, wie sie es im Parent-Theme ist.

Du möchtest Anpassungen in der style.css und der widgets.php vornehmen. Die Style.css Datei liegt direkt im ersten Verzeichnis deines Themes ‘elitepress/style.css‘. Die widgets.php liegt in einem weiteren Unterordner ‘eliteptress/lib/widgets.php’

Dateistruktur im Parent-Theme: 

• /wp-content
  • /themes
    • /elitepress
      • style.css
      • lib
        • widgets.php

Dateistruktur im Child-Theme: 

• /wp-content
  • /themes
    • /elitepress-child
      • style.css
      • lib
        • widgets.php

Wozu brauche ich ein Child-Theme?

Eigene Anpassungen am WordPress-Theme werden bei einem Theme-Update durch den Theme-Hersteller überschrieben.

Um diese Anpassungen beibehalten zu können, wird ein Child-Theme verwendet worin diese Anpassungen gespeichert sind.

Oft werden im Laufe der Zeit und so auch in meinem Fall, Änderungen am Theme vorgenommen. Dabei kann es sich um Änderungen am Styling, Anpassungen an den enthaltenen Templates oder gar Funktionserweiterungen handeln.

All diese Anpassungen werden nicht an den Inhalten einer Datenbank, sondern direkt in deinen Theme-Dateien vorgenommen. Werden diese Dateien geändert, so kann es vorkommen das diese Dateien mit einem Theme-Update durch den Theme-Hersteller überschrieben werden und somit wieder verloren gehen.

Dabei ist es irrelevant, ob du ein Standard-Theme von WordPress selbst, ein kostenloses Theme von einem Drittanbieter oder ein bezahltes Premium-Theme nutzt.

So habe ich kleiner Anpassungen am Design meines Themes in der style.css vorgenommen, welche aber nach einem Update wieder verschwunden sind. Mit einem Child-Theme wäre mir das nicht passiert.

Ein Child-Theme kann jegliche Form der Anpassung beinhalten:

• Angepasstes Styling in einer .css Datei des Themes
• Änderungen an der style.css Datei, welche im Standard das gesamte Layout des Themes beschreibt
• Funktions-Erweiterungen für WordPress in der Datei functions.php, die durch kein Plugin realisiert werden können oder wenn auf den Einsatz eines weiteren Plugins für die Erweiterung darauf verzichtet werden möchte
• Änderungen an den Theme-Templates. Die am häufigst angepassten Templates sind:
  • header.php (stellt den Header des Themes dar)
  • footer.php (stellt den Footer des Themes dar)
  • home.php (zeigt den Blog Index mit den letzten Beiträgen)
  • single.php (zeigt einen einzelnen Blog Beitrag)
  • page.php (zeigt eine statische Seite an)
  • sidebar.php (Darstellung der Sidebar Widgets)

Wie wird ein Child-Theme in WordPress erstellt?

Zum Erstellen eines Child-Themes kannst du zwischen drei Vorgehensweisen entscheiden:

1. Magst du es einfach und hast nicht viel übrig für technische Fummelei, dann kannst du das Child-Theme mithilfe des Plugins  mit geführter Anleitung erstellen
2. Oder du erstellst alle Ordner und Dateien für dein Child-Theme und lädst es anschließend über dein WordPress-Dashboard im Browser hoch
3. Zu guter letzt kannst du es auch auf die gute alte Art erstellen und verbindest dich mit deinem FTP-Server und erstellst dort alle Ordner und Dateien

Child-Theme mit einem Plugin erstellen

Der einfachste und komfortabelste Weg zum Erstellen eines Child-Themes ist es, wenn du dir das Plugin Child Theme Configurator in deine WordPress Installation lädst und die Schritte aus dem geführten Leitfaden befolgst. Das Plugin kannst du im Nachhinein einfach wieder löschen, ohne das dein erstelltes Child-Theme wieder verschwindet.

Plugin herunterladen und installieren

Gehe dazu auf der linken Seitenleiste in deinem WordPress-Dashboard auf ‘Plugins > Installieren’ und Suche nach dem Plugin ‘Child Theme Configurator‘. Klicke auf ‘Installieren’ und nach erfolgter Installation auf ‘Aktivieren’. Alternativ kannst du es über über den Link von WordPress herunterladen und als ZIP-Datei unter ‘Plugins > Plugin hochladen’ in dein WordPress-Dashboard hochladen.

Child-Theme schnell in 10 kurzen Schritten erstellen

Nach erfolgter Installation und Aktivierung findest du die Einstellungen für das Plugin unter ‘Werkzeuge > Kindthemen’ (etwas schräge Übersetzung).

1. Dort wählst du dann im ersten Schritt deine gewünschte Aktion ‘Neues Kindthema ERSTELLEN’

2. Wähle dein ‘Elternthema’ aus, womit das Theme gemeint ist wofür du das Child-Theme erstellen möchtest

3. Klicke auf ‘Untersuchen’. Nach erfolgter Prüfung bekommst du das Ergebnis, ob dein Theme für ein Child-Theme genutzt werden kann

4. Nun gibst du deinem Child-Theme einen Namen

5. und wählst, die im Ergebnis der Prüfung deines Parent-Themes unter Punkt 3. genannte Empfehlung für Schritt 5. Bei mir ist das eine separate Formatvorlage zu wählen, da bereits Einstellungen zur style.css erkannt wurden

6. Wähle ‘Die WordPress Stil-Warteschlange benutzen’ für die gewünschte Funktion einer anpassbaren style.css im Child-Theme

7. Du kannst optional die Child-Theme Eigenschaften anpassen. Für die Funktionalität sind diese irrelevant und belasse sie einfach im Standard, der die Informationen des Parent-Themes beinhaltet und überspringe diesen Punkt

8. Für die Ersterstellung unseres Child-Themes, wählen wir hier den Haken und erhalten somit die Menüs, Widgets und andere Customizer-Einstellungen vom Parent-Theme

9. Zum Schluss klicken wir auf ‘Create New Child Theme’ und werden am dazu aufgefordert das Theme im Customizer auf Funktion zu prüfen, bevor wir es aktivieren.

10. Sind keine Fehler im Customizer zu finden, kannst du das ‘Theme Aktivieren und Veröffentlichen’

Voila, Fertig ist das Ding – du hast dein Child-Theme erstellt!

Nun kannst du das Plugin wieder deaktivieren und löschen, da du es nicht weiter benötigst um dein frisch erstelltes Child-Theme nutzen zu können. Jetzt kannst du damit beginnen Eigenschaften im Child-Theme abweichend von deinem Parent-Theme vorzunehmen ohne das diese durch ein Theme-Update gelöscht werden.

Child-Theme über WordPress ohne FTP erstellen

Eine zweite und einfache Möglichkeit zum Erstellen eines Child-Themes, ist es alles auf deinem PC vorzubereiten und es anschließend über dein WordPress Theme-Dashboard ohne jeglichen Zugriff auf deinen FTP-Server hochzuladen.

Ordner für das Child-Theme erstellen

Lege auf deinem Dateisystem einen neuen Ordner an und benenne ihn in ‘MeinThemeName-child’. Der Platzhalter MeinThemeName ist dabei zu ersetzen durch den Namen deines aktiven Original-Themes.

 

Bei der Ordner-Anlage ist es ganz egal ob du das im Windows-Explorer oder im Finder auf deinem Mac machst.

Datei style.css erstellen

Im Ordner für dein Child-Theme, legst du wie nachfolgend beschrieben die Datei style.css an und fügst dort den Code ein:

In Windows startest du wie Funktion ‘Notepad’ und auf dem Mac das Programm ‘TextEdit’. Die sich öffnende leere Datei speicherst du dann in deinem eben neu erstellten Ordner ab und benennst sie style.css.

Sollte der Dateiname wegen des Dateityps .css nicht möglich sein, speichere es so ab wie vom Programm vorgeschlagen und benenne es anschließend im Ordner auf style.css um. Wenn eine Meldung erscheint, ob du den Dateityp auf .css ändern möchtest, solltest du dies bestätigen.

Im Anschluss öffnest du diese Datei erneut und gibts dort mit einem Kommentar die Informationen zu deinem aktiven Theme an.

Kopiere dazu einfach den folgenden Kommentar als Code und füge diesen in deine style.css ein und speichere sie ab:

/*  START CHILD-THEME SETTINGS
Theme Name: Child Theme Elitepress
Theme URI: https://webriti.com/elitepress/
Description: Child-Theme of Elitepress
Author: webriti
Author URI: https://webriti.com/
Template: elitepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
END CHILD-THEME SETTINGS */

Für den besseren Überblick im Code empfehle ich dir dringend deinen Code immer mit der entsprechenden Funktion zu Kommentieren, so wie im obigen Beispiel mit “START…” und “…END”.

Ansonsten geht es dir wie mir und du weißt später nicht mehr für welche Funktion dieser Code gilt und hast dadurch entweder Code-Leichen durch Duplikate oder löschst es sogar aus versehen.

Im obigen Kommentar gibt es keinen funktionalen Code, da der Text nur dein Theme und den Hersteller beschreibt. Daher sind alle Zeilen innerhalb des Kommentars mit dem Start “/*” und dem Ende “*/” auskommentiert.

Alles was sich zwischen Start und Ende befindet, wird von WordPress als reiner Text verstanden.

Datei functions.php erstellen

Für das Erstellen der Datei functions.php kopierst du einfach die style.css und benennst diese in functions.php um. Alternativ kannst du sie auch genau so erstellen wie die style.css.

In dieser Datei wird definiert, dass zuerst das Stylesheet des Parent-Themes geladen wird. Erst im Anschluss darauf wird das Stylesheet des Child-Themes auf Änderungen geprüft und geladen.

In die functions.php fügst du dann folgenden Code ein:

// START CHILD-THEME FUNCTIONS
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'penci-style-child', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ), wp_get_theme()->get( 'Version' ) );
}
// END CHILD-THEME FUNCTIONS

Auch in diesem Beispiel ist Start und Ende mit einem Kommentar gekennzeichnet. Diesmal ist das Kommentar aber nur Einzeilig hinter den Zeichen “//” zu finden.

Screenshot für die Themevorschau erstellen (optional)

Zur besseren Übersicht kannst du dir bei Bedarf für die Themevorschau in WordPress unter Design > Themes einen Screenshot des Parent-Themes erstellen.

Dazu navigierst du in deinem WordPress-Backend auf ‘Design > Themes’ und öffnest in Windows das Programm ‘Snipping-Tool’. Oder du nutzt auf dem Mac die Tastenkombination ‘Shift+ALT+4’ und schneidest damit den Bereich aus, den du als Vorschau sehen möchtest.

Anschließend solltest du diesen mit dem Dateinamen screenshot.png in dem Verzeichnis deines Child-Themes neben den zuvor erstellten style.css und functions.php ablegen.

Die Vorschau sollte dann so aussehen, wie die deines Parent-Themes:

Child-Theme hochladen

Nachdem zu alle notwendigen Dateien erstellt und im Ordner für dein Child-Theme abgelegt hast, musst du diesen nur noch in dein WordPress hochladen.

Erstelle dazu aus dem Ordner deines Child-Themes einen ZIP-Komprimierten Ordner mit der Dateiendung ‘.zip’, da dieses Dateiformat zum hochladen von WordPress vorgegeben wird.

• Unter Windows kannst du den Ordner einfach mit ‘Bordmitteln’ erstellen, indem du auf den Ordner einen Rechtsklick ausführst und dann ‘Senden an‘ und ‘ZIP-komprimierter Ordner’ klickst. Schon wird eine gleichnamige ZIP-Datei erstellt.
• Auf einem Mac gehst du dazu ähnlich vor und führst einen Rechtsklick auf den Ordner aus und klickst ‘ “NamedeinesOrdners” komprimieren’.

Die erstelle ZIP-Datei lädst du anschließend in deinem WordPress-Backend unter ‘Design > Theme’ hoch, indem du oben auf ‘Theme hinzufügen’ klickst und die ZIP-Datei auswählst:

Child-Theme aktivieren

Zu guter letzt musst du nur noch das neu angelegte Child-Theme unter ‘Design > Themes’ aktivieren.

Dafür klickst du auf das Child-Theme und klickst in den sich öffneneden ‘Theme-Details’  auf ‘Aktivieren’.

Dort solltest du bei korrekter Einrichtung auch den Text ‘Dies ist ein Child-Theme von DeinThemeName’ sehen.

Webseite nach Aktivierung des Child-Themes auf Fehler prüfen (optional)

Um die korrekte Funktionsweise des Child-Themes zu prüfen und späteren Überraschungen vorzubeugen, kannst du dann auf die Besucheransicht deiner Webseite wechseln und die Funktionen und Ansichten prüfen.

Gib dafür einfach dir URL deiner WordPress-Webseite in den Browser ein und klicke dich in Stichproben durch die verschiedenen Seiten. Wenn dein Theme bestimmte Funktionen bietet und du diese nutzt, dann prüfe diese, ob sie weiterhin mit aktiviertem Child-Theme funktionieren.

So bist du auf jeden Fall auf der sicheren Seite.

Child-Theme mit FTP-Programm oder WebFTP erstellen

Zuerst solltest du dich mit dem FTP-Server verbinden, worauf sich die Installation deiner WordPress-Webseite befindet.

Wenn du noch kein FTP-Programm eingerichtet hast oder der FTP-Server ist dir unbekannt, kannst du auch über den Browser mit WebFTP darauf zugreifen.

Die Zugangsdaten für den FTP-Server erhältst du von deinem Hosting-Anbieter. In meinem Fall ist das der Anbieter All-Inkl.

Zum Verbinden mit dem FTP-Server benötigst du folgende Informationen:

• Server-Name
• FTP-User
• FTP-Passwort

Ist dir der Servername nicht bekannt, so kannst du dich auch je nach Hosting-Anbieter auch mit dem Browser und lediglich dem FTP-User und dem FTP-Passwort am FTP anmelden.

Ordner für das Child-Theme erstellen

Sobald du mit deinem FTP-Server mittels FTP-Programm oder WebFTP verbunden bist, legst du dort parallel zum aktiven Themes den Ordner für dein Child-Theme an und benennst diesen in ‘MeinThemeName-child’ um.

Datei style.css erstellen

Im Ordner für dein Child-Theme, legst du wie nachfolgend beschrieben die Datei style.css an und fügst dort den Code ein:

In Windows startest du wie Funktion ‘Notepad’ und auf dem Mac das Programm ‘TextEdit’. Die sich öffnende leere Datei speicherst du dann in deinem eben neu erstellten Ordner ab und benennst sie style.css.

Sollte der Dateiname wegen des Dateityps .css nicht möglich sein, speichere es so ab wie vom Programm vorgeschlagen und benenne es anschließend im Ordner auf style.css um. Wenn eine Meldung erscheint, ob du den Dateityp auf .css ändern möchtest, solltest du dies bestätigen.

Im Anschluss öffnest du diese Datei erneut und gibts dort mit einem Kommentar die Informationen zu deinem aktiven Theme an.

Kopiere dazu einfach den folgenden Text und füge diesen in deine style.css ein und speichere sie ab:

/*  START CHILD-THEME SETTINGS
Theme Name: Child Theme Elitepress
Theme URI: https://webriti.com/elitepress/
Description: Child-Theme of Elitepress
Author: webriti
Author URI: https://webriti.com/
Template: elitepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
END CHILD-THEME SETTINGS */

Für den besseren Überblick im Code empfehle ich dir dringend deinen Code immer mit der entsprechenden Funktion zu Kommentieren, so wie im obigen Beispiel mit “START…” und “…END”.

Ansonsten geht es dir wie mir und du weißt später nicht mehr für welche Funktion dieser Code gilt und hast dadurch entweder Code-Leichen durch Duplikate oder löschst es sogar aus versehen.

Im obigen Kommentar gibt es keinen funktionalen Code, da der Text nur dein Theme und den Hersteller beschreibt. Daher sind alle Zeilen innerhalb des Kommentars mit dem Start “/*” und dem Ende “*/” auskommentiert.

Alles was sich zwischen Start und Ende befindet, wird von WordPress als reiner Text verstanden.

Datei functions.php erstellen

Für das Erstellen der Datei functions.php kopierst du einfach die style.css und benennst diese in functions.php um. Alternativ kannst du sie auch genau so erstellen wie die style.css.

In dieser Datei wird definiert, dass zuerst das Stylesheet des Parent-Themes geladen wird. Erst im Anschluss darauf wird das Stylesheet des Child-Themes auf Änderungen geprüft und geladen.

In die functions.php fügst du dann folgenden Code ein:

// START CHILD-THEME FUNCTIONS
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'penci-style-child', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ), wp_get_theme()->get( 'Version' ) );
}
// END CHILD-THEME FUNCTIONS

Auch in diesem Beispiel ist Start und Ende mit einem Kommentar gekennzeichnet. Diesmal ist das Kommentar aber nur Einzeilig hinter den Zeichen “//” zu finden.

Screenshot für die Themevorschau erstellen (optional)

Zur besseren Übersicht kannst du dir bei Bedarf für die Themevorschau in WordPress unter Design > Themes einen Screenshot des Parent-Themes erstellen.

Dazu navigierst du in deinem WordPress-Backend auf Design > Themes und öffnest in Windows das Programm ‘Snipping-Tool’. Oder du nutzt auf dem Mac die Tastenkombination ‘Shift+ALT+4’ und schneidest damit den Bereich aus, den du als Vorschau sehen möchtest.

Anschließend solltest du diesen mit dem Dateinamen screenshot.png in dem Verzeichnis deines Child-Themes neben den zuvor erstellten style.css und functions.php ablegen.

Die Vorschau sollte dann so aussehen, wie die deines Parent-Themes:

Child-Theme aktivieren

Zu guter letzt musst du nur noch das neu angelegte Child-Theme unter ‘Design > Themes’ aktivieren.

Dafür klickst du auf das Child-Theme und klickst in den sich öffnenden ‘Theme-Details’  auf ‘Aktivieren’.

Dort solltest du bei korrekter Einrichtung auch den Text ‘Dies ist ein Child-Theme von DeinThemeName’ sehen.

Webseite nach Aktivierung des Child-Themes auf Fehler prüfen (optional)

Um die korrekte Funktionsweise des Child-Themes zu prüfen und späteren Überraschungen vorzubeugen, kannst du dann auf die Besucheransicht deiner Webseite wechseln und die Funktionen und Ansichten prüfen.

Gib dafür einfach dir URL deiner WordPress-Webseite in den Browser ein und klicke dich in Stichproben durch die verschiedenen Seiten. Wenn dein Theme bestimmte Funktionen bietet und du diese nutzt, dann prüfe diese, ob sie weiterhin mit aktiviertem Child-Theme funktionieren.

So bist du auf jeden Fall auf der sicheren Seite.

Häufig gestellte Fragen zum Child-Theme | FAQ

Wo finde ich ein Child-Theme von meinem Theme-Hersteller?

Manche Theme-Hersteller bieten bereits ‘ab Werk’ ein Child-Theme, was du lediglich herunterlädst und importierst.

Um Herauszufinden ob für dein Theme ein Child-Theme zum Download angeboten wird, versuche es ganz einfach über Google herauszufinden. Dazu reicht es wenn du in Google den Begriff Child-Theme mit deinem Theme Namen suchst!

Mein Theme heißt ‘ElitePress’ und in Google gebe ich dazu einfach ‘Child Theme ElitrePress’ ein. Einer der ersten Treffer könnte die Anleitung zum Einrichtung eines fertigen Child-Themes von deinem Theme-Hersteller sein. Ist das nicht der Fall, befolge meine ausführliche Anleitung in obigem Artikel 🙂

Was kann ich tun, wenn das hochgeladene Child-Theme als ‘Beschädigt’ gekennzeichnet wird?

Nicht jedes Parent-Theme lässt das Erstellen eines Child-Themes auf die genannte Art und Weiße zu. Sollte dein Child-Theme als Beschädigt gekennzeichnet werden, weil das übergeordnete Parent-Theme nicht erkannt wird, dann Lösche es wieder und Suche im Web nach dem Begriff ‘DeinThemeName Child Theme’.

Im Regelfall wirst du dann auf der Theme-Hersteller-Seite fündig und erhältst dort weitere Anweisungen für das Erstellen eines Child Themes.

So kann es zum Beispiel sein, dass dir empfohlen wird das Child-Theme anhand eines vorgefertigten Sample für dein Child-Theme hochzuladen und zu installieren, weil das Parent-Theme Funktionen zum Erkennen eines Child-Themes enthält, die du nicht ohne ausreichend Kenntnisse  nachbilden kannst.