Warum das Bearbeiten des Template in WordPress keine gute Idee ist, habe ich hier bereits erläutert. Heute erkläre ich, wie man es trotzdem hinbekommt und worauf man achten muss.

WordPress – Child – Theme erstellen

Überall ließt man, dass man unbedingt ein WordPress – Child – Theme anlegen sollte, wenn man am Template etwas nachhaltig verändern möchte. Aber was ist ein Child – Theme und wie erstellt man es? Welche Nachteile ergeben sich daraus? Auf diese und weitere Fragen werde ich heute eine Antwort geben.

Was ist ein Child – Theme?

Ein Childtheme erweitert oder verändert dein Original-Theme, ohne an den originalen Dateien Änderungen vorzunehmen. Hierdurch gehen Änderungen am Theme bei einem Update nicht verloren und du kannst beim ausprobieren nicht dein komplettes Theme zerstören. Es eignen sich gut bei unerfahrenen Anwendern, die ihr Wissen erweitern möchten und bei Arbeiten für einen Auftraggeber.

In der Grundform (also der kleinsten Variante) besteht ein Child – Theme aus mindestens einem Ordner und 3 Dateien.

  • „functions.php“ – Diese PHP-Datei erweitert die gleichnamige Datei des Original – Themes und sorgt somit für Platz, die du für weitere PHP-Modifikationen an deinem Themes nutzen kannst.
  • „style.css“ – Diese Stylesheet Datei wird über deine im Child – Theme vorhandene „functions.php“ eingebunden. Mit dieser Datei ist eine Erweiterung deiner Stylesheets möglich.
  • „screenshot.png“ – Diese Bilddatei benötigen wir für das Backend um bei der Auswahl des Themes ein Vorschaubild zu haben.
Warum nicht den Customizer verwenden?

Selbstverständlich kann man im Customizer unter „Zusätzliches CSS“ auch Änderungen vornehmen. Bei vielen Änderungen und bei der Menge, der von Haus aus bei einem Template angelegten CSS Befehle, verliert man aber schnell die Übersicht. Außerdem wird WordPress dieses CSS inline, also direkt im Quellcode, ausgeben. Das wiederum hat zwar Vor-, aber auch Nachteile.

Solltest du nachträglich ein Child – Theme anlegen wollen (weil du erst jetzt etwas grundlegendes ändern willst) und dein Themes hat Einstellungen im Customizer, musst du diese vorher Exportieren. Beim Aktivieren von einem neuen Child – Themes gehen diese Einstellungen sonst verloren. Dies kannst du am Besten mit dem Plugin Customizer Export/Import bewerkstelligen.

  • Installiere dafür das Plugin und aktiviere es
  • Gehe als nächstes in den Customizer
  • Ganz am Ende findest du den Punkt „Export/Import“, wähle diesen aus.
  • Klicke anschließend auf den Button „Exportieren“ und bestätige den Download mit OK

Nach der Erstellung deines Child – Themes kannst du die eben heruntergeladene Datei dort wieder mit „Datei auswählen“ und anschließendem Klick auf „Importieren“ importieren.

Für unsere weiteren Schritte benötigst du ein FTP Client wie FileZilla, das für MacOS, Linux und Windows kostenlos zur Verfügung steht. Darüberhinaus musst du dann noch die Zugangsdaten deines FTP – Zugangs bereit halten.

Mit dem FTP Client meldest du dich am Server an. Dort navigierst du in das Verzeichnis wp-content/themes. Hier siehst du alle Themes – Ordner der installierten Themes. Erstelle nun einen neuen Ordner und benenne ihn möglichst nach folgender Struktur: themename-child (bei mir spice-software und spice-software-child).

Nun erstellst du mit einem Texteditor eine Datei und speicherst diese unter dem Namen style.css (bitte vergewissern, dass der Texteditor nicht etwa .txt automatisch anhängt). Damit WordPress erkennt, dass unser neuer Ordner ein Child – Themes ist müssen wir diese Information in der style.css oben eintragen.

1. /*
2. Theme Name: Spice-Software Child-Theme
3. Description: Ein Child-Theme für Spice-Software
4. Author: Oliver Buda
5. Author URI: https://www.oliverbuda.de
6. Template: spice-software
7. Version: 1.0
8. */

In Zeile 1. beginnen wir mit dem Kommentar
In Zeile 2. Geben wir dem Themes einen Namen (frei Wählbar)
In Zeile 3. Schreiben wir eine Beschreibung. Hier kannst du berichten was das besondere an deinem Themes ist oder warum du es erstellt hast usw.
In Zeile 4 deine Name oder Pseudonym
In Zeile 5 die Adresse deiner Webseite
In Zeile 6 muss der Name des original Templates stehen. Dieser ist meistens wie der Ordnername des Themes
In Zeile 7 kommt dann deine Versionsnummer
In Zeile 8 schließen wir den Kommentarbereich

Die fertige Datei überträgst du dann in das neue Verzeichnis. Jetzt erstellst du mit dem Texteditor eine neue Datei functions.php (achte wieder darauf, dass der Texteditor nicht .txt anhängt). Um jetzt unserem Child – Themes die erste Funktion zu geben, binden wir unsere style.css Datei ein. Dabei gilt Folgendes zu bedenken: Die neue CSS-Datei soll die Styles vom Original – Themes erweitern und / oder gewisse Regeln überschreiben. Für zweiteres muss die Reihenfolge der Dateien beachten werden. Die neue CSS-Datei vom Child – Themes muss also nach der vom Original – Themen eingebunden werden. Dies erreichen wir unkompliziert mit folgendem Code:

<?php 
function child_theme_styles() { 
	wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css'); 
	wp_enqueue_style('child-theme-css', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' )); 
} 
add_action('wp_enqueue_scripts', 'child_theme_styles'); 
?>

Da wir nun alle notwendigen Schritte erledigt und ein funktionales WordPress Child – Themes erstellt haben, kannst du es im Backend unter „Themes“ aktivieren. Da unser Child – Themes noch kein Screenshot besitzt, sieht das ganze noch etwas ungewöhnlich aus. Aber es funktioniert, probier es einfach mal aus. Mach von der Startseite bei der Gelegenheit gleich mal ein Screenshot im PNG Format in der Größe 1200 x 900 px und speichere es als screenshot.png. Anschließend kopierst du es per FTP in unseren neuen Ordner.

Im letzten Schritt bringen wir noch die exportierten Einstellungen aus dem Customer wieder zurück. Das war es dann auch schon.

Wenn Du jetzt Änderungen, z.B. an einer Templatedatei, vornehmen willst, kopierst du die Datei vorher in dein Child -Themen und bearbeitest sie dann. Alle Änderungen werden nach dem Speicher angezeigt und du machst am Haupttemplate nichts kaputt. So kannst Du jederzeit wieder zu der ursprünglichen Version zurück. Wenn es Updates für das originale Template gibt profitierst du davon, in dem deine Dateien nicht überschrieben werden und die sie nachträglich anpassen kannst.