Child Theme erstellen in 5 einfachen Schritten

Child Theme erstellen Titelbild
Ein Child Theme zu erstellen, sollte einer der ersten Schritte bei der Erstellung deiner Website sein. Warum? Viele Webseitenbetreiber haben sich schon gewundert, wo nach einem Theme-Update ihre zuvor gemachten Anpassungen verblieben sind. Denn jede Änderung, die du an deinem Theme vornimmst, z.B. CSS-Änderungen im Stylesheet, werden nach einem Update des Themes überschrieben.  Damit dir nicht das Selbe passiert, erstelle dir ein Child-Theme und nimm alle Anpassungen dort vor. Wie du das am besten machst, erfährst du in diesem Artikel!

Child Themes – die Bezeichnung kommt nicht von irgendwoher. In WordPress existieren einerseits Parent und andererseits eben jene Child Themes. Letztere „erben“ die Eigenschaften der übergeordneten Parent Themes, was zum Beispiel Ocean WP, Avada oder Divi sein könnten. Während du das Parent Theme lediglich herunterlädst, installierst und dann auf deiner Seite aufsetzt, musst du das Child Theme erstellen – und zwar manuell, was aber ganz einfach ist. Im Anschluss kannst du es nach Belieben für deine Seite oder einzelne Unterseiten aktivieren.

Ein Child Theme zu erstellen bringt dir viele Vorteile. Die Child Themes übernehmen immer die Eigenschaften ihrer übergeordneten Parent Themes, agieren fortan aber unabhängig von diesen. Dadurch musst du nach Updates des Parent Themes nicht fürchten, dass selbiges deine WordPress-Seite zerschießt. Hier erfährst du, wie einfach die Erstellung in der Praxis ist, auch ohne weiterführendes Coding-Know-how.

Von diesen Vorteilen profitierst du, wenn du fortan ein Child Theme verwendest

Nach der Erstellung des Child Themes erwarten dich viele Vorzüge, von denen du auch langfristig profitierst. Vorweg ist zu sagen, dass viele Premium Themes für WordPress heutzutage ausgesprochen vielseitig sind und durchaus zahlreiche Einstellungen erlauben. Dennoch werden sie „ab Werk“ selten in vollem Umfang den eigenen Anforderungen gerecht. Es liegt nun an dir, diese Themes manuell anzupassen, was beispielsweise direkt über das CSS im Stylesheet gelingt. In der Theorie helfen dir Plugins weiter, wenn dir die nötigen Coding-Erfahrungen fehlen. Es ist jedoch eleganter, stattdessen ein Child Theme zu erstellen, da du deine WordPress-Seite so weniger externen Plugins aussetzt, was sich positiv auf deren Sicherheit und mitunter sogar auf die Ladezeiten auswirkt.

Für die Anpassungen hast du, wenn du auf Plugins verzichtest, zwei Möglichkeiten:

– Eine Anpassung direkt im Parent Theme
– Oder Änderungen, die anschließend in einem Child Theme gespeichert werden

Der Vorteil der zweiten Variante erschließt sich dir vielleicht nicht sofort, er wird mitunter aber bereits beim nächsten Update deines Parent Themes ersichtlich. Vollziehst du Änderungen direkt in diesem, könnte ein künftiges Update dazu führen, dass sie entweder verworfen werden oder die Seite nicht mehr gut aussieht. Im schlimmsten Fall erhältst du bei jedem neuen Update eine offene Baustelle auf deiner Webseite, was dich viel Zeit und Nerven kostet.

Eleganter ist daher, Änderungen im Child Theme zu speichern. Dein neu erstelltes Child Theme befindet sich quasi auf einer parallelen Ebene, von dem Parent Theme losgelöst. Damit ist sichergestellt, dass du zwar in die Vorzüge von diesem kommst, aber bei einem Update keine Änderungen am verwendeten Child Theme vollzogen werden. Langfristig reduziert sich für dich dadurch maßgeblich der Zeitaufwand, außerdem bleibst du nach Updates auf das Parent Theme von unliebsamen Überraschungen verschont.

Child Theme erstellen – Schritt für Schritt zum eigenen Theme in WordPress

Vorweg: Weder die Erstellung noch die Änderungen erfordern weiterführende Coding-Kenntnisse. Child Themes gelten daher zugleich als super Möglichkeit, um sich ein wenig in WordPress auszuprobieren und neue Erfahrungen zu sammeln. Ist eine Änderung misslungen, kannst du diese einfach rückgängig machen, da du ja weiterhin das Parent Theme als Basis hast. 

