Wie verwende ich ein WordPress Child Theme?

Veröffentlicht von in WordPress

Warum Sie unbedingt ein Child Theme für Ihre WordPress Website verwenden sollten.

Die Erstellung eines WordPress Child Theme erspart Ihnen eine Menge von zukünftigen Kopfschmerzen bei der Aktualisierung Ihrer WordPress Website. Verwenden Sie unbedingt ein WordPress Child Theme, wenn Sie ein fertiges Theme Template verwenden und dieses für Ihre Zwecke personalisiert haben oder vorhaben dies zu tun.

Insbesondere Premium Themes von hochwertigen Templateanbietern werden relativ häufig vom Hersteller aktualisiert, um sie an WordPress-Core Updates, Plugin-Aktualisierungen, etc. anzupassen. Aber auch bei der Verwendung eines WordPress Standardthemes werden fast immer individuelle Anpassungen vorgenommen. Daher ist die Verwendung eines WordPress Child Themes grundsätzlich empfehlenswert.

WordPress Child Theme

Ohne ein WordPress Child Theme verlieren Sie bei einem Theme Update Ihre speziellen Anpassungen, zB. in der style.css, in der function.php, oder in anderen Theme .php-Files, die Sie vermutlich intensiv bearbeitet haben. Um dem zu entgegnen, verwenden Sie die einfach zu handhabende WordPress Funktion Childtheme. Im Folgenden eine übersichtliche Step by Step Erklärung, wie Sie erfolgreich ein WordPress Childtheme anlegen und für Ihre Website nutzen.

WordPress Child Theme

Voraussetzungen

Ich gehe davon aus, dass Sie bereits ein Theme installiert und aktiviert haben. Themes befinden sich in Ihrer WordPress Installation im Verzeichniss /wordpress/wp-content/themes auf Ihrem Webserver. Sie finden dort die WordPress Standardthemes Twentyeleven, Twentytwelve, etc.

Wenn Sie noch kein individuelles WordPress Theme installiert haben, beschaffen Sie sich bitte zunächst ein WordPress Theme, welches Ihnen gefällt. Themes (sie werden manchmal auch als Temples bezeichnet) gibt es im Internet in Mengen. Einige werden als Freedownload offeriert, andere sind als bezahlbare Premium Themes erhältlich.

Ich empfehle Ihnen unbedingt, ausschließlich bezahlte Templates eines etablierten Anbieters zu verwenden. Ansonsten ist das Risiko recht hoch, ein Theme zu verwenden:

  • dass nicht an die regelmäßig durchgeführten WordPress Updates angepasst wird
  • welches möglicherweise schlecht programmiert wurde
  • für das es keinerlei Support gibt
  • oder welches im schlechtesten Falle sogar Maleware (Schadsoftware) beinhaltet

Attraktive, gut gepflegte sowie sehr sichere Themes erhalten Sie zum Beispiel hier:
>> Elegant Themes (Affiliate Link) *
>> Themeforest

* Dieser Link ist ein “Affiliate-Link”.
Dies bedeutet, wenn Sie auf diesen Link klicken und ein Theme von Elegant Themes erwerben, erhalte ich eine Affiliate-Provision.

WordPress Child Theme

Step 1: Verzeichnisse etablieren

  • Begeben Sie sich auf Ihrem Webserver mit Hilfe eines FTP-Programmes in das Verzeichnis /wordpress/wp-content/themes
  • Erstellen Sie dort einen neuen Ordner, den Sie zB. your-child-theme benennen

So sollte der Dateipfad auf Ihrem Server aussehen:
/wordpress/wp-content/themes/your-child-theme /

WordPress Child Theme

Step 2: Eine style.css anlegen

Erzeugen Sie mit einem Text Editor eine neues CSS-Datei. Benennen Sie diese Datei style.css. Tragen Sie in diese Datei folgenden Code ein:

/* Theme Name:  your-child-theme
Theme URI:      https://www.your-domain.de/

Description:    My Super Fine Child Theme

Author:         Your Name

Author URI:     https://www.your-domain.de/

Template:       The Parent Theme

Version:        1.0.0
*/
@import url("../the-parent-theme/style.css");

