Ein Enfold Child Theme erstellen und installieren

In diesem Beitrag erkläre ich, wie man ein WordPress Child Theme für Enfold (aus dem Hause Kriesi) erstellt, installiert und die Einstellungen importiert.

Das Enfold Theme von der Premium Schmiede Kriesi hat mittlerweile eine große Fangemeinde gefunden. Das WordPress Theme mit dem Avia Framework als Unterbau lässt sich über das Backend umfangreich konfigurieren, ist übersichtlich aufgebaut und durch sein modulares Layout inklusive Page Builder vielseitig einsetzbar. Ein richtiger Allrounder.

Allerdings lässt sich auch in so einem flexiblen Theme wie Enfold nicht alles einstellen, was der Seitenbetreiber gern möchte. Mir ist zum Beispiel die recht übersichtlich gehaltene Anzahl von Widgetbereichen aufgefallen bzw. diejenigen, die ich vermisse (kein Headerwidget, kein Footerwidget, kein Kolophoniumwidget). Da muss man dann selbst Hand anlegen und in die Themedateien.
In solchen und anderen Fällen macht man das natürlich nicht im Theme direkt sondern erstellt ein Child Theme. Die Vorgehensweise ist beim Enfold Theme nicht anders als bei anderen Themes. Mit einem Unterschied, aber das erkläre ich gleich noch.

Erstellung eines Child Themes

Als erstes erstellt man auf seinem Rechner einen Ordner, den man entweder nach der Webseite oder nach dem Projekt benennt, in dem das Child Theme zum Einsatz kommt – oder es bei enfold-child belässt, womit auch die Abstammung klar wäre. Für die Demonstration hier nennen ich den Ordner enfold-child.

In diesen Ordner gehört eine Datei style.css, die ihr mit einem Texteditor eurer Wahl erstellt. Ich empfehle unter Linux den Sublime Texteditor 3 und unter Windows Notepad++.
In diese Datei gehört folgender Code platziert:

/*
Theme Name: Enfold-Child
Description: Child Theme von Enfold
Version: 1.0
Author: Lars Mielke
Author URI: https://www.lars-mielke.de/
Template: enfold
*/

Den Theme Name könnt ihr nach eurem Gusto vergeben, er sollte nur aussagekräftig sein. In der Description macht ihr klar, dass es sich um ein Child Theme von Enfold handelt. Wahlweise könnt ihr auch noch reinschreiben, für welches Projekt ihr das erstellt habt usw.
Dann folgen noch die Angaben Version, Author und Author URI – die selbsterklärend sein dürften.
Absolut wichtig ist die Angabe des Templates, da WordPress nur dadurch erkennt, auf welches Parent Theme es sich beziehen soll. Die Angabe muss in genau der Form erfolgen, wie der Theme-Ordner des referenzierten Parent-Themes im wp-content/themes Ordner bei WordPress vorliegt.

Normalerweise würde man jetzt noch die CSS-Stylesheet Datei aus dem enfold importieren. Da diese bei Enfold aber ohnehin leer ist (die Formatierungen werden dort anders erzeugt), entfällt das hier.

Nun legt ihr noch eine Datei functions.php im Child-Theme Ordner an, die bis auf das öffnende PHP-Tag nichts enthält:

<?php

Die meisten Änderungen an den Theme-Funktionen erfolgen bei Enfold über die functions.php, deshalb legen wir die im Child-Theme schon einmal an.

Optional könnt ihr noch eine screenshot.png Datei in den Ordner packen, damit eurer Child-Theme in der WordPress Themeliste ein Vorschaubild hat. Orientiert euch bei den Abmessungen an der originalen screenshot.png Datei im Enfold-Ordner.

Upload und Installation

Ihr müsstet jetzt einen Ordner namens enfold-child besitzen, in dem die Dateien style.css, functions.php und optional auch screenshot.png liegen.

