Gastbeitrag: Wie du ganz einfach mit dem Plugin „Child Theme Configurator“ ein WordPress Child Theme erstellen kannst?

Ich freue mich über diesen wundervollen Gastbeitrag zum Thema Erstellung eines WordPress Child Theme meiner lieben und geschätzten Kollegin Sylvia Klatt von Sylvia Klatt Webdesign. Ich wünsche Euch viel Spaß beim Lesen!

And here we go!

Änderungen an deiner Website per CSS kannst du zwar direkt im Theme oder Page Builder deiner Website vornehmen. Allerdings wird das schnell unübersichtlich, denn nach ein paar Tagen oder Wochen wirst du dich nicht mehr erinnern, an welcher Stelle du welchen Code-Schnipsel eingefügt hast. Außerdem besteht die Gefahr, dass solche Code-Einfügungen beim nächsten Update verloren gehen. Darum ist es ratsam, CSS-Änderungen in ein Child Theme einzufügen.

Keine Angst, die Erstellung eines Child Themes ist viel einfacher als es klingt. Am einfachsten gelingt es mit dem Plugin Child Theme Configurator.

Erstmal: Was ist ein Child Theme?

Um das zu erklären, hole ich ein bisschen aus. Das von dir installierte Theme (z.B. Divi, Astra, The7, Enfold…) ist das sogenannte Parent Theme (Elternthema). Es ist so programmiert, dass damit bestimmte Designeinstellungen umgesetzt werden können – oder eben auch nicht.

Das Child Theme (Kindthema) erbt alle Funktionen und Styles (Aussehen) des Parent Themes. Schreibst du jetzt Änderungen für CSS oder PHP in das Child Theme, so überschreibst du damit die jeweiligen Angaben im Parent Theme. Damit kannst du kleine Änderungen vornehmen (z.B. Effekte zu deinem Menü hinzufügen) oder sogar das ganze Template (kurze Info: Templates sind Musterseiten deiner Website. Sie geben einen Rahmen vor, der bestimmt, wie Titel, Textpassagen, Bilder und andere Elemente gestaltet und angeordnet sind) umschreiben.

Vorteile:

• Den Code kannst du so strukturieren, dass du deine jeweiligen Änderungen schnell wieder findest.
• Von den Child Theme Dateien kannst du sehr einfach eine Datensicherung, sprich Backup, anlegen. So gehen dir deine geschriebenen Codes nicht mehr verloren. Und du kannst auf ältere Backups zurückgreifen, falls das mal notwendig sein sollte.

Nachteile:

• Du hast noch weitere Dateien, die beim Öffnen der Website geladen werden müssen. Das fällt aber nicht groß ins Gewicht und sollte dich nicht davon abhalten, ein Child Theme zu verwenden.

Easy WordPress Child Theme erstellen mit dem Plugin „Child Theme Configurator“

Als Beispiel erstelle ich ein Child Theme für das Divi-Theme.

Child Theme Plugin installieren

Um das Plugin zu installieren, klickst du in der linken Seitenleiste von WordPress auf Plugins -> Installieren (oben links). Im Suchfeld „Plugins durchsuchen…“ gibst du den Namen Child Theme Configurator ein. In der Ergebnisliste sollte dir das Plugin nun angezeigt werden.  

Klicke auf Jetzt installieren und anschließend auf Aktivieren. Das Plugin ist jetzt aktiv.

Child Theme erstellen

Um mit dem Plugin ein WordPress Child Theme anlegen zu können, klickst du nun in der linken Seitenleiste auf Werkzeuge -> Kindthemen.

Der erste Reiter Eltern/Kind sollte vorausgewählt sein. Falls nicht, klicke für den nächsten Schritt darauf.

Wähle nun unter Punkt 1 die Option Neues Kindthema ERSTELLEN aus. Unter Punkt zwei wählst du das Elternthema aus, für welches das Child Theme erstellt werden soll. Im dritten Schritt klickst du auf Elternthema untersuchen. Das Plugin überprüft nun, ob es bei der Erstellung des Kindthemas irgendwelche Probleme geben könnte. Du solltest nun die Meldung „Dieses Thema scheint als Kindthema in Ordnung zu sein“ erhalten.

Benenne nun unter Punkt 4 den Ordner, in den das Theme gespeichert werden soll. Bei dem Namen handelt es sich nicht um den Namen des Kindthemas. Dieses wird weiter unten angepasst.

