fbpx

Was ist ein Child-Theme und wie erstelle ich mein eigenes?

Jeder, der schon einmal eine Webseite mit WordPress erstellt hat, kennt es: die Suche nach dem perfekten Theme dauert. Oftmals sitzt man Stunden bzw. Tage vor dem Rechner und durchforstet sämtliche Theme-Anbieter. Hat man dann endlich „DAS“ Theme gefunden, stellt sich dennoch regelmäßig heraus, dass ein bisschen etwas im CSS angepasst werden muss. Auch die eine oder andere Theme-Datei bleibt meistens nicht verschont, denn kleine Änderungen sind fast immer nötig, um das Theme den eigenen Wünschen entsprechend anzupassen. Nachdem alles eingerichtet und die individuellen Änderungswünsche eingepflegt sind, geht es also los und man bloggt munter vor sich hin.

Wenn du ein Theme möchtest, das alle anderen Themes alt aussehen lässt und super easy in der Nutzung und Anpassung ist, schau hier vorbei. 

Eines Tages steht die erste Aktualisierung des Themes an und da man sich vor Sicherheitslücken schützen möchte und auch alle Plugins zur neuen Theme-Version passen, wird diese nichts ahnend durchgeführt. Und dann passiert es: nach erfolgreicher Aktualisierung sind auf einmal alle händisch gemachten Änderungen im CSS und anderen Dateien verschwunden!


Dies geschieht deshalb, da bei einem Update des Themes das gesamte Verzeichnis gelöscht wird und mit dem Inhalt des Aktualisierungs-Paketes gefült wird. Nur logisch, dass dabei die gemachten Änderungen verloren gehen.

 

Child-Themes behalten gemachte Änderungen im Code – auch nach Aktualisierung

Aber keine Grund zur Panik, es gibt eine relativ einfache Lösung, denn WordPress bietet die Möglichkeit der Verwendung von Child-Themes. Aber was ist ein Child-Theme? Ganz einfach: Ein Child-Theme ist ein Theme, das sämtliche Funktionen und Einstellungen eines anderen Themes (dem Eltern-Theme) erbt. Auf diese Weise erreicht man die Trennung des eigentlichen Themes und seinen individuellen Änderungen in verschiedenen Code-Dateien. Wird das Eltern-Theme nun aktualisiert, bleiben die Änderungen dennoch bestehen.

 

Schritt für Schritt-Anleitung zum eigenen Child-Theme

 

Am Beispiel des WordPress-Standard-Themes Tewnty Fifteen möchten wir Schritt für Schritt zeigen, wie man sein eigenes Child-Theme erstellt.

Wir legen also nun ein Child-Theme an, das von Tewnty Fifteen abstammt. Hierzu gehen wir zunächst auf den Ordner Themes (z.B. über FTP). Die Themes liegen in der Regel unterhalb des Ordners wp-content im Ordner themes.

Unser Child-Theme soll twentyfifteen-child heißen, daher legen wir im theme-Ordner einen neuen Unterordner an, den wir twentyfifteen-child nennen.

In diesen neuen Unterordner wird nun eine Datei „style.css“ angelegt. Nun muss folgender Inhalt in style.css eingefügt werden:

/*
Theme Name: Twenty Fifteen Child
Theme URI: https://meine-theme-url.de/
Description: Child-Theme von "Twenty Fifteen" zur Childtheme Demo.
Author: Name des Autors
Author URI: URL des Autors
Template: tewntyfifteen
Version: 0.1
*/
@charset "UTF-8";
@import url("../tewntyfifteen/style.css"
);

Die einzelnen Zeilen bedeuten dabei Folgendes:

Theme Name: Der Name des Child-Themes (diese Angabe ist zwingend nötig)

Theme URI: Die Webseite des Themes (diese Angabe ist optional)
Description: Eine kurze Beschreibung, die auf der Theme Übersichtsseite im WordPress Backend mit ausgegeben wird. (diese Angabe ist optional)
Author: Der Name des Autors des Themes. Fairerweise sollte man den Autor des Originalthems mit erwähnen. (diese Angabe ist optional)
Template: Name des Verzeichnisses des Originalthemes unterhalb von /wp-content/themes (diese Angabe ist nötig)
Version: Angabe einer Versionsnummer des Child-Themes (diese Angabe ist optional)

Durch die Angabe „@import“ wird das CSS des Originalthemes geladen.

Wenn alles richtig eingefügt wurde, steht nun ein neues Theme zur Auswahl im WordPress-Backend.

Das neue Theme (Child-Theme) hat noch keine Grafik in der Themeübersicht. Dies können wir lösen, indem wir entweder die Datei screenshot.php aus dem Eltern-Theme in das neue Unterverzeichnis kopieren oder wir legen eine neue Datei an (z.B. mit einem Screenshot der Webseite).

Nun aktivieren wir das neue Theme. Die Seite sollte nun genauso aussehen, wie vorher (mit dem Eltern-Theme). Nun müssen wir noch das CSS in das Child-Theme laden. Dies geschieht über die Anweisung „@import“. Anschließend können wir nun das CSS des Eltern-Themes überschreiben. Zum Beispiel ändern wir style.css des Child-Themes wie folgt, um die Hintergrundfarbe zu ändern:

