Themes

Ein Child Theme sollte auf jeder Website vorhanden sein, damit man eigene Erweiterungen des Layouts problemlos machen kann.

Was ist also ein Child Theme? Vereinfacht gesagt, eine Erweiterung des allgemeinen Parent Themes. Dies stellt die Grundstruktur dar und kann mit dem Child Theme wie gewünscht angepasst werden, ohne den Look und Funktionalität der Website zu beeinträchtigen. Die Änderungen bleiben, so lange das Theme vorhanden ist und bei Updates werden diese nicht gelöscht. Für Fortgeschrittene und Profis sind Child Themes unerlässlich, um die Website nach den eigenen Wünschen zu gestalten. Weiters können auch Plugins (Kalender, WooCommerce,…) mittels des Child Themes erweitert werden, indem man einzelne Template Files passend hineinkopiert.

Was ist ein (Parent) Theme?

Ein Theme ist das Design Grundgerüst für die Website. Hier werden Farben, Schriften und Basislayouts definiert um den Inhalt passend anzuzeigen.

Was ist der Unterschied zwischen Theme und Template?

Ein Theme ist das ganze Gerüst. Ein Template ist ein einzelnes File innerhalb des Themes – Beispiel: single.php, header.php

Wann brauche ich ein Child Theme?

Ein Child Theme ist sinnvoll, wenn das Haupttheme erweitert werden soll. Sei dies beim Layout und CSS oder ganz neue Funktionen für das System (Shop, Kalender,…). Sind viele Änderungen und Custom Erweiterungen geplant ist ein Child Theme notwendig.

Wichtig: Parent (Theme) nicht löschen, sonst funktioniert die Site nicht mehr.

Wie erstelle ich ein Child Theme?

1. Neuen Ordner in /wp-content/themes/ per FTP erstellen oder hochladen (der Name des Ordners ist egal, sollte aber logisch sein – Beispiel: themename-child)
2. Die 3 wichtigsten Dateien hineinspielen (style.css, functions.php und screenshot.png)
3. Unter Design/Themes im Backend das Child Theme aktivieren (Tipp – vorher auf Vorschau klicken, um das Layout zu testen)

Welche Dateien benötigt man mindestens?

1) style.css

(einfache Layoutanpassungen wie Farben und Links – das Stylesheet)

Erstelle die Datei (Platzhalter ersetzen) in einem passenden Editor und füge folgenden Code hinzu:

/*
 Theme Name:   [Name des Parent(Theme)] Child
 Description:  [Name des Themes] Child Theme
 Author:       [Autoren Name]
 Author URI:   [https://www.domain.at]
 Template:     [Ordner Name des Parent(Theme)]
 Version:      1.0.0
*/

/* Ab hier eigenen Anpassungen */

2) functions.php

(Funktionen von WordPress und dem Theme erweitern, deaktivieren)

Erstelle die Datei in einem passenden Editor und füge folgenden Code hinzu:

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

3) screenshot.png

(Visuelle Ansicht im WordPress Backend, also nicht so wichtig ;-))

Erstelle eine Grafik oder einen Screenshot mit den Maßen 880 Pixel x 660 Pixel als Vorschaubild für das Theme im WordPress Backend.

Wo finde ich Child Themes Informationen für Theme X?

• Avada
• Enfold
• Astra
• Divi
• GeneratePress
• Elementor

Was sind die Vorteile?

• Bessere Erweitbarkeit ohne Plugins, mehr Freiheit bei Weiterentwicklungen
• Trennung von eigenen Weiterentwicklungen des (Parent) Themes
• Änderungen und Anpassungen bleiben nach Updates verfügbar
• Zeitersparnis da man schon ein fertiges Theme als Vorlage hat
• einfacher Weg um zu lernen wie ein Theme funktioniert
• zukunfssichere Übergabe bei Anbieterwechsel – ein selbstgebautes/erweitertes Parent Theme übernimmt keiner gerne 🙂

Was sind die Nachteile?

• Technisches Verständnis der Ordnerstruktur notwendig und wie ein FTP Upload funktioniert
• Technisches Verständnis für CSS, Javascript und PHP notwendig um Design Anpassungen zu machen
• Minimale schlechtere Performance, da die Daten von Parent und Child aufgerufen werden müssen
• Abhängigkeit vom Theme Hersteller, wenn Funktionen entfernt werden kann das Child Theme nicht mehr funktionieren

