Nutzung von Child Themes in WordPress

Webdesign

Nachdem wir das Theme installiert haben und sollte das Theme kein Child Theme integriert haben (die meisten Premium Themes z.B. haben bereits ein eigenes Child Theme dabei), erstellen wir ein eben solches. Ein Child Theme sind extrem praktisch, wenn man das entsprechende Theme nach seinen Vorstellungen anpassen möchte. Die vorgenommen Änderungen werden ausschließlich im Child Theme gemacht und bei einem Update des eigentlich Themes, auch Parent (=Eltern) Theme genannt, bleiben die eigenen Anpassungen erhalten. In den folgenden Schritten erkläre ich, anhand des Standardthemes twentyseventeen, wie ein solches Child Theme erstellt wird.

CHILD THEME ANLEGEN

Als erstes erstellst du einen neuen Ordner per FTP im Verzeichnis ./wp-content/themes/, in unserem Beispiel twentyseventeen-child. In diesem Ordner erstellst du jetzt eine neue style.css Datei mit folgendem Inhalt:

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentyseventeen
Version: 1.3
*/

Neben der Angabe des Theme Namens mit angehängtem Child, ist der Eintrag Template besonders wichtig bzw. zwingend notwendig. Ohne die korrekte Angabe wird das neu erstellte Child Theme nicht im Admin-Bereich vorfinden. Zusätzlich kopiere ich die screenshot.png Datei aus dem Basis Theme in das Childe Theme Verzeichnis, damit im Admin-Bereich kein „graues“ Bild angezeigt wird. Dies ist jedoch reine Optik.

Wenn alles korrekt erstellt worden ist, solltest du nun unter Design Themes dein Child Theme sehen und kannst es direkt aktivieren.

CSS DATEI ERSTELLEN

Das Child Theme hat lediglich eine leere style.css Datei und somit keine CSS Styles, so dass deine Website „unformatiert“ ist. Da man in den meisten Fällen das Parent Theme nur an gewissen Stellen seinen (Design-)Bedürfnissen anpassen möchte, ist es ratsam die style.css des Parent Themes in das Child Theme zu laden.

Hierfür ergänzt du in der eben angelegten style.css Datei des Child Themes folgende Zeile:

@import url("../twentyseventeen/style.css");

Rufst du nun deine Website erneut auf, sieht sie genauso aus wie vorher mit dem Parent Theme. Ab jetzt kannst du in deinem Child Theme direkt in der style.css Designanpassungen vornehmen. Veränderst du CSS-Eigenschaften aus dem Parent Theme musst du evtl. bei manchen Styles !important ergänzen, damit diese auch überschrieben werden.

body {
   color: #666 !important;
}

THEME DATEI ANPASSEN

Neben dem Style Sheet können alle weiteren Theme Dateien ebenfalls angepasst werden, wie z.B. header.php, index.php oder footer.php. Wenn du eine solche Datei ändern möchtest, kopierst du diese von dem Parent Theme in das Child Theme Verzeichnis und passt diese nach deinen Wünschen an.

Du kannst im Child Theme auch weitere Templates anlegen und in dein Theme integrieren.

WordPress sucht zuerst im Child Theme Verzeichnis nach der jeweiligen Datei und erst dann im Parent Theme Verzeichnis. Einzige Ausnahme ist die functions.php, dazu aber im nächsten Abschnitt mehr.

ANPASSUNGEN DER FUNCTIONS.PHP

Wenn man im Child Theme Verzeichnis eine functions.php anlegt, ersetzt diese nicht die functions.php des Parent Themes, sondern wird zusätzlich, vor der functions.php des Parent Themes geladen. Somit kannst du hier zusätzliche PHP-Funktionen integrieren, ohne das diese bei einem Update des eigentlichen Themes verloren gehen.

Recommended for you