Ein Child Theme in WordPress ermöglicht es Dir, dass aktive Theme zu erweitern und zu ergänzen. Wie das geht und was Du alles damit machen kannst, zeigt Dir dieses Tutorial.

Was kann ein Child Theme in WordPress überhaupt alles?

Hat es Dich auch schon mal geärgert, dass das Eingabefeld für zusätzliches CSS im Customizer so klein ist? Oder, dass es nicht möglich ist ein paar Zeilen JavaScript irgendwo zu hinterlegen? Für genau solche Fälle ist ein Child Theme in WordPress gedacht. Dieses erweitert das aktivierte (Parent-)Theme und bietet Dir Schutz davor, Änderungen bei einer Aktualisierung des Themes zu verlieren.

Für wen ist dieses Tutorial geeignet?

Dieses Tutorial ist für alle geeignet, die ein bestehendes Theme erweitern wollen. Wir arbeiten dabei mit CSS-Stylesheets und der berüchtigten functions.php. Nachdem wir das Child Theme angelegt hast, bist Du wesentlich flexibler, um Deine WordPress-Seite anzupassen.

Wir brauchen ein Child-Theme

Ein Theme, welches du typischerweise in WordPress installieren kannst, ist ein sogenanntes Parent Theme. Dort ist alles enthalten, was Du für das Theme brauchst. Musst Du jedoch Änderungen daran vornehmen, die nicht über den Customizer erledigt werden können, sind diese Änderungen mit dem nächsten Update des Themes wieder weg.

Was sind denn das überhaupt für Änderungen?

Das ist eine berechtigte Frage, denn Du installierst ja ein Theme in der Regel, weil es Dir vom Layout und Design gefällt. Die kleineren Anpassungen kannst Du doch dann im Customizer machen. Das stimmt grundsätzlich, allerdings werden viele Konfigurationsoptionenen des Customizers erst beim Kauf der kostenpflichtigen Variante des Themes freigeschaltet oder aber Du hast ein Theme wie z.B. Generate Press, der Dir alle Freiheiten lässt, Dein eigenen Look’n’Feel zu erstellen.

Dann hast Du schnell den Bedarf kleinere PHP-Funktionen zu ergänzen, Designanpassungen mit Cascading Stylesheets (CSS) zu machen, Funktionserweiterungen mit JavaScript zu erstellen und sogar Templates zu überschreiben, wenn Du das Layout anpassen möchtest. Machst Du das allerdings direkt im Parent Theme, sind diese Änderungen beim nächsten Update wieder überschrieben.

Das Child Theme kommt ins Spiel

Die Lösung für dieses Dilemma ist ein Child Theme. Das Child Theme ist eine Ergänzung und überschreibt und ergänzt Inhalte des Parent Themes. Da sich die Dateien des Child Themes in einem eigenen Verzeichnis befinden, werden diese Dateien auch nicht bei einer Aktualisierung überschrieben.

Und wie komme ich an ein Child Theme

Viele Themes bieten ein Child Theme zum Download an. Das heruntergeladene Child Theme installierst Du dann wie ein gewöhnliches Theme und aktivierst es. Das ist alles was Du dafür tun musst.

Bietet der Theme-Anbieter jedoch keinen solchen Download, dann ist ein Child Theme auch schnell selbst erstellt. Ich gehe bei den folgenden Schritten davon aus, dass Du WordPress lokal installiert hast und das Standard-Theme Twenty TwentyOne verwendest. Du kannst es aber für jedes andere Theme adaptieren, denn Du musst einfach nur den Namen austauschen.

Um nun mit einem Child Theme zu starten, erstellst Du auf Deinem Computer einen neuen Ordner im Theme-Verzeichnis Deiner lokalen WordPress-Instanz. Der Name des Ordners lautet wie der des Parent-Themes nur mit dem Suffix -child. In unserem Fall heißt dieser neue Ordner twentytwentyone-child.Innerhalb dieses Ordners erstellst Du eine Datei mit dem Namen style.css mit dem folgenden Inhalt:

