WordPress Child Theme erstellen: „WordPress Childtheme Tutorial“

In diesem Beitrag zeige ich dir, wie man rasch ein WordPress Child Theme erstellen kann. Vor allem erkläre ich, warum wir uns all die Mühe machen sollten und wie du künftig von einem Child Theme bei deiner Arbeit profitierst. 

Ein WordPress Child Theme ist ein echtes Wundermittel für Webentwickler. Zwar lässt sich WordPress auch ohne Child Theme grafisch und inhaltlich anpassen, indem man Anpassungen am Stylesheet oder der functions.php vornimmt. Ärgerlich ist nur, dass alle diese Anpassungen verloren gehen, wenn man ein Update des Themes einspielt.

Um genau dies zu verhindern, baut man das sogenannte Child-Theme.

Was ist ein WordPress Child Theme?

Ein WordPress Child Theme ist ein Theme, das die Funktionalität eines anderen Themes, des sogenannten Parent Themes, erbt. Child-Themes werden häufig verwendet, wenn man Änderungen an einem bestehenden Theme vornehmen möchte, ohne die Möglichkeit zu verlieren, das Parent-Theme zu aktualisieren.

Ein Child Theme ergänzt also die Design-Einstellungen und Funktionen eines anderen WordPress Themes. Die Idee ist, eigene Styles, Templates und Funktionen in einem separaten Theme zusammenzufassen und dann diesen Code dem Haupttheme hinzuzufügen. Praktisch ist, dass dieses Theme alle Eigenschaften des übergeordneten Parent-Themes erbt, andersherum wir aber sämtliche Anpassungen im Child-Theme im Original-Theme automatisch einfügen. So lassen sich nicht nur kleine Änderungen, sondern ganze Templates beliebig ändern.

In kurz: WordPress lädt zunächst das Parent Theme (Elterntheme) und prüft anschließend, ob es Sonderwünsche (im Child Theme) gibt.

Gerade bei einfachen Themes sind oft Änderungen im Code notwendig. Aber auch bei umfangreichen Themes wie dem Divi Theme gibt es Anpassungen, die leider nur durch einen Eingriff in die Dateien umgesetzt werden können. Meist sind dies Änderungen an den style.css und functions.php – gleichwohl das Style CSS auch direkt in den Theme-Optionen eingetragen werden könnten. 

Natürlich könnte man auch direkt die Dateien des Themes ändern, hätte aber dann das Problem, dass mit dem jedem Update des Themes alle Änderungen überschrieben werden. Und genau dieses Problem wird durch die Nutzung eines Child Themes vermieden.

Und was ist nun ein Parent Theme?

Das Parent Theme bzw. Elterntheme ist das eigentliche Haupttheme. Dieses ist in der Regel das normale WordPress Theme und es beinhaltet sämtlichen Code.

Warum sollte ich ein WordPress Child Theme verwenden?

Um es auf den Punkt zu bringen: Nur durch ein Child Theme bleiben all deine Anpassungen im Code bei deinem nächsten Theme Update erhalten. Ohne ein Child Theme würden sämtliche Änderungen, die du direkt am Theme vorgenommen hast, durch das Update überschrieben werden.

Praktisch ist auch, dass man mehrere Child Themes zu einem Eltern-Theme erstellen kann, so dass man bequem zwischen verschiedenen Versionen wechseln kann.

Leider bietet WordPress keine automatische Erstellungen von Child Themes. Folgende Wege führen zu deinem eigenen Child Theme:

Download: 

Der einfachste Weg ist die Nutzung eines fertigen Child-Themes vom Hersteller. Wir bieten beispielsweise auf Designers Inn immer Childthemes zu den Themes an, sodass jeder Kunde sofort startet.  

Plugins: 

Es gibt einige Plugins, die automatisch Child Themes erstellen. Mit diesen Plugins lassen sich automatisch passende Child Themes zu eigentlich allen Standard-Themes erstellen. Ein kostenloses Plugin ist z. B. der Child Theme Configurator.  Aber aufgepasst: Eigentlich braucht man kein Plugin.

Do It Yourself: 

Mit der folgenden Anleitung ist es sehr leicht in ein paar Minuten ein eigenes Child Theme zu erstellen. Aber auch wer sich für ein Plugin entscheidet, sollte sich das folgende Tutorial durchlesen, um den Aufbau eines solchen Themes besser zu verstehen und vor allem zu wissen, welche Dateien der Installation hinzugefügt werden, und wo die Änderungen später gespeichert werden.

WordPress Child Themes erstellen per style.css

Wie legt man nun ein Child-Theme korrekt an? Die meisten Anpassungen finden im Stylesheet (in der Datei style.css) oder der functions.php statt. Das macht die Sache einfach. 

Schritt 1: Child-Theme-Ordner anlegen

Logge dich per FTP in/auf deinem Server ein und erstelle im Verzeichnis wp-content/themes einen neuen Ordner. Den neuen Ordner kannst du beliebig benennen, z.B. CHILDTHEME. Wichtig ist nur, dass dieser Ordner auf derselben Ebene liegt, wie der Ordner deines Hauptthemes.

Schritt 2: CSS

Erstelle nun eine Datei style.css. Dies kannst du mit jedem Texteditor erledigen. Achte beim Speichern nur darauf, dass die Endung wirklich „css“ lautet.

Füge folgenden Text (mit deinen Daten) in die Datei ein. Wichtig ist vor allem, dass unter „Template:“ den exakten Namen des Ordners von deinem Haupttheme einzutragen!

Alle weiteren Details wie Child Theme Author, Version, Tags und Beschreibung sind optional.