Jetzt schiebt ihr den Ordner, so wie er ist, in das wp-content/themes Verzeichnis auf eurem Webserver oder ihr komprimiert den Ordner zu einer .zip Datei und ladet ihn über das WordPress Backend hoch.

Sicherung der Enfold-Einstellungen

Eure Seite läuft bereits seit einiger Zeit mit dem originalen Enfold-Theme und ihr habt zahlreiche Einstellungen darin vorgenommen (Schriften und Farben geändert, Layouteinstellungen etc.)? Dann habt ihr jetzt ein Problem. Sobald ihr das eben hochgeladene Child-Theme aktiviert, sind alle Einstellungen weg bzw. auf default gesetzt.
Für diesen Fall gibt es unter den Enfold-Einstellungen im WordPress Backend den Punkt Import/Export. Da kann man über den Button Export Theme Settings File die bisher gemachten Einstellungen in einer Textdatei sicher. Und genau das solltet ihr tun. Diese Funktion bieten, glaube ich, alle Avia-basierten Themes an.

Enfold-Child aktivieren und Einstellungen importieren

Nachdem ihr dies gemacht habt (das ist eure Rückversicherung), aktiviert das Enfold-Child Theme und schaut euch die Webseite im Frontend an. Alles müsste auf default gesetzt und die Einstellungen weg sein.
Geht nun in den Konfigurationsbereich eures Enfold-Child Themes zu Import/Export. Enfold erkennt automatisch, dass ihr ein Child-Theme einsetzt und bietet euch an, die Einstellungen aus dem Enfold Parent Theme zu importieren -> Import Settings from your Parent Theme.

Betätigt diese Schaltfläche und testet das Ergebnis im Frontend. Sollte dies nicht wie gewünscht funktioniert haben, seid ihr immer noch im Besitz der Einstellungs-Textdatei, die wir vorhin gesichert haben. Diese ließe sich mit Import Theme Settings File wieder im Import/Export Bereich einspielen. Eine dieser Methoden müsste aber funktionieren.

Gratulation. Ihr habt erfolgreich auf ein Enfold Child Theme umgestellt.

Wenn das Layout dennoch verhauen ist

Bei mir war es trotzdem so, dass obwohl die Einstellungen anscheinend übernommen wurden, etwas mit dem Layout nicht stimmte. Ich bin also durch die einzelnen Bereiche des Enfold-Verwaltungsbereiches (Theme Options, General Styling …) gegangen und habe jeweils eine Option kurz auf einen anderen Wert und wieder zurück gesetzt. Dann war auch der Button Save All Changes nicht mehr ausgegraut und konnt bestätigt werden.

Bei den Menüs waren zum Beispiel die Menü-Speicherorte (menu-locations) nicht mehr gesetzt. Nachdem ich das alles wieder auf den richtigen Stand gebracht und abgespeichert habe, zeigte sich auch das Frontend wieder so, wie es unter dem Enfold-Parent-Theme ausgesehen hat.

Für Änderungen am Layout, die nicht über den Enfold Konfigurator selbst gemacht werden können, benutzt die style.css. Vorher müsst ihr natürlich die CSS-Klassen und ID’s der zu ändernden Elemente herausfinden – aber das ist ein Thema für sich und hat einen weiteren Artikel verdient.
Einfache Funktionen könnt ihr in die functions.php des Child-Themes einfügen.
Wenn ihr richtig tief ins Theme-Geschehen eingreifen wollt und Dateien des Frameworks abändert, muss die Struktur gewahrt bleiben. Das heisst, wenn ihr beispielsweise eine Datei xyz im /includes Ordner von Enfold abändern wollt, müsst ihr diese Struktur in eurem Enfold-Child exakt nachbilden. Also auch einen /includes Ordner anlegen und eine Datei xyz (mit euren Änderungen) dort ablegen.

Und selbstverständlich muss das Parent-Theme immer im Themebereich von WordPress verbleiben, wenn das Child-Theme funktionieren soll.