Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

Wie du „kinderleicht“ dein erstes Child-Theme für WordPress erstellst

Seit der Version 3.0 von WordPress werden sie sogenannten Child-Themes unterstützt. Leider wird diese Funktion – nach meinem empfinden – noch viel zu  selten genutzt.

Es gibt eine vielzahl von freien und auch kostenpflichtigen Themes auf dem Markt. Nicht selten muss an so einem Theme nochmal manuell nachgebessert werden. Doch wie kann man diese Änderungen Update sicher durchführen? Gerade Premium Themes bekommen häufig kleine Updates durch den Autor – sollte ich jetzt in einer Theme-Datei Änderungenen durchgeführt haben, sind diese nach dem Update futsch. Eher unpraktisch – an dieser Stelle kommen Child-Themes zum Einsatz.

Das Prinzip ist realtiv einfach. Das Child-Theme greift auf alle originalen Dateien des Eltern-Themes zurück, sofern diese nicht im eigenen Theme-Ordner vorhanden sind. Sollte ich also Änderungen an der header.php durchführen wollen, lege ich diese einfach in das Child-Theme und ändere diese dann nach meinen Bedürfnissen ab. Sollte nun die originale header.php durch ein Update verändert werden, stört das nicht – da die Datei aus dem Child-Theme priorisiert geladen wird. Eigentlich eine tolle Sache, oder?

Wie erstelle ich ein Child-Theme?

Ich erkläre euch in diesem Abschnitt wie Ihr ein Child-Theme anlegt. Wir erstellen ein Beispiel Child-Theme basierend auf dem bekannten twentytwelve von WordPress und nennen es „MyFirstChildTheme„.

Hinweis: Ihr findet dieses Child-Theme als Download am Ende des Artikels.

1. Erstellt einen neuen Ordner im Theme-Verzeichnis eurer WordPress installation, den Namen könnt ihr frei wählen.

/wp-content/themes/myfirstchildtheme/

2. Erstelle die wichtigste Datei, die style.css mit dem folgenden Inhalt

/**
* Theme Name: MyFirstChildTheme
* Theme URI: http://drwp.de/wie-du-kinderleicht-dein-erstes-child-theme-fuer-wordpress-erstellst/
* Description: Mein erstes Child Theme - eine tolle Sache!
* Author: Christian Lang
* Author URI: http://endcore.com
* Template: twentytwelve
* Version: 0.1
*/

@import url('../twentytwelve/style.css');

Der Header sollte euch von normalen Themes bekannt vorkommen, für ein Child-Theme sind allerdings 2 weitere Zeilen notwendig. Als „Template:“ verwendet Ihr den Namen des Eltern Themes, in diesem Fall natürlich twentytwelve. Anschließend müssen noch alle styles des Eltern Themes geladen werden – dazu müsst Ihr einfach die CSS-Datei des Eltern Themes via import laden. Nutzt dazu bitte als Bezug einen relativen Pfad, die Angabe von „../“ führt euch einen Ordner in der Hierachie zurück.

3. Ihr habt euer erstes Child-Theme erfolgreich erstellt. Jetzt müsst Ihr es nur noch im WordPress Dashboard aktivieren.

theme-aktiv

Die ersten Änderungen durchführen

