Wolltest Du schon immer ein paar individuelle Design-Anpassungen in Deinem WordPress-Theme machen, aber die Original-Dateien nicht verändern? Mit dem mächtigen WordPress-Feature „Child Themes“ und Grundkenntnissen in HTML und CSS ist das nicht schwierig.
Fertige Website-Vorlagen – so genannte Themes – gibt es massenhaft. Doch selten findet sich eines, das exakt passt. Kleine Anpassungen sind fast immer nötig, und sei es nur die Schriftart, ein paar Farben oder eine zu dick geratene Linie. Schon mit HTML- und CSS-Grundkenntnissen kannst Du WordPress-Themes ganz einfach verändern und anpassen, Basis-Wissen in PHP ist für größere Änderungen hilfreich.
Mit so genannten „Child Themes“ bietet WordPress ein mächtiges Feature. Sie setzen auf ein vorhandenes Theme mit dessen Formatierungen und Funktionen auf und ergänzen oder modifizieren es mit eigenen Elementen und Designs. Der große Vorteil: Das Original-Theme bleibt dabei unangetastet, Updates des Originals beeinträchtigen die Anpassungen im Child-Theme nicht.
Schritt für Schritt: Erstelle Dein eigenes Child-Theme
Ein wenig Aufwand bringt nur das erstmalige Anlegen des Child Themes mit sich, danach sind die Anpassungen genau so unkompliziert als würdest Du direkt im Original-Theme arbeiten. Zunächst suchst Du Dir ein Theme aus, das Deinen Vorstellungen so nahe wie möglich kommt, und installierst es. Achte darauf, dass es als geeignet für Child Themes beschrieben wird. Die meisten Themes sind das, aber es gibt Ausnahmen.
Im Folgenden beschreiben wir, wie Du ein Child-Theme manuell anlegst. Willst Du Dir diese ersten Schritte sparen, erledigt das in den meisten Fällen auch das Plugin „One Click Child Theme“ automatisch. Die Design-Anpassungen des Child-Themes musst Du anschließend aber natürlich dennoch von Hand erledigen.
1) Ordner fürs Child Theme anlegen
Themes liegen in Deinem Webspace im Verzeichnis wp-content/themes. Wir verwenden für unser Beispiel hier ein Eltern-Theme, das im Verzeichnis wp-content/themes/elterntheme liegt. Entsprechend muss Du bei den folgenden Beschreibungen elterntheme jeweils gegen den Verzeichnisnamen Deines tatsächlichen Eltern-Themes austauschen.
Unter wp-content/themes legst Du nun also auf der gleichen Ebene wie das ausgewählte Eltern-Theme ein neues Verzeichnis an. Wie Du das Verzeichnis benennst, ist egal. Es bietet sich aber zum späteren Verständnis beipielsweise elterntheme-child als Name an.
2) Child Theme definieren
In diesem neuen Verzeichnis – im Beispiel wp-content/themes/elterntheme-child – legst Du eine neue Datei namens style.css an. Sie muss die folgenden Code-Zeilen beinhalten, damit WordPress erkennt, dass es sich hier um ein Child Theme zum Theme im Verzeichnis wp-content/themes/elterntheme handelt:
/*
Theme Name: Dein Child Theme
Description: optionale Beschreibung Deines Child Themes
Author: Dein Name
Author URI:
Template: elterntheme
Version: 1.0
Tags: elterntheme
Text Domain: elterntheme-child
*/
Entscheidend ist die Zeile Template, denn dort muss der exakte Name des Verzeichnisses eingetragen sein, in dem das ausgewählte Eltern-Theme liegt. In unserem Beispiel also elterntheme.
3) CSS-Formatierungen aus dem Eltern-Theme verknüpfen
Der einzige etwas anspruchsvollere Schritt bei der Erstellung eines Child Themes kommt jetzt: Wir müssen die CSS-Definitionen aus dem Eltern-Theme mit dem Child-Theme korrekt verknüpfen.
Hierfür legst Du im Child-Theme-Verzeichnis eine neue Datei namens functions.php an. Diese Datei brauchst Du später gegebenenfalls auch für Anpassungen der Funktionalität des Themes, also für Erweiterungs-Code in PHP.
Im Moment benötigst Du die Datei aber für die Einbindung der CSS-Definitionen des Eltern-Themes und das Zusammenführen mit dem CSS des Child-Themes in der richtigen Reihenfolge. Wichtig ist dabei, dass zuerst die CSS-Definitionen des Eltern-Themes und dann erst die des Child-Themes geladen werden, damit das Child-Theme wirken kann.
Die functions.php beginnt mit <?php und endet mit ?>. Alle weiteren Anweisungen stehen zwischen diesen öffnenden und schließenden PHP-Tags.
Im folgenden Code musst Du lediglich elterntheme gegen den so genannten „handle“ Deines Eltern-Themes austauschen. Das „handle“ ist nichts anderes als der Name im PHP-Code, den das Eltern-Theme seinen CS-Styles zugewiesen hat.
Oft entspricht der „handle“ dem Verzeichnis-Namen des Eltern-Themes. Falls nicht, suchst Du in der function.php des Eltern-Themes nach „ wp_enqueue_style“. Dort steht dann zum Beispiel:
wp_enqueue_style( ‘twentyfifteen-style‘, get_stylesheet_uri() );
Der „handle” wäre in diesem Fall twentyfifteen.
Achte beim Code der functions.php auf exakte Schreibweise und darauf, dass innerhalb der einfachen Anführungszeichen keine Leerzeichen vorkommen. Das sind die häufigsten Fehlerquellen.
<?php
function elterntheme_child_styles() {
wp_deregister_style(‚elterntheme-style‘);
wp_register_style(‘elterntheme-style’, get_template_directory_uri(). ‘/style.css’);
wp_enqueue_style(‘elterntheme-style’, get_template_directory_uri(). ‘/style.css’);
wp_enqueue_style(‘childtheme-style’, get_stylesheet_directory_uri().’/style.css’, array(‘elterntheme-style’) );
}
add_action( ‘wp_enqueue_scripts’, ‘elterntheme_child_styles’ );
?>
Damit alles korrekt abläuft, melden die aufgeführten Code-Zeilen zunächst die CSS-Definitionen des Eltern-Themes bei WordPress ab, um sie dann im Anschluss zusammen mit dem Child-Theme-CSS wieder in der richtigen Reihenfolge anzumelden. Zusätzlich deckt dieser Code in den meisten Fällen die Situation ab, dass manche Eltern-Themes die CSS-Definitionen auf mehr Dateien als nur die style.css aufteilen.
Übrigens: Die früher verwendete Methode, die CSS-Datei des Eltern-Themes über @import in der style.css zu integrieren, wird von WordPress nicht mehr empfohlen. Sie hat vor allem Performance-Nachteile.
4) Child-Theme aktivieren
Jetzt ist das Child-Theme grundsätzlich einsatzfähig, daher aktivieren wir es in der Admin-Oberfläche im Menüpunkt Design – Themes.
Es ändert sich nun erst einmal gar nichts, jedenfalls nichts Sichtbares, denn noch hast Du ja keine Änderungen im Child-Theme vorgenommen. Um zu sehen, ob Du erfolgreich warst, öffne die style.css und füge dort eine neue Formatierung ein, beispielsweise:
body { color: blue; }
Nach Speichern der veränderten style.css am Server sollte nun der Fließtext auf Deiner Website in blau erscheinen.
Zur Fehlersuche kannst Du beispielsweise die Entwickler-Tools des Chrome-Browsers oder die Firebug-Extension für Firefox verwenden. Aber wenn Du Dich mit Design-Änderungen beschäftigst, dann kennst Du das wahrscheinlich ohnehin schon.
Falls Du in WordPress mit eigenen Menüs arbeitest, gibt es nach Aktivierung eines Child-Themes manchmal Probleme. Die behebst Du ganz einfach, wenn Du unter Design – Menüs das jeweilige Menü auswählst und einmal auf Menü speichern klickst.
5) Systematik von Child-Themes
Die beiden Dateien style.css und functions.php haben in Child-Themes eine Sonderstellung: Die Einträge dort lädt WordPress zusätzlich zu den äquivalenten Dateien des Eltern-Themes.
Die Eltern-styles.css wird allerdings nur dann benutzt, wenn Du sie explizit einschließt. Dann werden zunächst alle Formatierungen des Eltern-Themes geladen, danach zusätzlich die des Child-Themes. Enthält das Child-Themes also Formatierungen für dieselben Elemente wie das Parent-Theme, werden letztere durch das Child-Theme überschrieben.
Bei der functions.php lädt dagegen immer zuerst die Datei des Child-Themes, danach die des Parent-Themes (Danke an Bernhard für den korrigierenden Hinweis!). Funktionen mit gleichem Namen werden vom Parent-Theme also überschrieben. Du solltest daher darauf achten, dass die Funktionen in Deinem Child-Theme keine Namen benutzen, die bereits in der functions.php des Parent-Themes vorkommen. (Für fortgeschrittene Programmierer sei an dieser Stelle nur kurz angemerkt, dass gleichnamige Funktionen im Child-Theme die ursprünglichen Funktionen auch komplett ersetzen können, beispielsweise indem man sie über remove_action() beziehungsweise remove_filter() von dem Hook löst, dem sie zugeordnet sind oder indem man im Child-Theme eine höhere Priorität festlegt).
Alle anderen Dateien, die Du in Deinem Child-Theme einsetzt, ersetzen die äquivalenten Dateien des Eltern-Themes komplett. Sie werden anstatt und nicht zusätzlich zu den Dateien aus dem Eltern-Theme geladen. WordPress prüft also, ob eine entsprechende Datei im Child-Theme vorhanden ist und gibt selbiger gegebenenfalls den Vorzug.
Willst Du beispielsweise im Header-Bereich Deiner Website etwas umgestalten, kopierst Du die header.php des Eltern-Themes in Dein Child-Theme und veränderst die Datei im Child-Theme entsprechende Deinen Wünschen.
6) Theme-Updates prüfen
Du hast jetzt alle Möglichkeiten in der Hand, um Gestaltung und Funktionalität Deines WordPress-Themes zu verändern, ohne das zu Grunde liegende Eltern-Theme anzufassen. Selbiges kannst Du also bedenkenlos aktualisieren, wenn Updates dazu erscheinen.
Aber natürlich entwickelt sich jedes Theme auch weiter, sodass Updates durchaus auch Veränderungen betreffen können, die Du im Child-Theme gemacht hast. Ebenso zu bedenken: Dateien aus dem Eltern-Theme, die Du übernommen und verändert hast, könnten Sicherheitslücken enthalten, die auch beim Update des Eltern-Themes nicht behoben werden, weil WordPress weiterhin die – dann veraltete – Kopie in Deinem Child-Theme verwendet.
Deshalb ist es wichtig, dass Du bei jedem Update des Eltern-Themes in dessen Dokumentation schaust und prüfst, was sich dort verändert hat, um nötigenfalls auch Dein Child-Theme anzupassen.
7) Minimal-Prinzip
Der wichtigste Tipp für Child-Themes lautet daher: Beschränke Dich bei Veränderungen auf das absolut nötige. Je weniger Eltern-Theme-Dateien Du übernimmst und je weniger Veränderungen Du am Design vornimmst, desto unwahrscheinlicher sind spätere Konflikte und desto unwahrscheinlicher musst Du bei Theme-Updates Anpassungen vornehmen.
Das geringste Konflikt-Potenzial haben die CSS-Anweisungen in der style.css. Wenn Du also mit Anpassungen ausschließlich hier auskommst, kannst Du Dir eine umfangreichere Prüfung von Theme-Updates sparen.
8) Theme-Preview erstellen
Du wirst es bemerkt haben: In der Übersicht der verfügbaren Themes in der WordPress-Admin-Oberfläche präsentiert sich Dein Child-Theme ziemlich schmucklos. Willst Du dort ein hübsches Bild oder einen Screenshot Deines Themes hinterlegen, ist das ganz einfach.
Erzeuge einen Screenshot Deines Themes und lege selbigen in der Größe 880×660 Pixel mit dem Dateinamen screenshot.png im Bildformat PNG ins Stammverzeichnis Deines Child-Themes. WordPress erkennt das automatisch und zeigt Dir nun auch Dein Child-Theme in der Übersicht optisch ansprechend dar.
Viel Spaß beim Gestalten!
Child-Themes werden gerne unterschätzt, sind aber ein sehr mächtiges und praktisches Feature von WordPress. Du hast damit alle Freiheiten, das Theme anzupassen, ohne das Haupt-Theme zu verändern. Beachten musst Du lediglich, dass zu viele und zu umfassende Veränderungen irgendwann dennoch zu Konflikten führen werden. In solchen Fällen kann es sinnvoll sein, lieber gleich zu einem anderen Theme zu wechseln, das schon in seiner Grundstruktur besser zu Deinen Anforderungen passt. Für kleinere Design-Anpassungen sind Child-Themes dagegen sehr unkompliziert und sicher.
Franz Neumeier
Ich bin Franz Neumeier, war jahrelang Chefredakteur bei IT-Zeitschriften wie PC Professionell, Internet Professionell und Internet Magazin. Inzwischen habe ich mich als freier Autor vor allem auf Kreuzfahrt-Themen spezialisiert, betreibe mehrere Websites und schreibe für STRATO über verschiedene Themen, vor allem über WordPress und übers Bloggen.
Shiny45 sagte am
Danke für die Tipps. Wie sieht es denn mit responsive Design aus. Wird das auch direkt auf Child Themes angewandt oder muss ich da etwas Spezielles beachten?
Franz Neumeier sagte am
“responsive” ist ja erstmal nur ein Design-Konzept. Je nachdem, wie ein Theme gestrickt ist, kann man das natürlich auch als Child-Theme umsetzen. Aber wenn das Eltern-Theme nicht responsiv ist, dürfte es relativ schwierig werden, das per Child-Theme zu ändern. Denn um ein Theme responsiv zu machen, sind meist eher tiefe Eingriffe in das Theme nötig und wenn ein Theme heutzutage nicht responsiv ist, dürfe es auch ansonsten schon recht veraltet sein.
Insofern würde ich da eher raten, nach einem schon von Grund auf nativen Theme zu suchen oder mal beim Entwickler des Themes nachzufragen, ob demnächst ein Update mit Responsive-Umsetzung zu erwarten ist.
Franz Neumeier sagte am
Hallo Roland,
ein Child-Theme ist immer dann sinnvoll, wenn PHP-Dateien des Themes verändert werden sollen. Das heißt anders herum, wenn das Haupt-Theme die Möglichkeit bietet, ein eigenes Headerbild einzufügen, dann brauchst Du dafür kein Child-Theme, denn dieses Bild bleibt auch bei einem Theme-Update erhalten. Auch Plugins sind vollkommen unabhängig vom Theme, sodass die unabhängig davon, ob Du mit einem Haupt- oder Child-Theme arbeitest, bei Updates nichts verloren geht.
Child-Theme ist also dann interessant, wenn ich tatsächlich direkt die PHP-Dateien des Themes verändern will. Wenn ich nur Optionen im Backend von WordPress wie z.B. Farben, Titelbild o.a. verändere, ist ein Child-Theme nicht nötig.
Eine Grenze erreichst Du mit Child-Themes andererseits dort, wo das Haupt-Theme sich bei einem Update so weit verändert, dass es in Konflikt mit den Änderungen im Child-Theme gerät. Aber darüber würde ich mir nicht viele Gedanken machen, denn das ist dann doch eher selten der Fall.
Roland sagte am
Mit dem Thema Child Theme beschäftige ich mich gerade zum ersten Mal, da ich meinen ersten Blog einrichte. Was für mich auch nach diesem (grundsätzlich sehr informativem) Beitrag unklar bleibt, ist die Frage, ab welchem Grad von Veränderung am Eltern-Theme ein Child-Theme wirklich notwendig ist, um die Veränderungen bei einem Theme-Update nicht wieder zu verlieren. Also wenn das Theme zum Beispiel von Haus aus ein Beispiel-Bild als Header hat (wie bei Misty Lake) und ich ersetze dieses Bild durch ein eigenes Foto, muss ich dafür dann schon ein Child-Theme anlegen? Oder was ist bei einem einfachen Plug-in wie etwa Share Buttons, die ich dem Ursprungstheme hinzufüge? Verschwinden die bei einem Teme-Update dann wieder?
Bernhard sagte am
Schöner Beitrag. Toll, dass ihr euren Lesern erklärt, wie man ein Child-Theme erstellt und weshalb es wichtig ist, die zu tun.
Nur ein paar Anmerkungen noch. Es ist nicht notwendig das Stylesheet des Parent-Themes zu “deregistrieren”. Der Code kann also vereinfacht wie folgt aussehen:
function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
Die Aussage, zur Ladereihenfolge der functions.php Datei ist ebenfalls nicht korrekt. Hier wird zuerst die Datei des Child-Themes geladen und dann die des Child-Themes.
Noch ein Tipp zuletzt: Ihr solltet mal ein Plugin für die Darstellung von Quellcode installieren (z.B. SyntaxHighlighter Evolved), denn sonst korrigiert WordPress automatisch die Anführungsstriche auf eine korrekte deutsche Schreibweise und wenn ein Nutzer den Code aus dem Artikel kopiert und verwendet, führt das zu einem PHP-Fehler.
Franz Neumeier sagte am
Danke für die Hinweise – die Ladereihenfolge bei der functions.php habe ich direkt im Text korrigiert, da hast Du natürlich völlig Recht.
Was das Deregistrieren des Parent-Stylesheets angeht, bin ich in dem Beitrag einfach auf Nummer Sicher gegangen – Du hast Recht, in den allermeisten Fällen ist das Deregistrieren nicht nötig. Ich bin bei der Recherche zu dem Beitrag aber auf Situation bzw. Themes gestoßen, wo erst das vorherige Deregistrieren zu fehlerfreien Ergebnissen geführt hat. Ehrlich gesagt kann ich mich aber an die genauen Umstände, wann das auftreten kann, nicht mehr erinnern. Insofern würde ich dazu neigen, Deine Code-Variante zu nutzen und nur dann auf die Version mit “deregister” zurückzugreifen, wenn es damit Probleme gibt. Oder siehst Du mit der “deregister”-Variante grundsätzliche Probleme, die dagegen spreche würden, so zu verfahren?
Bernhard sagte am
Nein, ich sehe keine Probleme darin, wenn man einen unnötigen Aufruf der deregister Funktionen ausführt. Ich kann mir aber auch keine (gültigen) Fälle vorstellen, in denen es notwendig wäre. Da ja die functions.php des Parent-Theme erst nach der functions.php des Child-Theme geladen wird, kann das Parent-Theme eigentlich gar nicht registriert worden sein. Außer vielleicht über eins der Plugins (die werden ja vorher geladen), aber das wäre dann ziemlich schlechter Stil.
Ihr solltet aber wirklich noch ein Plugin für Codebeispiele installieren. Das verhindert gerade bei unerfahrenen Nutzern Probleme mit dem Code, der im Artikel steht, wenn dieser einfach nur kopiert wird.
Franz Neumeier sagte am
Leider stößt man halt immer wieder auf Plugins, die sich so ziemlich an gar keine Regeln halten und für den Laien ist es eher schwer zu erkennen, welche Plugins in dieser Hinsicht sauber sind und welche nicht. Deshalb: better safe than sorry.
Bzgl. Code-Plugin: sehe ich ganz genauso, habe das auch so angeregt. Aber als freier Autor kann ich nicht gleich direkt selbst installieren 😉
Christina Witt sagte am
Hallo Bernhard,
vielen Dank für den Tipp mit dem Code-Plugin. Wir haben das schon auf dem Zettel und werden das in Angriff nehmen. Da wir so einige Dinge noch umsetzen müssen, können wir aber leider noch nicht sagen, wann es soweit sein wird.
LG
Christina
Birgit Ligotzky sagte am
Das wars, alles probiert und Fehler gesucht, jede Menge Code aus anderen Seiten probiert, aber nichts half – diese Einbindung hat endlich funktioniert – vielen vielen Dank