/* ---- Ihre Themeaktualisierungen beginnen hier: ---- */

Seien Sie bei diesem Schritt sorgfältig. Während Sie bei der Benennung des Theme Name, der Theme URI, der Description, der Version und des Authors komplett frei sind, müssen Sie bei Template, sowie @import url absolut präzise sein. Bei Template tragen Sie den exakten Namen des von Ihnen verwendeten Themes ein. Man nennt dieses übergeordnete Theme in diesem Zusammenhang auch Parent Theme

Heisst das von Ihnen verwendete Parent Theme beispielsweise my_Parent_Theme-101, so müssen Sie diese Bezeichnung auch präzise in Gross- und Kleinschreibung mit Sonderzeichen unter my_Parent_Theme-101 angeben. Auch die exakte Pfadangabe der @import url ist wichtig. Stimmen die in der style.css angegebenen Bezeichnungen oder Pfade nicht, können Sie im nächsten Schritt Ihr neues WordPress Childtheme im WordPress Backend nicht anmelden.

Speichern Sie die von Ihnen erzeugte style.css Datei in dem von Ihnen im vorherigen Schritt erzeugten Ordner your-child-theme.

So sollte der Dateipfad auf Ihrem Server aussehen: 
/wordpress/wp-content/themes/your-child-theme/style.css

Ihr neues Child Theme ist von Ihrem Parent Theme abhängig. Wird zB. das Parent Theme im Ganzen oder in Teilen gelöscht, funktioniert auch das WordPress Child Theme nicht mehr, da es nicht eigenständig ist.

WordPress Child Theme

Step 3: Aktivieren Sie Ihr WordPress Childtheme im Back-End

Sobald ein Childtheme Folder auf Ihrem Webserver existiert, in dem sich eine valide style.css befindet, können Sie das auf den Server hochgeladene WordPress Childtheme im Back-End Ihrer WordPress Installation aktivieren.

Gehen Sie hierzu im WordPress Dashboard zu dem Reiter Design und dort zum Reiter Themes. Im oberen Abschnitt finden Sie das zur Zeit aktuelle Theme. Darunter befinden sich weitere, zur Zeit inaktive Themes. Klicken Sie auf das von Ihnen gewünschte Theme (in unserem Falle also your-child-theme), aktivieren Sie es und speichern Sie Ihre Änderung. Ab sofort nutzen Sie Ihr neues WordPress Child Theme.

Sollten Sie im Reiter Design/Themes Ihr Childtheme nicht angezeigt bekommen, oder WordPress Ihr Child Theme als defekt meldet, überprüfen Sie, ob sich der Ordner your-child-theme im Themes-Ordner Ihrer WordPress Installation auf dem Server befindet, und ob der in der style.css angegebene Pfad für @import url: richtig ist.

Hat alles geklappt, sehen Sie im Dashboard folgendes:

WordPress Child Theme

Step 4: Individualisierung Ihres Child Themes mit der style.css

OK. Sie haben nun ein WordPress Child Theme erstellt und hochgeladen. Augenblicklich sieht das Child Theme exakt so aus, wie das Parent Theme, da ja noch keinerlei Individualisierungen (man spricht auch von Customization) durchgeführt wurden. Die häufigsten Änderungen werden Sie im CSS Ihres Child Themes durchführen. Fügen Sie hierfür unter der @import Zeile Ihre Änderungen hinzu.

Wichtig: Alle in der style.css des Child Themes hinterlegten neuen CSS-Informationen werden nach dem ursprünglichen style.css des Parent Themes geladen. Da sich unsere neue style.css über den Befehl @import url unterhalb des Originals befindet, überschreiben alle neuen CSS-Stile die Originaleinträge. So wird zum Beispiel ein Eintrag .my_class der CSS-Datei des Parent Themes durch den Eintrag .my_class im Child Theme überschrieben:

/* Theme Name:  Your Child Theme
Theme URI:      https://www.your-domain.de/

Description:    My Super Fine Child Theme

Author:         Your Name

Author URI:     https://www.your-domain.de/

Template:       The Parent Theme

Version:        1.0.0
*/
@import url("../the-parent-theme/style.css");

/* ---- Ihre Themeaktualisierungen beginnen hier: ---- */
.my_class { color: #5bbc26; font-weight: 500;}

Die Änderungen in Ihrem style.css sollten sofort auf Ihrer Website angezeigte werden. Überprüfen Sie Ihre Änderungen.

Sollten die Änderungen nicht angezeigt werden, führen Sie folgende Schritte durch:

  • Browser cachen CSS-Informationen. Leeren Sie den Cache Ihres Browsers, ggfs. mehrmals nacheinander
  • Checken Sie Sie Ihre Änderungen in der style.css, ist die Syntax Ihres Codes korrekt?
  • Ergänzen Sie Ihren Code wie folgt:
    .my_class { color: #5bbc26; font-weight: 500 !important;}

WordPress Child Theme

Step 5: Individualisierung der functions.php

In der functions.php werden die wichtigsten Funktionen Ihres WordPress Themes gespeichert. Aus dem von Ihnen verwendeten Parent Theme werden diese Funktionen automatisch in Ihr WordPress Child Theme geladen. Wenn Sie neue, benutzerdefinierte Funktionen zu Ihrem Child Theme hinzufügen möchten, dann erreichen Sie dies, indem Sie eine neue, l e e r e Datei functions.php in Ihrem Ordner your-child-theme erzeugen oder hochladen.

Die hier etablierten neue Funktionen werden direkt vor den Funktionen des übergeordneten Parent Themes geladen. Die functions.php Datei Ihres WordPress Child Themes sollte mit einem <? Tag starten und ebenfalls mit einem ?> Tag enden. Dazwischen fügen Sie Ihre gewünschte PHP-Code ein.

So sollte es aussehen:
<!--?php           // Fügen Sie hier Ihren Code ein ?>

WordPress Child Theme

Step 6:
Individualisierungen anderer Bereiche Ihres Themes

Über Modifikationen des CSS und der Theme Funktionen hinaus können Sie auch strukturelle Veränderungen Ihrer Website erreichen, indem sie gezielt in die die PHP-Template-Dateien in Ihrem WordPress Child Theme eingreifen. Sie können durch die Bearbeitung des PHP- sowie des HTML-Codes jeden Teil Ihres Themes an Ihre individuellen Bedürfnisse anpassen. Wie schon bei den oben aufgeführten Modifikationen sollten Sie auch hier mit Vorsicht und Bedacht vorgehen.

Erstellen Sie unter allen Umständen zunächst ein Backup Ihrer originalen WordPress Installation auf Ihrem Server, damit Sie, falls irgendetwas schiefgeht, darauf zurück greifen können Im Gegensatz zu der oben beschriebenen Bearbeitung der functions.php des Child Themes, welche automatisch in die ursprüngliche functions.php des Parent Themes importiert werden, ersetzen bearbeitete PHP-Template Dateien des WordPress Child Themes die Originale vollständig.

Die ursprüngliche Datei wird ignoriert und stattdessen die neue verwendet. Kopieren Sie die Originaldatei aus Ihrem Parent Theme Ordner in Ihren Child Theme Ordner. Beachten Sie, dass die kopierte Datei exakt an der selben Stelle Ihres Child Themes platziert werden muss, an dem sich das Original im Parent Theme befindet. Dateiname und Speicherort müssen gleich sein!
Zum Beispiel wird eine Datei ParentTheme/includes/navigation.php in das Verzeichnis your-child-theme/includes/navigation.php kopiert.

WordPress stellt hierbei automatisch sicher, dass anstatt der alten php.Datei die neue php.Datei aus dem Childtheme verwendet wird, wenn Dateiname und Speicherort gleich sind. Öffnen Sie die kopierte und platzierte php.Datei und führen Sie dort die gewünschten Änderungen durch.

WordPress Child Theme

Pro & Contra

Wie so oft, auch bei der Verwendung eines WordPress Child Theme gibt es Vor-und Nachteile. Zunächst die Vorteile:

1. Sichere Updates
Ein Child Theme erbt automatisch die Funktionen, Stile und Vorlagen des Parent Theme. Dies ermöglicht Ihnen, Änderungen an Ihrer Website über das Child Theme durchzuführen, ohne Modifizierung am übergeordneten Thema zu machen . Wenn eine neue Version des übergeordneten Parent Themes herauskommt , können Sie es sicher aktualisieren. Alle Ihre Modifikationen bleiben durch das WordPress Child Theme erhalten.

2. Einfach zu erweitern
Ein WordPress Child Theme, auf einem leistungsfähigen Parent Theme aufgebaut, ermöglicht Ihnen ein hohes Maß an Flexibilität , ohne dass Sie selbst jede Menge Code selbst entwickeln müssen. Sie können selektiv  nur diejenigen Template-Dateien und Funktionen modifizieren oder erweitern die Sie benötigen. Ansonsten können Sie auf die Standardfunktionen des Parent Themes zurückgreifen.

3. Fallback-Sicher
Wenn Sie ein komplettes Theme selbst erstellen, müssen Sie alle möglichen Szenarien überdenken und entsprechenden Code für diese entwickeln. Verwenden Sie ein WordPress Child Theme und vergessen etwas, übernimmt das Parent Theme die Funktionalität als Fallback-Option. Das gilt natürlich nur, wenn Sie ein hochwertiges Parent Theme verwenden, das sorgfältig geplant und programmiert worden ist. Seien Sie also sorgsam bei der Auswahl Ihres Parent Themes.

Nachteile der Verwendung eines WordPress Child Theme

1. Zeitaufwand
Einer der größeren Nachteile bei der Verwendung von WordPress Child Themes ist die Zeit, die Sie dafür benötigen sich in das Parent Theme hinein zu finden. Dieser  Lernaufwand ist umso höher, je komplexer das von Ihnen ausgewählte Parent Theme ist. Jedes Theme hat seine eigenen Haken und Ösen . Man muss sich also gut auskennen, um das Potenzial des Themes zu maximieren. Doch dieser Aufwand lohnt sich. Er steht in keinem Verhältnis zu dem Aufwand ein Theme nach einem Update beständig neu anpassen zu müssen.

2. Inkompatibilitäten nach einem Update des Parent Themes
Unschön. Nach einem Update fallen bestimmte Teile oder Funktion Ihrer Website aus. Wenn Sie mit einem kommerziellen Framework wie zB. Genesis Themes* Elegant Themes (Affiliate Link), dass von mir geschätzte und in der WordPress Community  hoch angesehene ElmaStudio, oder ähnlichen Premiumanbietern arbeiten, haben Sie umfangreiche Support-Option zur Verfügung, um Ihr Probleme zu beheben. Kleinere Theme-Hersteller bieten diesen Support vielleicht nicht. Dann wird guter Rat teuer. Vielleicht müssen Sie sich nach einem neuen Parent Theme umschauen.

* Dieser Link ist ein “Affiliate-Link”.
Dies bedeutet, wenn Sie auf diesen Link klicken und ein Theme von Elegant Themes erwerben, erhalte ich eine Affiliate-Provision.

Es gilt grundsätzlich: Safty first! Theme Updates sind entscheidend, wenn es um das Thema Sicherheit geht. Ich empfehle Ihnen immer Themes regelmäßig zu aktualisieren.

3. Aufgabe der Weiterentwicklung des Parent Themes
Natürlich kein Problem, welches von einem Child Theme verursacht wird, kommt aber immer wieder vor: Die Weiterentwicklung eines Themes wird eingestellt. Das hat die unterschiedlichsten Ursachen. Der oder die Entwickler haben das Interesse verloren, das Projekt war kommerziell ein Misserfolg, ein Selbstständiger Theme-Entwickler hat einen ‘richtigen Job’ bekommen … Gibt es niemanden, der dieses Projekt weiter entwickelt, bleibt Ihnen nichts anderes übrig, als sich nach einem neuen Parent Theme um zuschauen. 

WordPress Child Theme

Fazit

Meines Erachtens überwiegen die Vorteile bei der Erstellung eines WordPress Child Themes. Insbesondere die beiden letzten aufgeführten Nachteile sind keine Probleme, die aus der Verwendung eines Child Themes entsehen, es sind Probleme die mit dem Parent Theme verbunden sind. Wird ein erfolgreiches Projekt aufgegeben, so ist die Wahrscheinlich sehr hoch, dass es von anderen Entwicklern der Community übernommen wird.

Ich kann mich hier also nur wiederholen, es ist entscheidend welche Quelle Sie auswählen, also von wem Sie Ihr Parent Theme zu beziehen. Achten Sie nicht nur auf die Optik oder die tollen Funktionen, ziehen Sie auch die angebotenen Supportleistungen und die vermutliche Langlebigkeit des Theme-Herstellers bei Ihrer Auswahl in Erwägung. Plattformen wie Genesis oder Elegant Themes werden nicht einfach verschwinden, Tausenden von Kunden weltweit sorgen für eine stabile Geschäftsentwicklung.

Die Erzeugung eines WordPress Child Theme mag Ihnen zunächst ein wenig aufwändig erscheinen. Die Vorteile der Verwendung eines Child Themes werden einem aber schnell klar, wenn man sich den sich beständig wiederholenden Aufwand vor Augen hält,  die eine WordPress- oder gar einer Theme-Aktualisierung generiert, wenn man nicht über ein Child Theme verfügt. In diesem Fall müssen Sie ja alle Individualisierungen, die Sie bereits in der alten Version durchgeführt haben, in die neuen Versionen erneut einbauen.

Verwenden Sie also ein Child Theme am besten schon bei der Erstinstallation einer neu zu errichtenden WordPress Website. Sie müssen dann diese Anpassungen nur einmalig ausführen und sind bei den nächsten Updates auf der sicheren Seite. WordPress wird stets aktuell gehalten, Security Updates, Bugfixes, etc.
Gut gepflegte Themes, die Sie – wie oben bereits erwähnt – unbedingt verwenden sollten, passen sich dem an und werden ebenso ständig auf dem laufenden gehalten. Somit ist der “Aufwand”, ein WordPress Child Theme zu verwenden, verhältnismäßig gering.

Wenn Sie Ihre Website nicht selbst erstellen/verwalten, sondern hierfür einen Dienstleister hinzu ziehen, sprechen Sie ihn unbedingt auf dieses Thema an.

Weitere umfangreiche Informationen zum Thema WordPress Child Theme verwenden, erhalten Sie auf der englischsprachigen Website wpbeginner. What is a Child Theme? Pros, Cons and more

Mehr zum Thema WordPress Sicherheit

>> Abonnieren Sie den art supplies Newsletter

Weitere Artikel

  • WordPress 3.7WordPress 3.7 Let it swing: WordPress Update 3.7 mit dem Namen "Basie" (nach dem Jazzmusiker Count Basie) veröffentlicht: Basie ist – laut  WordPress Initiator Matt Mullenweg auf dem WordCamp SF – […]
  • Website Usability und WordPressWebsite Usability und WordPress Die Benutzerfreundlichkeit, englisch: Website Usabilty ist ein entscheidendes Kriterium für den Erfolg Ihrer Website. In diesem Artikel mache ich Sie mit den Grundlagen der UX (User […]
  • Sicherheitsschlüssel in WordPressSicherheitsschlüssel in WordPress Schnell, einfach & sicher:  WordPress Sicherheitsschlüssel in der Datei wp-config.php anlegen Wozu dienen die Sicherheitsschlüssel in WordPress? Beim Loggin-Prozess werden […]
  • WordPress Backdoor findenWordPress Backdoor finden WordPress Backdoor in einer WordPress-Site entdecken und beheben. Wie Sie sich vor der Gefahr eines WordPress-Hacker Angriffes schützen können.