Was ist ein WordPress-Child-Theme?

  • Und wie kann man ein eigenes Child-Theme anlegen?
  • Infos, Kurzanleitung und Tipps
WordPress Angebot
  1. Startseite
  2. WordPress-Hosting
  3. Child-Theme

Das Website-Design individualisieren mit WP-Child-Themes

Ein WordPress-Child-Theme ist im Grunde eine Kopie eines WordPress-Themes. Mit einem Child-Theme kann man das Design der eigenen Website weiter individualisieren, als es mit den Standard-Einstellungen bei WordPress möglich ist. Dafür verändert man den Quellcode des Themes. Praktisch kann man jedes Theme beliebig anpassen: Damit man dabei nicht versehentlich den Code beschädigt und die Website nicht mehr richtig dargestellt wird, erstellt man ein Child-Theme. Nur diese Kopie verändert man, lässt das sogenannte Parent-Theme unangetastet. Geht irgendetwas schief, nutzt man einfach wieder dieses.

Ein WordPress-Child-Theme zu erstellen hat auch noch einen weiteren Vorteil: Beliebte Themes werden regelmäßig von Ihren Herstellern mit Updates versehen. Eigentlich gut – doch Änderungen die man vorgenommen hat gehen dabei oftmals verloren. Bei einem Child Theme bleiben diese auch bei einem Update des Parent Themes bestehen.

Schritt für Schritt: Ein Child-Theme in WordPress anlegen

Wenn Sie ein WordPress-Child-Theme erstellen und Ihren Bedürfnissen anpassen möchten, benötigen Sie ein paar Grundkenntnisse in HTML und CSS und zudem ein FTP-Programm auf Ihrem Computer (z. B. FileZilla). Darüber können Sie eine Verbindung zum Server herstellen, auf dem Ihre Website liegt. Damit sich das FTP-Programm mit dem Webserver verbinden und Dateien hochladen kann, müssen Sie Zugangsdaten eingeben. Diese erhalten Sie von Ihrem Hosting-Anbieter.

1. Schritt: Einen Child-Theme-Ordner anlegen

Im FTP-Programm erstellen Sie im wp-content/themes-Ordner einen weiteren Unterordner, in dem das WordPress-Child-Theme angelegt wird. Dieser muss auf derselben Ebene liegen wie das Parent-Theme. Übersichtlich ist es, wenn der neue Ordner die Bezeichnung des Parent-Themes mit dem Anhängsel „-child“ hat. Grundsätzlich kann dieser jedoch beliebig benannt werden.

Ordner für WordPress-Child-Theme anlegen
Einen Ordner für das WordPress-Child-Theme im FTP-Programm anlegen

2. Schritt: Eine style.css-Datei erstellen

In dem neuen Ordner legen Sie die Datei style.css an. Diese Datei enthält das Stylesheet des Themes, das für Design und Layout der Website zuständig ist. Die Datei können Sie per Rechtsklick und der Auswahl „Neue Datei erstellen“ direkt im FTP-Programm generieren. In diese Datei müssen Sie zunächst nur die untenstehenden Codezeilen einfügen. Dafür öffnen Sie die Datei mit einem Code-Editor wie Sublime Text (nicht Word). Der Code ist beispielhaft für das Standard-Design „Twenty Nineteen“ und muss an den entsprechenden Stellen an Ihr individuelles Parent-Theme angepasst werden. Der Theme-Name ist der Name des WP-Child-Themes, der später auch im WordPress-Backend angezeigt wird. Unter dem Punkt „Template“ muss der exakte Name des Ordners eingetragen werden, in dem das Parent-Theme liegt.

/*
Theme Name: Twenty Nineteen Child
Description: Child-Theme von Twenty Nineteen
Author: Name
Author URI: http://example.org
Template: twentynineteen
Version: 1.0
*/

3. Schritt: Eine functions.php-Datei anlegen

Anschließend muss eine functions.php-Datei erstellt werden. Legen Sie zunächst wieder eine leere PHP-Datei im FTP-Programm an. In diese fügen Sie den folgenden Code ein:

<&php
add_action( ‚wp_enqueue_scripts‘, ‚theme_enqueue_styles‘ );
function theme_enqueue_styles() {
wp_enqueue_style( ‚parent-style‘, get_template_directory_uri() .‚/style.css‘ );
wp_enqueue_style( ‚child-style‘, get_stylesheet_directory_uri() .‚/style.css‘,
array(‚parent-style‘) );
}

Wie bearbeitet man das WordPress-Child-Theme?

Die beiden Dateien, die Sie in den Ordner des Child-Themes gelegt haben, sorgen dafür, dass das Theme nun auch im Backend sichtbar wird. Wenn Sie es jetzt aktivieren, sieht Ihre Website allerdings noch genauso aus wie beim Parent-Theme. Sie müssen noch Änderungen an den anderen Dateien im entsprechenden Theme-Ordner vornehmen: Kopieren Sie diese, beispielsweise die footer.php-Datei oder die header.php-Datei, zunächst in den Child-Theme-Ordner und verändern Sie anschließend nur die kopierte Datei – so stellen Sie sicher, dass der Original-Zustand erhalten bleibt.

WordPress erkennt, welche Dateien im Child-Ordner vorhanden sind, und nutzt automatisch diese veränderten Templates, zieht diese also den entsprechenden Dateien im Parent-Theme vor. Solange Sie keine Dateien verändern, wird das WP-Child-Theme einfach genauso aussehen und funktionieren wie das Parent-Theme.

Ein Beispiel – die Copyright-Angabe im Footer verändern

Um die Copyright-Angabe im Footer Ihrer Website zu verändern, kopieren Sie die footer.php-Datei in den Child-Ordner und verändern dann innerhalb der Kopie den Wortlaut wie gewünscht.

WordPress-Child-Theme: Copyright-Angabe verändern
Die Copyright-Angabe im Code der footer.php-Datei des Child-Themes verändern


Wie aktiviert man das veränderte Child-Theme in WordPress?

Da das Child-Theme im Verzeichnis wp-content/themes abgelegt ist, können Sie es wie jedes andere installierte Theme im Admin-Bereich von WordPress aktivieren. Sollten Ihnen nach der Aktivierung Fehler auf Ihrer Website auffallen oder die Änderungen nicht so aussehen, wie Sie es sich vorgestellt haben, können Sie immer wieder zum Parent-Theme zurückwechseln. Dafür aktivieren Sie es einfach wieder. Es wird nach wie vor im Theme-Menü angezeigt.

Tipp: Im Theme-Menü im WordPress-Backend wird das Child-Theme zunächst ohne Vorschaubild angezeigt. Wenn Sie das ändern möchten, legen Sie in dem Child-Theme-Ordner ein Bild ab, das den Dateinamen screenshot.png hat – dann wird dieses angezeigt. Das kann ein Screenshot oder auch jedes andere Bild sein. Das Bild sollte allerdings die Maße 1200 px x 900 px haben.

Vorschaubild des WordPress-Child-Themes verändern
Das Child-Theme im WP-Backend mit neuem Vorschaubild

WordPress-Child-Theme mit Plug-in erstellen

Wem die Arbeit mit CSS- und PHP-Dateien zu heikel ist, der kann auch auf ein Plug-in zurückgreifen. Der Child Theme Configurator erstellt eine Kopie des gewünschten Parent-Themes und lässt Sie dieses Child-Theme dann ganz einfach anpassen. Über einen Konfigurationseditor nehmen Sie detaillierte Einstellungen vor, die direkt in das Stylesheet übernommen werden. Sie brauchen also weder mit Texteditoren in den Dateien arbeiten, noch per FTP auf den Server zugreifen.

WordPress-Child-Themes im Überblick

  • Mithilfe von Child-Themes kann das Design der WordPress-Website individuell angepasst werden.
  • Ein paar Programmierkenntnisse sind von Vorteil, man kann jedoch auch ohne solche an einem WordPress-Child-Theme arbeiten.
  • Zur Erstellung und Bearbeitung eines Child-Themes benötigt man lediglich ein FTP-Programm und einen geeigneten Texteditor.