Euer erstes Child-Theme ist aktiviert, glückwunsch. Nur wie führt man jetzt die ersten Änderungen durch? Zunächst könnt Ihr in der style.css die ersten Styles anpassen. Fügt hierzu einfach beliebige CSS-Styles nach dem import der CSS-Datei des Eltern Themes ein. Diese werden direkt geladen. Hier direkt mal ein Beispiel. Standardmäßig hat das Theme TwentyTwelve einen gräulichen HIntergrund (#E6E6E6). Mit CSS lässt sich dieser in Handumdrehen anpassen. Fügt dazu einfach folgendes in die styles.css:

body{background:#c01313;}

#c01313 ersetzt Ihr einfach mit der gewünschten Farbe. So sieht dann das Ergebnis aus. Jetzt könnt Ihr natürlich viel mehr via CSS anpassen. Kleiner Tipp: Um schnell herauszufinden wo Ihr im CSS eingreifen müsst, um einen gewünschten Wert anzupassen, nutzt das Plugin (bevorzugt für Firefox) Firebug. Eine ausführliche Anleitung findet Ihr auf der Seite.

blog-nachher-final

Reine CSS-Anpassungen reichen vielleicht für den einen oder anderen schon aus. Doch wie führt man Änderungen an Theme-Dateien wie der header.php durch? Auch das ist ganz einfach.

1. Kopiert die originale header.php des Eltern Themes in euer Child-Theme.

2. Führt in der header.php in eurerem Child-Theme (/wp-content/themes/myfirstchildtheme/header.php) alle gewünschten Änderungen durch.

Bei der header.php also ein leichtes Spiel – doch wie sieht es aus, wenn Dateien im Eltern-Theme in Unterordner verschachtelt sind? Hier müsst Ihr nur beachten, das Ihr die Ordnerstruktur in eurem Child-Theme ebenfalls darstellt. Als Beispiel:

Original TwentyTwelve Struktur:

/wp-content/themes/twentytwelve/page-templates/front-page.php

Notwendige Struktur im Child-Theme:

/wp-content/themes/myfirstchildtheme/page-templates/front-page.php

Solltet Ihr die Ordnerstruktur nicht berücksichtigen, so wird die Datei durch das Child-Theme nicht geladen, also hier bitte immer auf die Struktur achten.

Das Theme Child-Themes kann man noch wesentlich tiefgründiger ausbreiten, doch ich denke für einen ersten Eindruck und kleinere Anpassungen sollten euch diese Infos bereits reichen. Hier findet Ihr das Childtheme, welches wir hier im Tutorial erstellt haben. Ihr könnt dieses einfach hochladen und entsprechend Anpassen.

Für weitere Fragen stehe ich euch gerne in den Kommentaren oder via Kontaktformular jederzeit zur Verfügung.


Update / Hinweis:

1. Bei großen umfangreichen Themes, sollte dringend die Dokumentation gelesen werden, ob es Hinweise zur Nutzung von Childthemes gibt, sodass es später nicht zu Problemen mit bestimmten Funktionen o.Ä. kommt.

2. Da ein Childtheme für WordPress in erster Linie ein neues Theme ist kann es sein, dass gewisse Einstellungen nicht mehr vorhanden sind. Diese müssen nach der Umstellung unbedingt überprüft werden. Am besten legt mein ein Childtheme schon fest, bevor man an seiner Seite rumbaut.

3. Zudem sollte vor dem Anlegen eines Childthemes dringend ein Backup gemacht werden!

Weitere Informationen findest du zudem in einer Diskussionsthread in unserer Facebook Gruppe.

Über Christian

Die Webentwicklung ist seit 2006 ein großer Teil meines Lebens und seit 2010 kann ich damit auch meine Brötchen verdienen. Ich beschäftige mich speziell mit WordPress und entwickle auch eigene Themes. Die Anpassungsfähigkeit von Wordpress begeistert mich immer wieder, daher möchte ich euch interessante Snippets und Plugins nicht vorenthalten.

WordPress Affiliate ThemeAnzeige

8 Kommentare

Avatar von Julian

Julian 13. November 2013 um 19:50

Sehr coole Anleitung, vielen Dank. :) Wollte das jetzt gerade testweise für ein Premium Theme anwenden, hat dann aber leider nicht so hingehauen wie ich wollte. Es werden zwar Inhalte der style.css des Child Themes geladen, doch eben nicht von der style.css des eigentlichen Themes. Ich nehme an, man muss das für jede einzelne .css-Datei machen, oder? (in einem Unterverzeichnis befinden sich nämlich 7 weitere)

Habe mir sagen lassen, dass mit @import die Sachen nicht parallel geladen werden, stimmt das? Wenn ja, gibt es dann eine Lösung das für viele .css-Dateien eleganter zu lösen?

Viele Grüße,
Julian

Antworten
Avatar von Christian Lang

Christian Lang 14. November 2013 um 8:02

Hallo Julian,

die @import-Funktion funktioniert auch über Child-Themes. Ich habe es gerade nochmal selber getestet, es gab auch dabei keine Probleme. Du musst nur die Haupt-CSS Datei (style.css) in deinem Child-Theme importieren.

Viele Grüße
Christian

Antworten
Avatar von Juergen

Juergen 24. Juni 2014 um 10:23

Hallo Christian,
danke erst einmal für die Anleitung. Ich bin absoluter Neuling und habe folgende Fragen dazu:
Ich habe schon einen Blog (Twenty Twelve) und alles läuft ok. Habe den Blog auch etwas im Stil verändert. Lohnt sich ein Childthema dann? Ich denke natürlich schon, aber geht das auch schon mit einem verändertem, bestehenden Eltern-Blog? Muss ich dann alles dort ins Child reinkopieren? Es gibt ein Update des Themas, und ich habe Befürchtung, dass ich dann nach dem Update alles an den Einstellungen verliere. Mit einem Childthema wäre das dann nicht der Fall? Und was muss ich in das childthema laden, um ein Update zu machen und alles, wirklich alles im Blog ok läuft. ist das Update dann bezogen auf Eltern oder/Und Child? Wenn alles schief laufen sollte, was dann? Ich bin bei Strato, und dort wird alles 2-3 mal am Tag gespeichert als Backup. D.h. Ich kann es wieder zurückspielen. Ist dann das Childthema auch drin?
Es sind jetzt einige Fragen, sicherlich ist das für einen Profi alles einfacher. Aber mein Blog war sehr zeitraubend. Trotzdem soll das Thema aktualisiert sein.
Vielen Dank für deine Antwort (bitte verständlich).
Gruss, Jürgen

Antworten
Avatar von Christian Lang

Christian Lang 24. Juni 2014 um 19:29

Hallo Jürgen,

bitte mache unbedingt alle Änderungen im Child-Theme. Bei einem Update ist ansonsten alles verschwunden. Lege einfach nach meiner Anleitung ein Child-Theme an und kopiere einfach alle geänderten Dateien in das Child-Theme aus dem Eltern-Theme. Danach kannst du auch das Eltern-Theme Updaten. Wenn du ganz sicher sein willst, kannst du vorher auch einfach ein Backup vom Eltern-Theme machen, dazu einfach den Ordner auf deine Festplatte kopieren. So bist du auf der sicheren Seite. Alternativ kannst du auch deine ganze Seite Backupen, was vor jedem Update sowieso empfehlenswert ist. Schau dazu mal hier:

http://wpsnippets.de/wordpress-backup-ueber-30-kostenlose-plugins-im-vergleich/

Gruß
Christian

Antworten
Avatar von wildbrett

wildbrett 20. Februar 2015 um 14:47

Wie sieht das eigentlich Rechtlich mit Child-Themes aus? Bei vielen Themes ist ja zumindest auch der Autor im Footer verlinkt. Und auch irgendwo im Quelltext genannt. Was ich ja durchaus ok finde. Ab wie viel Änderung ist ein Theme dann ein eigenes? Wie handhabt ihr das? Schreibt ihr dann Child erstell von XY auf Basis von? Oder wie geht ihr sonst vor?

Antworten
Avatar von Christian

Christian 23. Februar 2015 um 12:01

Das Theme ist nicht dein eigenes, wenn du ein paar Zeilen Code anpasst. Rechtlich gesehen, kommt natürlich darauf an die der Verkäufer das regelt, gehört es nach wie vor dem Ersteller.

Childthemes sind aber so natürlich erlaubt und bieten auch die meisten Verkäufer direkt mit an. Kann aber gut das das man gewisse Hinweise nicht entfernen darf (Footer Copyright usw.).

Im Zweifel immer mal Nachfragen.

Antworten
Avatar von Christian Wächter

Christian Wächter 12. März 2015 um 10:19

Hallo Namensvetter ;-)
Ich habe mal in einem neuen Projekt ein Child angelegt.
Funzt soweit auch. Dummerweise wird nur die Navigation nicht angezeigt.
Eine Idee woran sowas liegen könnte?
Müssen noch weitere Sachen zugeweisen werden?
Gruss Christian

Antworten
Avatar von Christian

Christian 18. März 2015 um 16:31

Huhu Christian,

wenn du ein Childtheme aktivierst, musst du auch die Navigation zuordnung neu setzen. Einfach unter „Design“ => „Menu“ das Menü neu zuordnen. :)

Antworten

Yoast SEO Anleitung – Seo Tools Test 30. Oktober 2015 um 11:57

[…] Denkt bitte daran, dass beim nächsten Update von WordPress diese Einstellung überschreiben werden, für eine dauerhafte Einbindung könnt Ihr ein Child-Theme erstellen, mehr Informationen dazu bei DrWp. […]

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*