1. Erstelle einen neuen Ordner für das Child Theme

Zuerst musst du einen separaten, neuen Ordner erstellen, der den Namen deines Child Themes trägt. Der Name ist beliebig, er sollte aber so gewählt werden, dass du es später schnell wiederfindest und idealerweise auch noch weißt, welches Parent Theme selbiges als Vorbild hat.

2. Erstelle die style.css für dein Child Theme

Als Beispiel nehme ich das Twenty Twenty Theme von WordPress.

Nun erstellst du eine „style.css“ Datei. Ganz oben schreibst du einen Kommentar mit folgendem Inhalt:

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child
 Author:       WordPress
 Author URI:   https://de.wordpress.org/themes/twentytwenty/
 Template:     twentytwenty
 Version:      1.0
 Text Domain:  twenty-twenty-child
*/

Wichtig: Unter „Template “ muss der exakte Ordnername deines Parent Themes stehen. 

3. functions.php erstellen

Im Anschluss musst du eine „functions.php“ Datei erstellen, die du mit diesem Code füllst:

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

4. Cover-Bild deines Child Themes erstellen

Der vierte Schritt ist optional, hilft dir aber künftig, dein Theme schnell und einfach zu identifizieren. Du kannst eine Screenshot-Datei (screenshot.png) erstellen, die fortan als das Vorschaubild/Thumbnail für das Child Theme agiert. Wichtig ist, dass die png-Datei die Größe 1200 x 800 Pixel hat und das du sie in dem gleichen Ordner ablegst, wie die anderen Dateien. Welches Vorschaubild du festlegst, ist natürlich komplett dir überlassen. Möchtest du kein Bild erstellen, kannst du den Schritt einfach weglassen. Auf dein Theme hat das keinen Einfluss, es wird dann halt nur keine Vorschau im Backend angezeigt. Was steht nun an?

child theme screenshot

5. Upload deines Child Themes

Nun erstellst du ein gepacktes Zip-Archiv mit all den eben angelegten Dateien. Diese .Zip lädst du dann via FTP auf deinen Server hoch. Und zwar unter: „wp-content/themes“.

Jetzt musst du es nur noch unter Design > Themes aktivieren.  Fertig ist das eigene Child Theme, das du fortan als Grundlage für deine WordPress-Seite verwenden kannst, ohne Änderungen am Parent Theme fürchten zu müssen.
Spätere Anpassungen kannst du einfach über die jeweiligen Dateien vollziehen. Nach den durchgeführten Änderungen solltest du natürlich nicht vergessen, die aktualisierten Dateien in den Child Theme Ordner abzulegen. 

Template-Files anpassen

Eventuell möchtest du auch Änderungen an der footer.php, single-, page.php, oder sonstigen Template-Files vornehmen. Dafür kopierst du dir die entsprechende Datei einfach in deinen Child Theme Ordner und passt die Datei nach deinen Wünschen an. 

CSS Anpassungen über Customizer

In einigen Fällen kannst du dir Erstellung eines Child Themes auch sparen und statt dessen  deine CSS-Änderungen im Customizer vornehmen.  WordPress bietet dir nämlich seit dem Update auf WordPress 4.7 diese Möglichkeit. Diese Einstellung heißt „Zusätzliches CSS“ und wird ganz unten im Customizer aufgeführt. Änderungen, die du hier durchführst, werden sofort auf deiner Seite sichtbar. Für funktionale Änderungen bietet sich zum Beispiel das Plugin My Custom Functions an.  

Child Theme durch Verwendung eines Plugins erstellen

Bei WordPress gibt es eigentlich für jeden Zweck ein passendes Plugin. So auch für die Erstellung eines Child Themes. Eines davon, welches diese Funktionalität bietet nennt sich Child Theme Configurator. Ich selbst habe dieses Plugin noch nie verwendet, da ich es immer manuell mache und das für mich am schnellsten und einfachsten geht.  Dennoch gibt es sicher viele Leute, die lieber zu einem Plugin greifen, weshalb ich es wenigstens erwähnt haben wollte. 

Fazit

Ein Child Theme erstellen ist keine Herkulesaufgabe. Einmal angelegt, profitierst du langfristig davon, denn nun kannst du dir immer sicher sein, dass deine WordPress-Seite das individuelle Theme verwendet, selbst wenn der Hersteller des Premium-Themes sein eigenes anpasst, grundlegend neu ausrichtet oder selbiges nicht mehr öffentlich ist.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.