/*

Theme Name: Childtheme

Description: Mein neues Childtheme

Author: Dein Name

Author URI: http://www.deine-website.de

Template: Name_des_Haupttheme-Ordners

Version: 1.0

Tags:

*/

/*Füge deinen Code unter dieser Zeile ein. Nutze ggf. !important, um Styles aus dem Haupttheme zu überschreiben.*/

Lade nun die style.css in den Ordner deines Childthemes.

Schritt 3: functions.php erstellen

Okay, jetzt müssen wir noch eine Datei namens functions.php erstellen, um auch Zugriff auf die Funktionen des Parent Themes zu erlangen. Mit dieser verknüpfen wir unsere Datei CSS mit unserem Haupttheme. Auch dies kannst du mit jedem Texteditor erledigen.

In die Datei kommt folgender Text:

<!–?php

//add child theme

add_action( ‚wp_enqueue_scripts‘, ‚theme_enqueue_styles‘ );

function theme_enqueue_styles() { wp_enqueue_style( ‚parent-style‘, get_template_directory_uri() . ‚/style.css‘ ); }

?–>

Schritt 4: Childtheme anpassen

Sobald du dich neu in dein Backend einloggst, ist dein neues Childtheme auch schon verfügbar und wir können das neue Childtheme nutzen. Klasse. Wir müssen also keine Änderungen mehr im Parent Theme vornehmen.

Dein neues Theme hat aber noch keine Vorschaugrafik und sieht entsprechend etwas nach einer Baustelle aus. Du kannst die Ansicht im Backend auch etwas aufhübschen, indem du ein Vorschaubild (PNG) mit dem Dateinamen screenshot.png in dein Verzeichnis des Child Themes legst. Das Bild sollte die Maße 1200 px x 900 px haben. Ab sofort wird dein neues Child Theme mit diesem Bild in deinem WordPress Backend angezeigt. 

Wie aktiviert man das veränderte Childtheme in WordPress?

Wenn du ein Child Theme aktivieren möchtest, musst du ein paar einfache Schritte befolgen.

Öffne zunächst den Code-Editor und stelle sicher, dass das Theme im selben Ordner wie das Parent-Theme gespeichert ist. In der Regel ist dies im Verzeichnis wp-content/themes abgelegt und sollte wie jedes andere installierte Theme im Admin-Bereich von WordPress angezeigt werden. Sobald dein neues Theme gespeichert ist, gehe zum WordPress-Dashboard und klicke auf „Design“. Im Menü „Design > Themes“ sollte dein Kunstwerk aufgelistet sein. Klicke auf „Aktivieren“ und das Child-Theme wird aktiviert.

Beachte, dass dein Elterntheme unbedingt installiert bleiben muss, denn hier ist ja 99 % des Codes enthalten. Du erinnerst dich? Wir wollen mit dem Child Theme nur die Änderungen vornehmen, die von Hause aus nicht über das Elterntheme erledigt werden können.  

Sobald dein Child Theme in WordPress das aktive Theme ist, solltest du zunächst noch gar keine Änderung sehen. Das ist auch richtig so, denn noch haben wir ja keine Änderung in unserem Child Theme eingetragen.

So kannst du dein Child Theme anpassen.

Ab sofort kannst du alle Anpassungen direkt in deinem Child Theme eintragen. WordPress erkennt automatisch, welche Dateien im Theme-Ordner vorhanden sind und welche Anpassungen hier vorgenommen wurden. Ist es in deinen „Parent Themes“ beispielsweise nicht möglich, die Textfarbe oder Zeilenabstände zu ändern, kannst du die Farbe für den Text oder die Abstände manuell per CSS anpassen.

Etliche Anleitungen zu solcherlei Anpassungen findest du u.a. auf der Website Self HTML.

Tipp 1: Du kannst natürlich neben der style.css und der function.php auch weitere Dateien ändern, beispielsweise die footer.php oder header.php. Dazu musst die diese Dateien in deinen Child Theme-Ordner kopieren und kannst dann deine Änderungen vornehmen.

Tipp 2: Sollten nach der Aktivierung Fehler auf der Website auftauchen oder gar die ganze Website nicht mehr korrekt laden, kannst du jederzeit leicht zum Parent-Theme wechseln. Aktiviere einfach das Haupttheme – und schon ist wieder alles beim alten. Sollte deine ganze Website nicht laden, lösche einfach den Childtheme-Ordner. In diesem Fall lädt WordPress das aktuelle WP-Standardtheme (solltest du dieses nicht installiert haben, kannst du den Ordner von WordPress.org herunterladen und per FTP auf deinen Server laden).

Na denn, frohes Anpassen!

Bietet mein Theme ein vorgefertigtes Child-Theme?

Nein, die meisten Themes bieten kein vorgefertigtes Child-Theme. Nutzt du allerdings unsere Themes von Designers Inn, so wird jedes Theme bereits mit einem fertigen Setup ausgeliefert. Moderne Premium Themes bieten zudem oft einen separaten Bereich in den Theme-Optionen, um kleine individuelle Anpassungen im Code vornehmen zu können. Diese Anpassungen werden dann vom Theme in einen automatisch erstellten Child Theme Ordner kopiert.

Ist das Child-Theme überhaupt aktiviert?

Wenn du die vorgenommenen Änderungen nicht sehen kannst, solltest du als Erstes überprüfen, ob das Child-Theme überhaupt aktiviert ist. Gehe dazu zum Dashboard und dann zu deiner Theme-Übersicht unter Design > Themes. Wenn dein Child Theme auf „Aktiviert“ gesetzt ist, ist dies aktiv und du solltest deine Änderungen sehen. Ist das Elterntheme aktiv, werden deine Änderungen nicht berücksichtigt.