WordPress Child Theme erstellen – deutsche Anleitung für Anfänger

Hier erfährst du wie du ein WordPress Child Theme erstellen kannst und dort deine Änderungen speicherst.

Früher oder später hat man den Wunsch Änderungen an einem WordPress Theme vorzunehmen. Dies kann eine neue Funktionalität oder nur eine kleine Änderung am Aussehen sein.

Wenn man diese Änderungen direkt im Parent Theme macht sind alle Änderungen beim nächsten Update des Themes oder beim Wechsel eines Themes verloren.

Bei dieser Schritt für Schritt Anleitung nutze ich das aktuelle Standard Theme „Twenty Seventeen“ und WordPress in Version 4.7, welches im Verzeichnis „wordpress“ installiert ist.

1. Verzeichnis anlegen

Ich gehe davon aus, dass du bereits eine bestehende FTP Verbindung angelegt hast oder lokal auf deine Installation zugreifen kannst.

Navigiere jetzt ins Hauptverzeichnis deiner WordPress Installation und von dort aus über „wp-content“ in das Verzeichnis „themes“.

In diesem Verzeichnis liegen alle momentan verfügbaren und aktivierbaren Themes.

Bei einer WordPress 4.7 Standard Installation sind das momentan die Themes (Verzeichnisse) „Twenty Fifteen“ (twentyfifteen), „Twenty Sixteen“ (twentysixteen) und „Twenty Seventeen“ (twentyseventeen).

Hier erzeugst du jetzt ein neues Verzeichnis und nennst es „twentyseventeen-child“.

2. Stylesheet Datei anlegen

Wechsle jetzt in das neu angelegte Verzeichnis „twentyseventeen-child“ und lege dort eine Datei „style.css“ an.

Kopiere dir den Stylesheet Header aus der „style.css“ des Parent Theme. Diese befindet sich in unserem Fall im Verzeichnis „twentyseventeen“.

Der Stylesheet Header ist übrigens der obere Teil der CSS Datei, welcher zwischen den Kommentar Zeichen /* und */ steht.

Alternativ kannst du natürlich auch gleich die ganze CSS Datei kopieren und den nicht benötigten CSS Code entfernen.

Das ganze sieht dann so aus:

3. Stylesheet anpassen

Die Werte einiger Zeilen müssen jetzt angepasst oder können gleich ganz entfernt werden.

Theme Name (Pflichtfeld)

Den Namen des Child Themes änderst du auf „Twenty Seventeen Child“. Dieser Name wird später im Bereich Theme Auswahl angezeigt. Dieser Name muss eindeutig sein.

Description (optional)

Hier kannst du eine kurze Beschreibung hinterlassen, welche Funktionalitäten und Änderungen dein Child Theme bewirken sollen.

Version (optional)

Dies zeigt die Version deines Child Theme und wird gern benutzt um JS oder CSS Dateien zu versionieren, damit sie bei einer Änderung nicht aus dem Cache geladen werden.

License und License URI (optional)

Obwohl es funktional gesehen keine Pflichtfelder sind solltest du sie aus lizenztechnischen Gründen nicht entfernen.

Text Domain (optional)

Falls du eine Übersetzung anbieten willst solltest du auch eine Text Domain eintragen. Ich lasse es hier weg.

Tags (optional)

Die Header Tags zeigen welche Funktionalitäten das Theme hat. Ist eigentlich nur für das Parent Theme notwendig und kann weg.

Template (Pflichtfeld)

Diese Zeile kommt neu hinzu und erhält als Wert den Verzeichnisnamen des Parent Theme. Dies wäre hier also „twentyseventeen“.

Das ganze sieht jetzt so aus:

4. functions.php anlegen

Dieser Schritt ist optional. Aber wenn du auch Funktionalitäten ändern willst benötigst du diese Datei. Später kannst du dort deinen PHP Code ablegen.

Erstelle einfach eine leere Datei im Child Theme Verzeichnis und nenne sie functions.php.

Wenn du deine bereits erstellte Stylesheet Datei auch für die Anpassung des Erscheinungsbildes deiner Website nutzen möchtest und nicht nur für die Verwaltung des Child Themes, musst du noch folgenden Code hinzufügen.

Dieser bewirkt, dass zuerst das Stylesheet des Parent Theme geladen wird und erst danach dein Stylesheet für das Child Theme.

Somit bleiben deine Änderungen erhalten und werden nicht vom Stylesheet des Parent Theme wieder überschrieben.

5. Screenshot erstellen

Du könntest jetzt noch einen Screenshot deines Themes erstellen und diesen als PNG Datei im Child Theme abspeichern. Dann hast du außer dem Namen noch eine weitere Hilfe bei der Auswahl des Themes. Aber auch das ist optional.

6. WordPress Child Theme aktivieren

Zum Abschluss gehst du in den WordPress Admin unter Design > Themes und aktivierst dein Child Theme. Dies ist jetzt das aktive Theme.

Jetzt kanst du deine gewünschten Änderungen in der style.css oder der functions.php machen ohne dass du Angst haben musst. dass dein Code bei einem Update überschrieben wird.

Schlussfolgerung

Ein WordPress Child Theme erstellen ist kein Hexenwerk und die Vorteile gegenüber Änderungen am Parent Theme liegen auf der Hand.

Falls du anderer Meinung bist oder etwas anzumerken hast kannst du gern einen Kommentar hinterlegen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.