Child Theme erstellen in WordPress – so funktioniert´s

WordPress bietet eine einfache und leicht zu handhabende Möglichkeit für die Gestaltung und Programmierung von Webseiten. Auch findet man hier zahlreiche Themes, die auch selbst und relativ schnell angepasst werden können.

Doch gibt es hierbei ein Problem: wird das ausgewählte Theme geupdatet, so gehen alle selbst erstellten Änderungen verloren. Besser Du erstellst daher ein eigenes Child Theme und nutzt dieses. Was das ist und wie Du ein Child Theme erstellst, zeige ich Dir im Folgenden.

Was ist ein Child Theme?

Ein Child Theme in WordPress ist ein Theme, welches auf einem bereits bestehenden Theme, dem „Parent Theme“ basiert. Allerdings kann es entsprechend individuell angepasst werden oder erweiternde Funktionen erhalten, in dem die Einstellungen des originalen Themes überschrieben werden. Das bietet nicht nur die Möglichkeit kleinere Änderungen des Designs vorzunehmen, sondern auch ganze Templates zu ändern.

Vor- und Nachteile eines Child Themes

Um einschätzen zu können, ob sich die Nutzung von Child Themes für Dich lohnt, habe ich im Folgenden die Vor- und Nachteile zusammengefasst:

Vorteile:

  • Die vorgenommenen Änderungen im Child Theme bleiben auch bei Updates des Parent Themes erhalten.
  • Die Entwicklungszeit der Webseite kann mit Child Themes beschleunigt werden.
  • Das Child Theme bietet Platz zum Ausprobieren. Werden ungewollte Änderungen vorgenommen, die nicht mehr rückgängig gemacht werden können, so kannst Du einfach wieder auf das ursprüngliche Parent Theme zurückgreifen.
  • CSS wird nicht durch den Customizer in der Datenbank gespeichert, sondern in einer Datei. Dies reduziert die Fehlersuche und Ladezeit Deiner Seite.

Nachteile:

  • Die Performance der Webseite kann leiden, da zwei Stylesheets geladen werden müssen (die des Parent und die des Childs).
  • Bestehen im Parent Theme Sicherheitslücken, die durch ein Update geschlossen werden, so bleiben diese im Child Theme bestehen und müssen händisch geändert werden. Vorausgesetzt Du hast die betreffenden Dateien auch wirklich im Child Theme. Hier empfiehlt sich das Durchlesen des ChangeLogs bei Themeupdate.

Wie Du ein WordPress Child Theme anlegst

Um ein Child Theme für WordPress anzulegen hast Du grundsätzlich drei Möglichkeiten:

  1. Anlegen des Child Themes per Hand
  2. Anlegen des Child Themes per Plugin
  3. Suchen, ob der Theme-Hersteller ein eigenes Child Theme liefert.

Anlegen eines Child Themes per Hand

Um ein Child Theme händisch anzulegen, befolgst Du die nachstehend aufgelisteten Schritte:

Anlegen eines Child Themes per Hand – Video Erklärung

Schritt 1: Anlegen eines Ordners für Dein neues Child Theme

Damit Dein Child Theme später auch auf Deiner Webseite geladen werden kann, musst Du Dich zuerst mit Deinem Server per FTP verbinden. Das geht am einfachsten mit einem entsprechenden Programm, wie beispielsweise FileZilla.

Um die Verbindung herzustellen, benötigst Du:

  • Deinen FTP Username
  • Dein FTP Passwort
  • Den Namen deines Servers
ftp child theme
Ordnerstruktur FTP

Diese Angaben erhältst Du von Deinem Provider. Bist Du mit dem Server verbunden, öffnest Du den Ordner, in dem Deine WordPress-Installation gespeichert ist. Hier suchst Du in /wp-content/ nach dem Ordner „Themes“ und legst in diesem einen neuen Ordner für Dein Child Theme an.

Falls Dir dies zu kompliziert ist, kannst Du die unterhalb angegebenen 2 Dateien auch lokal auf Deinem Rechner erstellen, verzippen und dann über Design -> Themes -> Theme hinzufügen hochladen.

Schritt 2: Anlegen einer Style-Datei für das Child Theme

