Wenn man selbst Änderungen an einem WordPress Theme vornehmen möchte, zum Beispiel um neue / eigene Funktionen hinzuzufügen, dann empfiehlt es sich dafür ein sogenanntes „Child-Theme“ anzulegen statt die Änderungen direkt am Original-Theme vorzunehmen, der große Vorteil dabei ist nämlich, dass die Änderungen am Original-Theme bei einem Theme-Update verloren gehen würden, d.h. man müsste sich immer ganz genau aufschreiben was man wo geändert hat und das alles erneut machen nachdem man das Theme geupdated hat, das ist bei einem Child-Theme nicht notwendig, da damit zwar grundsätzlich alle Dateien des Original-Themes genutzt werden, alle eigenen Funktionen / Änderungen jedoch in einem separaten Verzeichnis in eigenen Dateien zu finden sind.
1. Ordner für das neue Child-Theme anlegen und style.css mit Theme-Informationen erstellen
Zunächst müssen wir per FTP (z.B. mit WinSCP oder FileZilla) einen neuen Ordner für unser Child-Theme im Theme-Verzeichnis der WordPress-Installation („wpcontent/themes/“) anlegen, nennen wir ihn z.B. einfach „childtheme“. In diesem Verzeichnis erstellen wir nun als erstes eine style.css Datei, die benötigt wird damit WordPress unser Theme erkennt (das eigentliche CSS muss nicht zwingend in dieser Datei stehen), diese Datei sollte folgendermaßen aussehen:
/* Theme Name: Mein Child-Theme Description: Mein Child-Theme Author: Badango Author URI: https://badango.eu Template: twentyseventeen Version: 1.0 Tags: */
Hier ersetzt ihr den Namen etc natürlich durch euren eigenen, die Angabe hinter „Template:“ muss der Name des Verzeichnisses eures Eltern-Themes sein, in diesem Fall hier wäre das also das Theme Twenty Seventeen, das Standard-Theme.
2. functions.php erstellen und Eltern-CSS einbinden
Die einzige Datei, die nun noch benötigt wird, ist die functions.php, dazu einfach eine neue, leere PHP-Datei erstellen und unter dem Namen functions.php im Verzeichnis des Child-Themes speichern. Um nun die CSS Styles des Eltern-Themes korrekt einzubinden fügen wir die folgende Funktion in dieser Datei ein:
function my_child_css() {
wp_deregister_style('twentyseventeen-style');
wp_register_style('twentyseventeen-style', get_template_directory_uri(). '/style.css');
wp_enqueue_style('twentyseventeen-style', get_template_directory_uri(). '/style.css');
wp_enqueue_style('mytheme-style', get_stylesheet_directory_uri().'/style.css', array('twentyseventeen-style'));
}
add_action('wp_enqueue_scripts', 'my_child_css');
Was ihr hier da angeben müsst, wo in diesem Beispiel „twentyseventeen-style“ steht, das erfahrt ihr in der Regel in der functions.php des Eltern-Themes, sucht dort einfach nach der Funktion wp_enqueue_style(), bei Twenty Seventeen ist es z.B. eben „twentyseventeen-style“. Wenn ihr euer CSS in einer anderen Datei als der standardmäßigen style.css unterbringen möchtet, so könnt ihr hier auch in der letzten Zeile der Funktion entsprechend ein anderes Verzeichnis bzw Dateinamen angeben.
3. Das Child-Theme installieren / aktivieren
Wenn ihr diese Dateien erstellt und hochgeladen habt, dann solltet ihr euer Child-Theme nun im WordPress Dashboard unter „Design => Themes“ vorfinden und aktivieren können. Wenn ihr möchtet, dass dort auch ein eigenes (Vorschau-)Bild angezeigt wird, dann könnt ihr dafür außerdem ein Bild mit dem Namen screenshot.png in euer Theme-Verzeichnis packen, dieses sollte ein Format von 600px x 450px haben.
4. Eigene Modifikationen am Theme durchführen
Nun könnt ihr jegliche Modifikationen, die man normalerweise am Eltern-Theme vornehmen würde, stattdessen am Child-Theme vornehmen, also entweder eigene Funktionen in der functions.php hinzufügen oder ihr könnt auch ganze Template-Dateien, z.B. single.php für die Anzeige von Posts, aus dem Eltern-Theme in euer Child-Theme kopieren und dort beliebige Änderungen vornehmen, diese bleiben dann auch bei einem Update des Eltern-Themes aktiv (Achtung: Speziell bei Sicherheits-Updates des Eltern-Themes solltet ihr ggf überprüfen, ob sich an den von euch modifizierten Dateien etwas geändert hat und ggf die Änderungen übernehmen).
