Erstellung eines WordPress Child-Themes

Wenn Sie von Ihrem aktuellen Theme eigentlich begeistert sind, aber bestimmte Features oder das Aussehen verändern möchten, gibt es nur einen richtigen Weg: eine Anpassung oder ein Customizing des Child Themes. 

Dieser Artikel erklärt nicht nur, warum dieser Schritt notwendig ist, sondern begleitet Sie Schritt für Schritt durch den Prozess, damit Sie am Ende Ihr eigenes WordPress Child Theme erstellen und verändern können – und das ganz unabhängig von Ihren technischen Fähigkeiten.

Darum sollten sie ein WordPress Child Theme verwenden

Ein Child Theme erbt die Eigenschaften seines Master- oder Parent Themes. Daher kann sein Code verändert und den eigenen Wünschen angepasst werden, ohne die Funktionalität des Originals zu beeinträchtigen. Abgesehen davon werden Änderungen, die Sie vorgenommen haben, bei Updates des Parent Themes nicht überschrieben.

Ein Child Theme ist ausserdem so etwas wie Ihr Sicherheitsnetz, wenn Sie es mit den Anpassungen einmal übertrieben und sich im Code verlaufen haben. Darüber hinaus erlaubt es Ihnen, die Teile, die Sie verändert haben, effizient zu analysieren, da die Daten eines Child Themes separat vom Parent Theme ablegt werden.

So funktioniert ein Child Theme

Ein Child Theme wird also in einem eigenen Verzeichnis angelegt und hat genau wie das Parent Theme seine eigenen style.css und functions.php-Dateien. Sie können bei Bedarf weitere Dateien hinzufügen, aber nur diese beiden sind absolut notwendig, damit Ihr Child Theme korrekt funktioniert.

In diesen .css- und .php-Dateien des Child Themes können Sie alles anpassen, was Sie möchten: Styling, Layout, Code, Skripte. Das Child Theme verwendet diese Attribute, obwohl sie im Parent Theme nicht verankert sind.

Stellen Sie sich ein Child Theme wie eine zusätzliche Schicht vor. Wenn ein Besucher Ihre Seite betritt, wird als erstes das Child Theme mit all seinen Attributen geladen. Die fehlenden Styles und Funktionen holt sich das System dann vom Parent Theme. Am Ende können Sie Ihr Theme so präsentieren, wie Sie es gerne hätten, ohne die grundlegenden Funktionen des Themes zu opfern.

Voraussetzungen

Sie benötigen Grundwissen in CSS und HTML, damit Sie Ihre eigenen Änderungen vornehmen können. Wenn Sie darüber hinaus noch ein paar Kenntnisse in PHP haben, wäre das auch nicht schädlich. Für den Anfang reicht es allerdings aus, wenn Sie in der Lage sind, Codefragmente von anderen Quellen zu kopieren und einzufügen.

Wir empfehlen, vorher auf einer lokalen Entwickleroberfläche zu üben. Sie können eine WordPress-Seite, die bereits live ist, zu Testzwecken auf einen lokalen Server verschieben oder Dummy-Content aus der Themeentwicklung verwenden.

So erstellt man ein Child Theme in WordPress

Öffnen Sie als erstes den Ordner /wp-content/themes in Ihrer WordPress-Installation. Erstellen Sie einen neuen Ordner für das Child Theme. Sie können dem Ordner jeden beliebigen Namen geben. Für dieses Tutorial nennen wir ihn wpchild.

Öffnen Sie einen Text-Editor wie Notepad und fügen diesen Code ein:

Speichern Sie das Textdokument als style.css in dem Ordner des Child Themes, den Sie eben erstellt haben. Der Inhalt dieser Datei ist in weiten Teilen selbsterklärend. Worauf Sie Ihre Aufmerksamkeit richten sollten, ist das Template: Divi.
Das informiert WordPress darüber, dass es sich hierbei um ein Child Theme handelt und der Name des übergeordneten Parent Themes Divi ist. Beim Namen des Ordners des Parent Themes kommt es auf Gross- und Kleinschreibung an. Geben wir als Templatenamen beispielsweise „divi“ an, würde WordPress ihn ignorieren.
Die letzte Codereihe importiert das style.css des Parent Themes in das Child Theme. Damit ist die Mindestanforderung zur Erstellung eines Child Themes erfüllt. Ab jetzt werden Sie Ihr Child Theme im Menü unter Design > Themes finden. Um es zu aktivieren, klicken Sie einfach auf die entsprechende Schaltfläche.

Da Sie bisher noch nichts in ihrem Child Theme geändert haben, hat sich auch am Aussehen und der Funktionalität Ihrer Seite noch nichts geändert, was immer noch vom Parent Theme bestimmt wird.

So passen Sie Ihr Child Theme an

Jedes WordPress-Theme hat eine Datei im Hauptverzeichnis, die style.css genannt wird. Dabei handelt es sich um das Haupt-Stylesheet, in dem die gesammelte CSS aufbewahrt wird. Bei einigen Themes findet man in der style.css jedoch nicht mehr als ein paar Header-Angaben. Solche Themes verwenden dann CSS-Dateien, die sich in einem eigenen Verzeichnis befinden.

Speichern Sie alle Änderungen, die Sie an der style.css Ihres Child Themes vorgenommen haben und sehen Sie sich die Vorschau der Seite an.

Dasselbe gilt für eine neue Funktionalität. Sie werden viele WordPress-Tutorials finden, in denen Sie gebeten werden, Codefragmente zu kopieren und in die functions.php Ihres Child Themes einzufügen.

Das Hinzufügen von Code zur functions.php des Parent Themes würde bedeuten, dass diese Änderungen jedes Mal überschrieben würden, sobald ein Update des Parent Themes vorgenommen wird. Daher ist es in jedem Fall ratsam, ein Child Theme zu nutzen und neue Codeschnipsel in dessen functions.php abzulegen.

Ein Child Theme erleichtert auch die Fehlersuche, wenn es mal hakt. Wenn Sie beispielsweise aus Versehen etwas löschen, das vom Parent Theme benötigt wird, können Sie einfach die entsprechende Datei vom Child Theme löschen und noch einmal ganz von vorne beginnen.

Und das war’s auch schon. Wir hoffen, dass dieser Artikel ein wenig Licht ins Dunkel rund um das Thema Child Themes gebracht hat und Sie jetzt in der Lage sind, Ihr eigenes Child Theme zu erstellen. Wenn Sie dabei noch Hilfe brauchen, zögern Sie nicht, sich mit uns in Verbindung zu setzen.