Ist der Ordner für Dein neues Child Theme angelegt, so legst Du anschließend in diesem eine style.css Datei an. Diese sollte mindestens folgenden Inhalt haben:

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       Lightweb-Media
 Author URI:   https://lightweb-media.de
 Template:     twentytwenty
 Version:      1.0
 Text Domain:  twenty-twenty-child
*/

In der angelegten Style-Datei kannst Du alle Änderungen am Design vornehmen, die Du Dir für dein Child Theme wünschst.

Schritt 3: Erstellen einer Functions-Datei

Neben der Style-Datei benötigt Dein Child Theme nun noch eine Functions-Datei. Diese functions.php legst Du ebenfalls in dem erstellten Ordner an. Wichtig ist, dass in dieser festgelegt wird, dass zuerst das originale Stylesheet des Parent Themes geladen wird und erst im Anschluss das des Child Themes:

<?php
/**
* Child Theme Stylesheet einbinden in Abhängigkeit vom Original-Stylesheet
*/

function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));

}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>

Schritt 4: Aktivieren des Child Themes

Sind alle benötigten Dateien in dem für das Child Theme angelegten Ordner erstellt, musst Du das Theme noch in WordPress aktivieren. Das funktioniert genauso, wie bei allen anderen WordPress Themes.

Du gehst dazu unter „Design“ auf die Schaltfläche „Themes“ und findest dort dein Child Theme zum Aktivieren.

Schritt 5: Übernehmen bestehender Anpassungen aus dem Parent Theme

Hast Du bereits Änderungen im Parent Theme vorgenommen, so kannst Du auch diese in das Child Theme übernehmen. Hierfür eignet sich das Customizer Export/Import Tool sehr gut.

customizer import export
Customizer Export/Import Plugin

Die Export- und Importfunktion findest Du im Customizer. Nach der Installation des Plugins exportierst Du als Erstes die Änderungen des Parent Themes. Anschließend können diese Daten in das Child Theme importiert werden.

Anlegen eines Child Themes per Plugin

Wenn Dir die händische Erstellung eines Child Themes zu aufwendig erscheint, so kannst Du dafür auch eines der entsprechenden Plugins nutzen. Eines der beliebtesten Plugins ist hier zum Beispiel der Child Theme Configurator von Lilaea Media.

child theme generator
Child Theme WordPress Plugin

Insbesondere für Anfänger in der Webseitenerstellung ist die Plugin-Variante für die Erstellung eines Child Themes wahrscheinlich einfacher zu handhaben.

Schritte:

  • In der deutschen Sprachversion heißt der Menüpunkt „Kindthemen“ unter dem Menüpunkt Werkzeuge.
  • Der Konfigurator ist bereits im richtigen Menü und führt euch Schritt für Schritt durch die Erstellung.
  • Für die erstmalige Erstellung wählst Du „Neues Childtheme ERSTELLEN“
  • Danach wählst du welches Elterntheme du nutzen möchtest, in diesem Beispiel Twenty Twenty.
  • Nächstes ist die Auswahl vom Namen des Child. Ich würde es immer auf Default lassen.
Child Theme generator oben
  • In den nächsten Schritten würde ich bei der Ersterstellung alle Felder auf Standard lassen und nur Nummer 8 mit einem Haken versetzen.
Child Theme Configurator unten

Zum Abschluss drücke „Create News Child Theme“. Das Child Theme ist jetzt unter Design – Themes zu finden. Prüfe mit der Vorschau, ob alle Inhalte ordentlich dargestellt werden, ansonsten probiere den o.g. Customizer Export/Importer.

Hier noch ein kurzes Video mit allen Schritten zum Erstellen eines Child Themes mit einem WordPress Plugin.

Child Theme erstellen mit dem Child Theme Configurator Plugin

Das Child Theme nach eigenen Wünschen anpassen

Ganz gleich, welche Änderung Du in Deinem Child Theme vornehmen möchtest, Du kannst diese ganz einfach über das Plugin, bzw. in der Style-Datei anpassen. Dazu gehören beispielsweise:

  • Ändern des Post-Titles
  • Ersetzen der Schriftart
  • Änderungen des Hintergrunds
  • Verkleinerung oder Vergrößerung der Sidebar

Beispiel Änderung des Post-Titles

h2 {
	font-family: 'Roboto Slab', sans-serif;
	font-weight:700;
}

h2.entry-title {
	text-align:center;
}