Nach Aktivierung des neuen Themes sollte die Seite genauso aussehen wie vorher.
Mit der @import Anweisung wird das original CSS geladen,  danach können wir dann das CSS des Parentthemes überschreiben. Um z.B. die Hintergrundfarbe zu ändern, ändern wir die style.css wie folgt:

/*

Theme Name: Twenty Fifteen Child
Theme URI: https: //meine-theme-url.de/
Description: Child-Theme von "Twenty Fifteen" zur Childtheme Demo.
Author: Name des Autors
Author URI: URL des Autors
Template: tewntyfifteen
Version: 0.1
*/
@charset "UTF-8";
@import url("../tewntyfifteen/style.css");
body {
background-color: #000000;
}

Auf diese Weise können sämtliche Änderungen an der CSS-Datei oder anderen Dateien gemacht werden. Zum Beispiel können auch ganze Template-Dateien umgeschrieben werden. Hierzu kopieren wir beispielsweise die Datei page.php und fügen Sie in den Ordern twentyfifteen-child ein. Sobald sich im Order des Haupt-Themes und im Ordner des Child-Themes die gleiche Datei findet, merkt dies WordPress und verwendet automatisch die Datei aus dem Child-Theme-Ordner.

Die Datei functions.php ist eine Besonderheit bei Child-Themes

Bei der Datei functions.php gilt etwas anderes als bei den oben beschriebenen Dateien. Zunächst werden beide Dateien geladen: zuerst die aus dem Child-Theme und dann die aus dem Eltern-Theme. Ist das Eltern-Theme entsprechend vorbereitet, dann kann man auch einzelne PHP-Funktionen überschreiben. Überschreibbare Funktionen erkennt man daran, dass diese in der functions.php im Eltern-Theme mit (! function_exists (“Funktionsname“)) gekapselt sind.

Ein Beispiel zur Veranschaulichung:

if ( ! function_exists( 'twentyfifteen_content_nav' ) ) :

/**

* Displays navigation to next/previous pages when applicable.

*

* @since Twenty Fifteen 1.0

*/

function twentyfifteen_content_nav( $html_id ) {

global $wp_query;

$html_id = esc_attr( $html_id );

if ( $wp_query->max_num_pages > 1 ) : ?>

< ?php _e( 'Post navigation', 'twentyfifteen' ); ?>

< ?php next_posts_link( __( '← Older posts', 'tewntyfifteen' ) ); ?>
< ?php previous_posts_link( __( 'Newer posts →', 'tewntyfifteen' ) ); ?>
< ?php endif;

}

endif;

Was bewirkt das? Die Funktion twentyfifteen_content_nav wird nur registriert, wenn sie noch nicht existiert. Wenn aber in der functions.php des Child-Themes (, welche ja vor der functions.php des Eltern-Themes geladen wird) diese Funktion definiert wird, dann wird diese aus dem Child-Theme verwendet.

Fazit:

  • Wer Änderungen im Code eines WordPress-Themes durchführen möchte, sollte dies nur am Child-Theme machen, andernfalls gehen gemachte Änderungen bei Aktualisierungen verloren
  • Oftmals (für kleine Änderungen) reicht es aus, nur die style.css in den Unterordner des Child-Themes  zu kopieren.
  • Template-Dateien des Child-Themes überschreiben die Dateien Eltern-Themes (sie bleiben also auch bei Aktualisierungen erhalten)
  • Die Datei functions.php werden beide geladen – zuerst die des Child-Themes und anschließend die des Eltern-Themes

Möchtest du mehrere verschiedene Themes auf einer WordPress-Website nutzen? Hier liest du, wie das funktioniert. 

Gratis Video-Training

Wie du glücklich & gebucht wirst als Webdesigner, Texter & Co.

Jasmin Di Pardo

Seit 2013 unterstütze ich Selbstständige und kleinere Unternehmen mit B2B-Dienstleistung dabei, mit 0€ Werbebudget kaufbereite Kunden anzuziehen. Aus den Erfahrungen mit über 150 Kunden ist das weltweit einzigartige R.O.C.K.I.T®-Prinzip entstanden, das Verkaufspsychologie-Marketing, Business Storytelling und Conversion-Webdesign kombiniert, um Interessenten unaufdringlich zu überzeugen.

Andere interessiert auch…

Ultimativer Leitfaden für SEO auf WordPress-Websites

Ultimativer Leitfaden für SEO auf WordPress-Websites

Bist du auf der Suche nach Möglichkeiten, das Ranking deiner Website in den Suchmaschinenergebnissen zu verbessern? Suchmaschinenoptimierung (SEO) ist der Prozess, bei dem du deine Website optimierst, damit sie in den organischen Suchmaschinenergebnissen höher...

Divi Theme – Alle Vorteile und Funktionen

Jetzt 20% Rabatt sichern! Das Divi-Theme ist das beliebteste und weltweit meist genutzte Theme. Wir zeigen dir die Vorteile und Funktionen, die dieses WordPress Premium Theme vereint. Um es vorweg zu nehmen: Divi ist mehr als nur ein Theme. Es erlaubt Anfängern und Experten, Ihre Kreativität voll auszuleben, ist SEO-optimiert und bringt zahlreiche Module mit. Sichere dir jetzt 20% Rabatt auf das Divi-Theme (Link dazu in unserem Artikel)!

Kommentare

0 Kommentare

Einen Kommentar abschicken

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