Mithilfe eines WordPress Child Themes haben individuelle Änderungen am CSS auch im Falle einer Aktualisierung des eigentlichen (Parent) Themes Bestand.
Übersicht child theme in WordPress erstellen
Im folgenden wird das Erstellen und Einbinden eines WordPress child themes mithilfe der Konsole erklärt. Mithilfe eines Texteditors ist das Erstellen und anschließende Hochladen mithilfe eines FTP Clients das selbstverständlich ebenfalls machbar.
Mit den folgenden Schritten erstellen Sie im Handumdrehen ein eigenes minimalistisches child-theme, ohne auf irgendwelche Plug-ins oder externe Dienste angewiesen zu sein.
Alle Schritte auf einen Blick
- Wechseln Sie in das WordPress Unterverzeichnis
wp-content/themes/ - Erstellen des neuen child-theme Ordners
- Erstellen der functions.php
- Erstellen der style.css
- Aktivieren des child-theme
child theme erstellen im Detail
Wechseln Sie zu Beginn mit dem Befehl cd in das Unterverzeichnis wp-content/themes/ Ihrer WordPress Installation.
$ 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 in der Regel auf den Servern bereits vorinstallierten Texteditor “nano”. Selbsverständlich können Sie einen anderen Editor verwenden.
$ nano child-theme/functions.php
In die soeben neu erstellte und noch leere functions.php wird folgender Code eingefügt, der WordPress dazu bringt, die style.css des parent-themes mit einzubinden.
<?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' );
}
Speichern können Sie bei nano die Datei mit der Tastenkombination STRG+O, und STRG+X zum Verlassen.
Schließen Sie die Datei und geben Sie anschließend den folgenden Befehl ein, um die style.css des neuen child-themes zu erstellen:
$ nano child-theme/style.css
Folgenden Code fügen Sie in die noch leere Datei style.css ein (parent-theme umbenennen bei einem anderen Namen des parent-theme, wie z.B. “twenty twenty-one”):
/*
Theme Name: child-theme
Template: parent-theme
*/
In die style.css können Sie von nun an die eigenen Änderungen am CSS einfügen.
Die Datei wieder mit STRG+O speichern und mit STRG+X verlassen.
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.
Das child-theme erscheint im WordPress Backend wie ein eigenes theme.