/* Theme Name: Twenty TwentyOne Child Template: twentytwentyone */
Code-Sprache: JSON / JSON mit Kommentaren (json)

Den Theme Name kannst Du frei vergeben während Template dem Namen des Ordners entspricht, unter dem das Parent Theme gespeichert ist. Diese beiden Informationen sind erforderlich, aber es gibt noch einige weitere Informationen, die Du hinzufügen kannst. Diese zusätzlichen Informationen sind allesamt optional.

InformationBeschreibung
DescriptionBeschreibung des Child Themes
AuthorDer Autor dieses Child Themes
Author URIEine Webadresse die etwas über den Autor des Child Themes preisgibt
VersionDie Version des Child Themes
LicenseDie Lizenz, unter der das Child Theme veröffentlicht wird
License URIDie Webadresse, unter der man den Text der Lizenz nachlesen kann
TagsTags, um das Theme zu verschlagensten. Nur sinnvoll, wenn Du es veröffentlichen willst.
Text DomainEin Name des Child Themes ohne Sonderzeichen

Das ist schon die halbe Miete, aber jetzt musst Du noch dafür sorgen, dass dieses CSS zusätzlich zu dem CSS des Parent Theme geladen wird. Das machst Du in der functions.php, die Du in dem gleichen Ordner wie die style.css anlegst.