Wähle unter Punkt 5 aus, wo neue Stile gespeichert werden sollen. Normalerweise ist die Standardeinstellung Primäre Formatvorlage passend. Auch bei Elternthema-Formatvorlagen-Handling auswählen unter Punkt 6 passt die Voreinstellung WordPress-Stil-Warteschlangen benutzen im Normalfall.

Unter Punkt 7 kannst du deinem Child Theme einen Namen geben, die Beschreibung anpassen und weitere Einstellungen vornehmen. Wähle für den Namen eine passende Bezeichung, z.B. Divi Child Theme. Die Themen-Website solltest du unverändert lassen bzw. korrigieren, falls sie nicht korrekt ist. Als Autor gibst du deinen Namen an. Außerdem kannst du deine Website-Adresse hinzufügen. Themen-Beschreibung und Schlagwörter kannst du anpassen, falls du dies wünschst.

Die Version gibst du mit 1.0 an, denn es handelt sich um die erste Version des Themes.

Die Option Menüs, Widgets und andere Customizer-Einstellungen vom Eltern- zum Kindthema kopieren unter Punkt 8 lässt du unausgewählt. Dies wird normalerweise nicht benötigt.

Klicke nun auf den Button Configure Child Theme. Das Kindthema wird jetzt erstellt. Dies kann einen kleinen Moment dauern.

Du findest das erstellte Theme im Ordner wp-content -> themes unter dem von dir angegebenen Ordnernamen. Du solltest dort drei Dateien finden: functions.php, style.css und screenshot.jpg.

Um das Kind Thema aktivieren zu können, gehst du im Adminbereich deiner Website auf Design -> Themes. Hier solltest du dein Theme finden. Fahre mit der Maus über das Theme. Es sollte nun ein Button mit der Aufschrift Aktivieren erscheinen. Klicke darauf.

Weitere Einstellungen

Für das Bild verwendet WordPress die Datei screenshot.jpg in deinem Kindthema-Ordner. Falls du ein anderes Bild verwenden willst, musst du diese Datei überschreiben. Du kannst das manuell machen, indem du die jetzige Datei löschst und dann ein anderes Bild mit dem Namen screenshot.jpg in den Ordner einfügst. Oder du nutzt dafür den Child Theme Configurator. Wie das geht, erkläre ich dir weiter unten.  

Du kannst deinem Kindthema mit dem Configurator Plugin weitere php-Dateien hinzufügen (das brauchst du nur, wenn du dich mit PHP auskennst und weißt, was du tust). Tipp am Rande: Neben den Dateien functions.php und style.css macht es auch noch Sinn die Dateien header.php und footer.php auszuwählen und diese in das Kindthema zu kopieren. Diese werden neben der functions.php immer mal wieder zum Einbau von Codeschnipseln benötigt. Gehe dazu im Configurator auf den Reiter Dateien und wähle hier die Dateien aus, die hinzugefügt werden sollen.

Bereits im Theme verfügbare php-Dateien kannst du hier auch löschen lassen.

Als zusätzliche Optionen wird dir unter dem Reiter Dateien auch das aktuelle Bild deines Themes angezeigt. Wenn du möchtest, kannst du hier ein neues hochladen und damit das alte ersetzen. Außerdem kannst du ein Backup deines Child Themes als zip-Dateien erstellen lassen.

Dein Child Theme ist jetzt fertig.

CSS Code einfügen

Du kannst nun loslegen und CSS-Code in die style.css einfügen.

Das sieht dann z.B. so aus:

#top-menu-nav #top-menu a, 
.et-fixed-header #top-menu a {
     color: #1E1E1E;
     font-weight: 400;
}

#top-menu-nav #top-menu a:hover, 
.et-fixed-header #top-menu a:hover {
     color: #71aaea;
}

Mit diesem Code habe ich mein Menü so umgeschrieben, dass sich die einzelnen Menüpunkte beim Drüberfahren mit der Maus blau färben.

Als Code-Editor empfehle ich dir Visual Studio Code ( https://code.visualstudio.com/). Der Editor ist kostenlos und bietet zahlreiche Funktionen, die dich beim Programmieren unterstützen.

Ich wünsche dir viel Erfolg!

Falls du Fragen oder Ergänzungen zu diesem Blogartikel hast, freue ich mich über eine Nachricht von dir per E-Mail an mail@sylviaklatt.de

Mehr zu mir und meinen Leistungen erfährst du hier.

Bildquelle: Daniele Levis Pelusi – Unsplash