Mithilfe eines Child Themes haben Änderungen am Design auch im Falle einer Aktualisierung des eigentlichen (Parent) Themes Bestand.
Child Theme in WordPress
Im folgenden wird das Erstellen und Einbinden eines WordPress Child Themes mithilfe der Konsole erklärt. Mithilfe eines FTP Clients ist das selbstverständlich ebenfalls machbar.
- Wechseln Sie in den Ordner
wp-content/themes/ - Erstellen des neuen Child-Theme Ordners
- Erstellen der functions.php
- Erstellen der style.css
- Aktivieren des Child-Theme
Wechseln Sie in den Unterordner mit dem Befehl cd
Erstellen Sie einen Ordner mit dem Befehl mkdir
$ cd wp-content/themes
Mit dem ls Befehl werden alle Ordner und Dateien in diesem Unterordner angezeigt.
$ ls
index.php parent-theme
In unserem Beispiel ist ein Theme namens “parent-theme” installiert.
Mit dem mkdir Befehl erstellen wir einen neuen Ordner namens “child-theme”
$ mkdir child-theme
Der Befehl ls gibt jetzt folgendes aus:
$ ls
child-theme index.php parent-theme
Im neuen “child-theme” Ordner erstellen wir die zwei Dateien
- functions.php und
- style.css
Das geht sehr einfach mit dem i.d.R. auf den meisten Servern bereits vorinstalliertem Texteditor “nano”.
$ nano child-theme/functions.php
In die soeben neu erstellte und noch leere functions.php wird folgender Code eingefügt, der dafür sorgt, dass die style.css des parent-themes mit eingebunden wird.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Die Datei wird bei nano mit der Tastenkombination STRG+O abgespeichert.
Wir verwenden auch wieder nano, um die style.css des neuen Child-themes zu erstellen:
$ nano child-themes/style.css
Folgender Code kommt ganz oben in die noch leere Datei:
/*
Theme Name: child-theme
Template: parent-theme
*/
In die style.css werden von nun an nur die eigenen Änderungen eingefügt.
Die Datei wieder mit STRG+O speichern.
Im letzten Schritt wechseln wir in das WordPress Admin Backend unter Design -> Themes, klicken unter dem neu dazugekommen “child-theme” Theme auf den Button “Aktivieren”.
Et Voila! Wir haben erfolgreich ein neues Child-Theme erstellt, in dem von nun alle neuen Funktionen und Stylesheet Designänderungen vorgenommen werden.