WordPress: Child-Theme erstellen und nutzen

Es ist ärgerlich und dir selbst vielleicht schonmal passiert: Nachdem du eine Menge Anpassungen am Design deiner Seite vorgenommen hast, gab es ein Update. Kaum, dass du das eingespielt hast, waren alle deine Änderungen verschwunden.

Warum passiert das? Das Update verändert Einträge in der CSS-Datei bzw. überschreibt sie mit der eigenen. Dadurch werden auch deine Anpassungen gelöscht.

Da es sehr zeitaufwendig ist, alle Anpassungen andauernd aufs Neue durchzuführen, haben WordPress-Entwickler schließlich die Möglichkeit hinzugefügt, untergeordnete Themen zu erstellen (= Child-Themes), damit du untergeordnete Themes auf der Grundlage der Eigenschaften des übergeordneten Themes erstellen kannst. Also eine child-parent-Verbindung; wie so oft, wenn es um Programmierungen geht.

Mit einem untergeordneten Thema kannst du eine Kopie deines Themes einsetzen und es nach Belieben ändern. Da es separat gespeichert ist, wird es keine Auswirkungen auf das übergeordnete Thema haben.

Wie WordPress Child-Themes funktionieren

Ein untergeordnetes Theme befindet sich in einem vom übergeordneten Design getrennten Verzeichnis. Jedes untergeordnete Verzeichnis muss seine eigenen style.css und functions.php Dateien enthalten. Weitere benutzerdefinierte Dateien und Dateitypen können nach Bedarf hinzugefügt werden. Diese beiden Dateien sind aber am wichtigsten, damit das Design ordnungsgemäß funktioniert.

Mit den entsprechenden CSS- und PHP-Dateien kannst du nun alles von den Stil- und Layoutparametern bis hin zur tatsächlichen Codierung und den Skripten, die das untergeordnete Thema verwendet, ändern. Das gilt auch dann, wenn diese Skripten nicht im übergeordneten Verzeichnis vorhanden sind.

Wenn ein Besucher die Website lädt, ruft WordPress zuerst das untergeordnete Design auf und implementiert dann fehlende Stile und Funktionen vom übergeordneten Design. Infolgedessen wird der Großteil der Hintergrundcodierung immer noch aus dem übergeordneten Verzeichnis abgerufen, jedoch entsprechend den Parametern des untergeordneten Themas geändert, bevor der Inhalt auf der Seite angezeigt wird. Soll heißen, dass deine Besucher immer die grafischen Veränderungen sehen werden, die du ihnen zeigen möchtest.

So legst du ein Child-Theme an

Zuerst brauchst du folgendes:

  • Zugriff auf den WordPress-Administrationsbereich
  • Zugriff auf Dateimanager bzw. FTP

Erstellen eines untergeordneten Themes in WordPress

Das Erstellen eines untergeordneten Themes ist nicht kompliziert, also keine Sorge.

Im bereits vorhandenen Verzeichnis unter wp-content/Themes erstellst du einen neuen Ordner, den du wie dein eigentliches Design nennst, nur dass du zusätzlich noch die Endung „-child“ hinzufügst.

Nun fügst du die Dateien hinzu, die dein Child-Theme benötigt, um zu funktionieren.

Als erstes erstellst du mit dem Editor eine style.css Datei. In diese fügst du folgenden Code ein:


/*
Theme Name:   Name des Themes Child
Theme URI:    https://www.deinblog.de/
Description:  Name des Themes Child Theme
Author:       Dein Name

Author URI:   https://www.deinblog.de/
Template:     Ordner Name des Parent-Themes
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         hier kannst du Tags vergeben
Text Domain:  namedesthemes-child
*/

Dasselbe machst du noch einmal, nur fügst du nun eine functions.php-Datei im selben Ordner hinzu. Kopieren den Code jedoch nicht aus der Datei des übergeordneten Designs, da er von allen Änderungen, die du am untergeordneten Design vornimmst, getrennt bleiben muss. Stattdessen kommt folgender Code hinein:


<?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‘ );
}
?>

So erhält dein WordPress die Funktion zum Laden des CSS aus dem übergeordneten Theme.

Soweit, so gut. Nun aktivierst du in deinem Backend das Child-Theme und aktualisierst die Seite, nachdem du den Cache vollständig gelöscht hast.

Anpassen deines WordPress Child-Themes

Um das Aussehen des Themes nun anzupassen, musst du die custom.css-Datei des untergeordneten Themas bearbeiten.

Das lässt sich entweder durch FTP und Texteditor bewerkstelligen oder aber im implementierten Editor direkt in deinem Backend umsetzen.

So wie benutzerdefiniertes CSS den Stil des übergeordneten Designs überschreibt, kannst du übrigens mit Vorlagendateien auch eigene Layouts erstellen, indem du das Standardlayout überschreibst. Um das Original zu überschreiben, muss deine neue Vorlage denselben Dateinamen haben und sich am selben Speicherort wie das Original befinden. Es ist daher eine gute Idee, zuvor noch eine Kopie der Vorlagendatei des übergeordneten Themas zu erstellen und daraus den eigenen Code hinzuzufügen oder zu entfernen.

Die Hauptvorlagendateien werden im Hauptordner des Themas gespeichert. Die Vorlage zum Anzeigen eines einzelnen Posts ist single.php und die Vorlage für Seiten ist page.php.

Achtung beim Standardtemplate! Twentyseventeen teilt seine Vorlagen mithilfe der WordPress-Funktion get_template_part () auch in sogenannte Vorlagenteile auf. Um die entsprechende Datei zu finden, durchsuchst du einfach die Hauptvorlagen nach jener Phrase.

Ein weiterer großer Vorteil der Verwendung eines untergeordneten Themas ist die Möglichkeit, eine separate Datei functions.php zu haben, mit der genau wie mit Plugins bestimmte Funktionen hinzugefügt (oder entfernt) werden.

Child-Themes als optimales Zusatzfeature

WordPress Child-Designs bieten eine tolle Möglichkeit, ein völlig neues Projekt basierend auf den Parametern eines Master-Designs zu erstellen, ohne die Ursprungs- bzw. Hauptdateien zu beeinflussen und umgekehrt.

Mit ein bisschen einfacher Codierung und Verzeichnisverwaltung kannst du das untergeordnete Thema so weit ändern, wie dir beliebt. Außerdem kannst du dadurch eine Vielzahl von Möglichkeiten für dein Design bereitstellen, denn Child-Themes gibt es so viele, wie du nunmal brauchst.

Was du noch wissen musst

Das Parent-Theme deines aktiven Child-Ordners darfst du niemals löschen, da sonst die ausschlaggebenden Funktionen und Designeinstellungen auch verschwinden würden.

Davon abgesehen gibt es nichts weiter zu beachten, außer; Arbeite immer schön mit Backups!

Seit über neun Jahren bin ich in der wunderbaren Welt von WordPress unterwegs. Heute erstelle ich nicht nur erfolgreich eigene WordPress-Websites, sondern sorge auch in einer bekannten Online-Marketing-Agentur für glückliche Kunden – auch hier oft dank WordPress.