Kann ich mir die Dateien für das Theme automatisch erstellen lassen?

Ja mit dem Child Theme Configurator ist dies einfach möglich, wenn das Theme kein eigenes Child Theme zur Verfügung stellt und man keinen FTP Zugang oder das Know-How für die Erstellung der 3 Dateien hat.

Kann ich es nachträglich nach Änderungen im Customizer aktivieren?

Ja, auch dafür gibt es ein Plugin – Customizer Export/Import. Nach der Installation kann man im WordPress Customizer am Ende die Daten exportieren und nach Aktivierung des Child Themes die .dat Datei wieder einlesen lassen. Besser ist es jedoch immer gleich beim Aufsetzen der Site darauf zu achten.

Ist ein Child Theme mit Twenty Twenty Two Theme (Block Themes) noch sinnvoll?

Momentan (Februar 2022) ist es meiner Meinung nach noch nicht sinnvoll. Der Aufwand für die Erstellung ist viel größer als bei Standard Themes und der Transfer von bereits gemachten Änderungen ist sehr umständlich. Kurz gesagt muss fast eine komplette Kopie des Parent Themes (Parts, .json,…) erstellt werden und nimmt dadurch den Sinn des Child Themes. Wenn man beim 2022 Theme die Umsetzung plant, dann auf jeden Fall bevor man irgendwelche Änderungen beim Full Site Editing gemacht hat.

Was mache ich, wenn die Änderungen nicht mehr funktionieren?

Manchmal passiert das beim Update des Parent Themes. Im Changlog des Themes findet man häufig Hinweise auf neue Funktionen oder die Aufforderung das Child Theme anzupassen. Bei bekannteren Themes gibt es auch kurz danach schon im Internet zahlreiche Beiträge, warum etwas nicht funktioniert. Oft gibt es kleine Fixes in einzelnen Templates wie footer.php und die Website funktioniert wieder. Je mehr Files man überschreibt, desto genauer muss man nach Updates kontrollieren.

Für die Kontrolle der Unterschiede gibt es auch eine Erweiterung – Child Theme Check. Jedoch muss hier das Theme (version im Code) passend programmiert worden sein.

Was sind die häufigsten Gründe, warum meine Anpassungen nicht funktionieren?

Hierfür kann es ein paar Gründe geben. Als erstes kontrolliert man, ob das Child Theme überhaupt aktiviert ist. Manchmal passiert es im Eifer das die Aktivierung vergessen wird.

Danach kommt eines der Lieblingsthemen eines Entwicklers – das Caching! Ist es vielleicht im Browser Cache (Strg +F5 um diesen zu löschen auf Windows Geräten) oder eine Performance Erweiterung kann nicht damit umgehen? Cache löschen! Immer ;-).

Noch ein weiterer Grund wäre die falsche Benennung der Datei. Die Style Datei muss style.css heißen und für die Funktionen gibt es die functions.php – aber auch die anderen Template Files müssen genau so heißen wie im Parent Theme. Sonst können diese nicht überschrieben werden – also auf Schreibfehler und Groß- und Kleinschreibung achten.

PHP Fehler in der functions.php können eine Website auch mit einem kleinen Schreibfehler zerstören. Bearbeiten dieses Files nur auf eigenes Risiko.

Beim Layout kann es auch sein, dass man vorhandene Style Definitionen mit !important ersetzen muss um diese sichtbar zu machen.

Was ist die Alternative, wenn mir das alles zu kompliziert ist?

Die Inhalte und das Layout können je nach verwendetem Theme auch über den WordPress Customizer (Design -> Customizer) geregelt werden und wenn man nicht plant etwas an den Funktionen zu ändern, reicht das vielleicht schon. Weiters gibt es Plugins mit denen man auch CSS, Javascript Änderungen oder Snippets (kleine Code Teile) einbauen kann, ohne Child Theme.

Fazit:

Ich verwende Child Themes bei jedem Projekt, um mir die Arbeit bei Updates zu erleichtern und flexibel zu bleiben. Oft enthält ein bestimmtes Theme die notwenige Funktion nicht und muss sonst umständlich erweitert werden. Mit wenigen Schritte ist es schnell erstellt und verfügbar und von Anfang an, wenn möglich, bei meinen Projekten/Kunden aktiviert.