Child-Themes für individuelle WordPress Anpassungen

…und: warum es so nützlich ist mit Child-Themes zu arbeiten

Wer mit WordPress arbeitet, weiß es: das verwendete Theme bleibt von Anpassungen meist nicht verschont. An der einen oder anderen Stelle werden Anpassungen fällig. Zum Beispiel wird CSS Code angefügt, um das Erscheinungsbild anzupassen, es soll ein php-Snippet integriert werden oder beispielsweise ein Plugin angepasst werden. Auch das Einfügen des Google Analytic Tracking Snippets kann – wenn nicht über ein Plugin gelöst – via php-Code erfolgen. So oder so, ein Child-Theme sorgt dafür, dass Ihre Anpassungen auch bei einem Theme-Update bestehen bleiben und das original Theme bleibt unangetastet. Das Child Theme ist als Ableger des originalen Themes zu verstehen und seine hinterlegten Einstellungen werden dann zukünftig beim Aufrufen Ihrer Website angezeigt. So ist eine sichere Individualisierung Ihrer Website möglich. Allerdings: ganz ohne Kenntnisse von CSS und HTML sollte man sich nicht an dieses Thema wagen.

Die Möglichkeiten mit Child-Themes

Die Funktionalität erweitern

Die functions.php ist ein Herzstück der WordPress Website, sie beeinflusst verschiedenste Funktionen des Themes. An dieser Stelle kann man beliebige Funktionen erweitern, die man für die Website benötigt. Die functions.php muss für jedes Child Theme standardmäßig angelegt werden (s.u.).
Mittels der php-Dateien kann die Funktionalität der Website beeinflusst werden. Möchte man Anpassungen am Header oder Footer der Seite machen, kann man dies beispielsweise über die Dateien header.php und footer.php bewerkstelligen. Mehr dazu finden Sie ebenfalls unten.

Das  Layout anpassen

Nehmen Sie Ihre CSS-Anpassungen zukünftig an einer zentralen CSS-Datei vor: an derjenigen des Child-Themes. So können Sie das Layout der Seite ändern und haben alle Änderungen am Design zentral an einer Stelle. Außerdem bleiben diese Änderungen bei einem Update des Themes bestehen. Wie das geht, erfahren Sie weiter unten.

Anleitung zum Erstellen eines Child Themes

Die Vorbereitung auf File-Ebene

Melden Sie sich mit einem FTP-Client wie beispielsweise FileZilla und den Zugangsdaten von Ihrem Hosting Provider auf Ihrer Website an. Im Ordner ../wp-content/themes/ legen Sie einen neuen Ordner an, in unserem Fall war das beispielsweise „kalium-child“ (der Name ist aber frei wählbar).

Darin erstellen Sie nun eine functions.php und eine style.css. Oder Sie erstellen diese Dateien lokal und übertragen Sie dann auf den Server.

style.css

Diese Datei wird Ihre Anpassungen am Style der Website enthalten, sollten Sie welche haben.
Fügen Sie (mindestens) einen beschreibenden Kommentar hinzu und speichern Sie die Datei ab:

/*
Theme Name: Kalium Child
Description: Anpassungen von Kalium wegen Google Analytics
Author: Susanne Walz, frank & frech design
Author URI: https://produkt.frankundfrech.de
Template: kalium
Version: 1.0
*/


functions.php

Diese php-Datei kann zukünftig Anpassungen am Code enthalten, die die Funktionalität Ihrer Website steuert.
Fügen Sie zunächst den folgenden Code ein, er sorgt dafür, dass das Child-Theme an das übergeordnete Haupt-Theme angehängt wird. Bleibt der Code so, wird die Website identisch zur originalen Version angezeigt werden.

<?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' );?>

Der functions.php können Sie nun Funktionen ergänz werden. Sie wirkt lediglich ergänzenr im Child Theme.

Weitere Anpassungen

Möchten Sie außerdem Anpassungen an Header oder Footer machen, so müssten diese php-Dateien ebenfalls aus dem Elterntheme in den Child-Theme Ordner kopiert und dann angepasst werden. Achtung: header.php und footer.php im Child Theme ersetzen die Dateien diejenigen des Parent Themes komplett.

Für den Admin-Bereich in WordPress: erstellen Sie einen Screenshot Ihrer Website und speichern Sie ihn als screenshot.png ebenfalls in das Child-Theme-Verzeichnis.

Das Aktivieren des Themes

Im Theme-Bereich können Sie nun Ihr „neues“ Child-Theme aktivieren und zukünftig Ihre Anpassungen daran vornehmen.

Tipp: wenn Sie ein Child-Theme anlegen, nachdem schon Anpassungen im Original Theme gemacht wurden, so müssen Sie eventuelle Code-Optionen nochmals neu konfigurieren bzw. – wenn im Theme möglich – die Theme Optionen zuvor sichern und im Child-Theme wieder importieren.

Die Vorteile im Überblick

Verwenden Sie ein Child Theme, sind Ihre Anpassungen am Theme alle übersichtlich an einem Ort gebündelt. So kann ein Dienstleister, der Anpassungen an der Website machen soll oder ein neuer Mitarbeiter, direkt sehen, was angepasst wurde. So bleibt die Website mit ihren Anpassungen transparent für alle, die damit arbeiten.