<?php /** * Adds the child theme's css to the loaded css files. */ function my_theme_enqueue_styles() { wp_enqueue_style( 'child_css', get_stylesheet_directory_uri() . '/style.css'); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Code-Sprache: HTML, XML (xml)

Der Inhalt dieser functions.php ist schnell erklärt. Hiermit fügst Du die style.css zu der Liste der Stylesheets hinzu, die beim Aufruf der Seite geladen werden werden. Das neue Child Theme muss natürlich noch aktiviert werden. Das machst Du unter Design -> Theme. Dort kannst Du Dein Child Theme mit einem Klick aktivieren. Es ist ohne Umschweife aktiv und mit dem Parent Theme verbunden.

Überprüfen kannst Du das in den Entwicklerwerkzeugen Deines Browsers. Zusätzlich zur style.css des Parent Themes wurde die style.css des Child Themes geladen.

Das CSS-Stylesheet des Child-Themes ist geladen
Das CSS-Stylesheet des Child-Themes ist geladen

Und was fangen wir jetzt mit dem Child Theme an?

Du kannst jetzt anfangen, mit dem Child Theme zu arbeiten. Damit Du Dir eine Vorstellung machen kannst, was alles möglich ist, liste ich Dir ein paar übliche Anwendungsfälle für Child Themes auf.

Anpassung von Elementen auf Seiten und Beiträgen mit CSS

Die Anpassung bei Design und Layout ist wahrscheinlich der häufigste Grund für ein Child Theme. In der style.css kannst Du jetzt die gewünschten Änderungen machen. Um zum Beispiel die Überschriften für Beiträge abzuändern, reicht es folgendes CSS der Datei hinzuzufügen:

.post h2{ font-size: 1.2em; color: rgb(51, 51, 51); }
Code-Sprache: CSS (css)

Damit wird die Überschrift größer als der Fließtext und mit einem etwas helleren Schwarz eingefärbt. Durch das .post vor dem h2 (h2 ist eine Überschrift 2. Ordnung) gilt diese Anweisung nur für Beiträge und nicht für Seiten. Willst Du das ganze für Seiten machen, dann würde das zugehörige CSS so aussehen:

.page h2{ font-size: 1.2em; color: rgb(51, 51, 51); }
Code-Sprache: CSS (css)

Zusätzliches JavaScript hinzufügen

Für viele kleine Goodies reichen häufig ein paar Zeilen JavaScript und man muss sich nicht ein ganzes Plugin dafür installieren. Mit einem Child Theme ist es unkompliziert zusätzliches JavaScript zu hinterlegen. Lege dafür in den Ordner des Child-Themes eine JavaScript-Datei an. Diese könnte z.B. theme.js heißen. Der Inhalt dieser Datei ist auch sehr übersichtlich zu Beginn:

(function($) { $(document).ready(function(){ //Ab hier kommen dann Deine Scripte }); });
Code-Sprache: JavaScript (javascript)

Die Funktionen in dieser JavaScript-Datei werden erst ausgeführt, wenn die Seite komplett geladen wurde. Somit vermeidest Du Scriptfehler, weil bestimmte Elemente, auf die Du zugreifen willst noch nicht geladen wurden. Dieses JavaScript musst Du WordPress noch bekannt machen. Und ja, Du ahnst es richtig. Das passiert wieder in der functions.php. Füge einfach das folgende kleine PHP-Snippet in diese Datei hinzu.

/** * Add custom JavaScripts */ function add_custom_javascripts() { wp_enqueue_script('theme_js', get_stylesheet_directory_uri() . '/theme.js', array('jquery'), false, false); } add_action('wp_enqueue_scripts', 'add_custom_javascripts');
Code-Sprache: PHP (php)

Mit diesem Snippet wird nicht nur das JavaScript geladen, sondern es wird noch eine Instanz von jQuery mitgegeben, welches einen reichhaltigen Funktionsumfang bietet, mit dem Du nahezu jede Aufgabe schnell und einfach erledigen kannst.

Google Fonts lokal vorhalten

Dies ist der letzte Anwendungsfall, den ich Dir im Rahmen dieses Tutorials vorstellen möchte. Google Fonts bietet Dir eine reichhaltige Auswahl an Schriftarten, die Du unkompliziert in Deine Seite einbinden kannst. Allerdings hat dieses Vorgehen 2 große Nachteile: Zum einem verlängert sich die Ladezeit Deiner Webseite etwas, weil die Daten von den Google-Servern geladen werden müssen. Zum anderen hast Du ein Datenschutzprobleme damit. Da die Schriften von einem Fremdserver geladen werden, wird dabei auch die IP-Adresse des Besuchers an diese Server übermittelt. Um das zu verhindern, kann man die Schriften auch in WordPress speichern. Es gibt eine Webapp, die Dich dabei unterstützt. Diese Webapp gibt Dir einen Snippet an CSS-Code und ein Zip-Archiv mit den benötigten Fonts, dass Du herunterladen kannst. In der App, gibt es noch die Möglichkeit, dass Verzeichnis anzugeben, in dem Du die Fonts auf dem Server speichern willst. Dort gibst Du ./fonts ein.

In dem Ordner des Child-Themes erstellst Du ein neues Verzeichnis mit dem Namen fonts und kopierst alle Schriftarten aus dem Zip-Archiv dorthinein. Den CSS-Code, den Du in der Webapp angeboten bekommst, kopierst Du in die style.css. Nach dem leeren des Browser-Caches und einem Reload Deiner Seite, werden die Fonts nicht mehr von Google sondern von Deinem Server geladen.

Das Child-Theme in der Live-Seite aktualisieren

Bisher haben wir die Änderungen ja nur auf dem lokalen Rechner gemacht. Jetzt, wo Du soweit bist, willst Du das auch für Deine Live-Webseite machen. Dazu erstellst Du aus dem Inhalt des Odners mit dem Child Theme ein Zip-Archiv und lädst es als neues Theme in WordPress hoch (Design -> Theme – Button Theme hochladen). Nach dem Aktivieren des hochgeladenen Child Themes ist dieses aktiv und mit dem Parent Theme verbunden.

Alternativ kannst Du natürlich auch den genauen Ordner per SFTP auf den Server Deines Webhosters hochladen. Allerdings musst Du danach das neue Child Theme genauso aktivieren, wie ein Stück weiter oben beschrieben.

Und was ist mit Dir?

Webseiten mit WordPress

Verwendest Du schon ein Child Theme auf Deiner Seite? Oder bist Du durch dieses Tutorial auf den Geschmack gekommen? Schreib doch was dazu in die Kommentare. Hast Du Fragen zu WordPress und bist an meinen weiteres Services zu WordPress interessiert?


1 Gedanke zu „Was kann ein Child Theme in WordPress überhaupt alles?“

Schreibe einen Kommentar