h2.entry-title:after {
    background-color: #D24F21;
    width: 100px;
    height: 2px;
    margin: 15px auto 0px;
    content: "";
    display: block;
}

Beispiel Änderung des Artikel-Hintergrundes

.hentry {
	background: #e1f5fe;
} 

.entry-footer {
	background: #01579b;
	color: #fff;
} 

.entry-footer a {
	color: #fff;
} 

.entry-footer a:hover {
	color: #ff9800;
}

Beispiel Anpassung der Sidebar-Breite

@media screen and (min-width: 59.6875em) {
	body:before {    
		max-width: 380px;
	}
	#sidebar { 
		left: 0;
		max-width: 380px;
	}
	#page {
		margin-left: 0px;
	}
}

Beispiel Anpassung der Schriftart

Möchtest Du eine neue Schriftart benutzen, die nicht die Standardschriftart des gewählten Parent Themes ist, so musst Du diese über die Functions-Datei zunächst einbinden:

function load_google_fonts() {
	wp_register_style('googleFonts', 'https://fonts.googleapis.com/css?family=Roboto+Slab:700');
	wp_enqueue_style( 'googleFonts');
}
add_action('wp_print_styles', 'load_google_fonts');

Anpassungen an Template Files vornehmen

Möchtest Du einzelne Templates anpassen, wie beispielsweise Footer.php, Page.php oder andere, so ist auch das möglich. Dazu kopierst Du die anzupassende Datei aus dem Ordner des Parent Themes in den von Dir erstellten Ordner des Child Themes. Anschließend kannst Du in den entsprechenden Dateien die gewünschten Änderungen vornehmen.

Änderung des Parent Themes nachvollziehen

Wenn man mit Child-Themes arbeitet, muss man das Parent-Theme immer ein bisschen im Auge behalten. Im Zweifelsfall mit einem Diff Tool die Template-Dateien miteinander vergleichen (www.diffchecker.com).

Mit dem Plugin Child Theme Check kann man sich gegen solche Fälle absichern. Das Plugin guckt nach, ob im Childtheme Ordner veraltete Template-Dateien liegen und gibt eine Warnung aus. Dazu muss das Parent-Theme aber eine Versionierung unterstützen. Man findet dann so etwas im Header der PHP-Templates z.b. @version 1.4.2

Fazit zu WordPress Child Themes

Ein WordPress Child Theme zu erstellen ist einfacher, als Du vielleicht gedacht hast. Es bietet Dir außerdem vielerlei Möglichkeiten. Zum Beispiel kannst Du ganz einfach und unbeschwert neue Designs in dem Theme ausprobieren, ohne Gefahr zu laufen, dass die Änderungen nicht mehr rückgängig gemacht werden können.

Geht beim Ausprobieren mal etwas daneben, kannst Du im Zweifelsfall immer noch auf das ursprüngliche Parent Theme zurückgreifen. Auch bei Updates des Parent Themes bleiben Deine individuellen Änderungen bestehen.

Ein Auge solltest Du dabei immer darauf haben, wenn sicherheitsrelevante Updates vorgenommen werden. Diese musst Du dann manuell in Dein Child Theme übertragen. Insgesamt kannst Du Dich mit einem Child Theme aber nach Herzenslust austoben und so Deine Webseite ganz individuell gestalten.

FAQ

  • Bleiben meine Änderungen bei dem Parent Theme Update erhalten?

    Ja, bleiben Sie.

  • Wozu brauche ich ein Child Theme?

    Damit dein CSS nicht in der Datenbank liegt und Du bei Änderungen an den PHP Files diese nicht bei Update des Parent Themes verlierst.
    Child Theme ist immer empfehlenswert, sobald man am Theme, ungewöhnliche Änderungen machen möchte.

  • Würde eine eigene functions.php in meinem Child Theme zusätzlich zu der im Haupt Theme berücksichtigt werden?

    Ja.

Du brauchst Hilfe bei der Erstellung eines Child Themes für WordPress? Dann schreib mir gerne eine Nachricht!

Immer Informiert bleiben..

Trage hier Deine E-Mail Adresse ein, um unseren Newsletter mit den wichtigsten Neuigkeiten, Tools und Tipps zu erhalten:

Vielen Dank für die Eintragung

Irgendwas lief schief..

Hinterlasse eine Anmerkung