Child-Theme erstellen und anpassen

hh-child-starter

WordPress-Themes kennen wir alle. Was aber bitte ist ein Child-Theme? WordPress bietet eine wunderbar einfache Schnittstelle, um eigene Anpassungen in einem Theme umzusetzen, ohne dessen Dateien ändern zu müssen. Das schafft Übersicht, Sicherheit bei Updates und geht fast so leicht wie Copy-Paste.

Inhalt

Was sind die Vorteile eines Child-Themes?

Im Gegensatz dazu, ein Theme zu „hacken“ und eigene Ergänzungen direkt in die Template-Dateien zu schreiben, bieten Child-Themes eine elegante Möglichkeit, Anpassungen am Theme nach dem Copy-Paste-Prinzip umzusetzen:

Einzelne Template-Dateien oder Stylesheets werden in einen separaten Ordner kopiert und dort angepasst. Die Änderungen bleiben so auch bei einem automatischen Update des originalen Themes erhalten.

Der extra erstellte Ordner und die darin enthaltenen Dateien mit den eigenen Anpassungen heißen Child-Theme. Das originale, nicht bearbeitete Theme ist damit automatisch zum Parent-Theme avanciert – also quasi „Mutter“ geworden.

Wie funktioniert ein Child-Theme?

WordPress versucht, jede Template-Datei, die es zur Darstellung der Inhalte einer Website benötigt, im Ordner des aktiven Theme zu finden.

Wenn WordPress eine Datei dort nicht findet, schaut es nach, ob das Theme ein Child-Theme ist. Wenn ja, sucht WordPress die benötigte Datei zusätzlich im Ordner des Parent-Themes (also quasi bei der „Mama“ des aktiven Themes).

Einzige Ausnahme ist die Datei functions.php, die immer aus beiden Ordnern geladen wird. Die aus dem Child-Theme wird hierbei zuerst eingebunden.

Woran erkennst du ein Child-Theme?

Jedes Theme in WordPress muss eine Datei namens style.css haben. Ganz oben in der style.css stehen der Name des Theme und andere Informationen wie Versionsnummer, eine Beschreibung usw.

Wenn du oben in der style.css die Angabe Template: irgendwas findest, hast du es mit einem Child-Theme zu tun. Die Angabe irgendwas entspräche dem Ordnernamen des Parent-Themes.

Wie kannst du ein Child-Theme selbst erstellen?

Wie eben gesagt: erstelle einen eigenen Ordner im themes-Verzeichnis deiner WordPress-Installation.

In diesem Ordner kreiere eine Datei namens style.css und setze den nachfolgenden Header an den Anfang der Datei. Theme Name sollte der Name deines Child-Theme sein, Template der Ordnername des zugehörigen „Mama“-Theme:

Anpassen von Dateien in einem Child-Theme

Das Bearbeiten von Template-Dateien mittels Child-Theme funktioniert ähnlich wie Copy-Paste: Du brauchst lediglich einzelne Template-Dateien, die du bearbeiten willst, aus dem Parent-Theme ins Child-Theme zu kopieren. Dort kannst du sie bearbeiten und umschreiben. WordPress wird immer zuerst an dieser Stelle nach einer benötigten Datei suchen.

Achtung, immer die Ordner-Struktur beibehalten!
Eine Datei mit dem Pfad
hamburg/parts/content.php
muss auch im Child-Theme den Pfad
hamburg-child/parts/content.php
haben.

Sogar Dateien, die im Mutter-Theme gar nicht vorhanden sind, kannst du mittels Child-Theme laden – zum Beispiel dann, wenn es sich um einen standardisierten Dateinamen in der Template-Hierarchie von WordPress handelt:

Für eine Seite mit einem Monatsarchiv von Beiträgen wird WordPress zuerst nach einer Datei namens archive.php suchen. Ist diese nicht vorhanden, greift WordPress auf die index.php zurück. Wenn dein Mutter-Theme nun keine archive.php hat, kannst du diese durchaus in einem Child-Theme hinzufügen; WordPress wird sie erkennen und laden.

Ähnliches gilt für eigene Seiten-Templates. Für statische Seiten kannst du in WordPress sogenannte Custom Page Templates erstellen, die du im Backend dann für eine bestimmte Seite auswählen kannst. Das funktioniert auch, wenn das Template nur im Child-Theme vorhanden ist.

WordPress Template-Hierarchie Infografik
WordPress Template-Hierarchie: Wann wird welche Theme-Datei geladen?

Child-Theme-Starter zum Herunterladen

Für unser Theme Hamburg haben wir dir ein Starter-Set erstellt, das du hier als ZIP herunterladen kannst. Es enthält einige Basis-Dateien und -Funktionen, sowie als Schmankerl ein beispielhaftes Farbschema für Hamburg, dessen Implementierung du als Vorlage für ein eigenes Farbschema nutzen kannst.

Du findest das öffentliche Repository des Starter-Sets auch bei GitHub. Mit ein wenig Experimentierfreude wird dir das Starter-Child-Theme sicher auch für Projekte nützlich sein, in denen ein anderes Parent-Theme als Hamburg zum Einsatz kommt.

ZIP von GitHub laden

TL;DR

Child-Themes bieten eine sichere Methode, um ein Theme mit eigenen Anpassungen zu ergänzen und sicherzustellen, dass diese auch bei einem Update des originalen Themes erhalten bleiben. Das Erstellen eines Child-Themes funktioniert ähnlich einfach wie Copy-Paste.

Du findest die öffentlichen Repositories unser Child-Themes inklusive Downloads bei GitHub:

Beitrag teilen

Author Avatar

Caspar hat das Helpdesk bei MarketPress mit betreut. Wenn er gerade nicht im Plugin- und Theme-Support arbeitet, findet man ihn bei WordCamps und anderen Community-Veranstaltungen.

Auch interessant:

Neue Produktfilter WordPress

Plugins angetestet: WooCommerce Products Filter - Erweiterte Produktfilter

von Michael Firnkes

WooCommerce enthält bereits die wichtigsten Funktionen, damit deine Kunden Produkte nach Preis, Kategorie etc. filtern können. Wem diese Möglichkeiten n ...

Weiterlesen
youtube

Neu: Video-Tutorials für German Market

von Michael Firnkes

Du willst wissen, wie sich die einzelnen Module in unserer Rechtssicherheits-Suite German Market für WooCommerce bedienen lassen? Dann helfen wir dir jetz ...

Weiterlesen
woonews20

WooCommerce Wochenrückblick #20: Conversion, Produktkonfigurator und Woo-Argumente

von Michael Firnkes

Wir sammeln Argumente für das führende Onlineshop-System und für Open Source. Und: Einen Produktkonfigurator kannst du auch mit WooCommerce umsetzen. Di ...

Weiterlesen
ERP

Warum sich der Einsatz eines ERP Systems auch für kleine Händler lohnen kann

von Max Ager

Die eCommerce-Branche ist eine der am schnellsten wachsenden Brachen überhaupt. Über eine Million Onlineshops basieren auf dem bekannten WooCommerce-Syst ...

Weiterlesen

Kommentare

17 Kommentare

  1. #1

    Ein nützlicher Beitrag, vor allem für die Nutzer des Hamburg-Themes. Es wird sich zwar nicht jeder zutrauen, in den PHP-Dateien “herumzumachen”, aber ich vermute mal, dass er in der Theme-Doku einige Tipps findet.

    Übrigens hat solostream.com nun auch ein modernes E-Commerce-Theme herausgebracht. Aber wie es bei den ausländischen Themes nun mal ist, nimmt keiner Rücksicht auf die deutsche Gesetzgebung. Was täten wir ohne German Market?

  2. #2

    gesucht. gefunden. danke.

  3. #3

    Vielen Dank, sehr hilfreich!

  4. #4

    Dieser Artikel hat mir sehr bei vielen Einstellungen meines Themes geholfen! Freut mich das sich jemand soviel mühe macht um soviel gute Informationen ins Netz zu stellen!

    Danke!! 🙂

  5. #5
    portraitprofis

    Toller Artikel!

    Wie aber verhält es sich, wenn z.b. eine Datei eines Plugins (woocommerce)angepasst werden soll? Reicht es, diese dann auch einfach in den Child-Theme Ordner zu kopieren?

  6. #6

    Ich habe kürzlich einem Template ein zweites Menü hinzugefügt. Dafür müßte ich ja die function.php und in dem Fall die Header.php verändern.
    Wenn das Template twentytwelve eine Aktualliesirung bekommt, gehtja alles verlohren.
    Wenn ich das richtig Verstanden habe kann ich mir einen Ordner in themes anlegen und in diesen Ordner eine Style.css mit Einem entsprechenden Header Anleger auf das Theme TwentyTwelve verweißt.
    In diesen Ordner kopieren ich dann noch die Header.php sowie die von mir geänderte Function.php.
    Ich hoffe ich liege richtig.
    Ich bin auch in einer Meetup Gruppe. Osnabrück-Münster-Emsland

    • #7

      Wenn ich das richtig verstanden habe kann ich mir einen Ordner in themes anlegen und in diesen Ordner eine style.css mit einem entsprechenden Header, der auf das Theme TwentyTwelve verweist. In diesen Ordner kopieren ich dann noch die header.php sowie die von mir geänderte functions.php.

      Das hast du richtig dargestellt. Und: du musst das so entstandene Child-Theme natürlich noch unter Design > Themes aktivieren!

  7. #8

    Hallo Caspar,
    ich bin gerade dabei mich in die Geheimnisse der Theme-Bearbeitung einzuarbeiten. Beim Theme Child-Theme lese ich in fast allen Anleitungen, dass in die style.css noch die Zeile

    eingefügt werden sollte. Bei dir und in der Anleitung von Wlad Leirich wird das nicht erwähnt, sondern über die function.php vorgenommen. Als Einsteiger kann ich nicht beurteilen welcher Weg besser ist. Ich habe den Eindruck, über Import ist es einfacher, aber ggf. hat es Nachteile bei Performance und SEO. Die Einbindung über die function.php scheint nicht einheitlich für jedes Theme auf dem beschriebenen Weg zu funktionieren. Kannst du oder jemand, der hier mitliest mir vielleicht die Thematik erläutern?

    Gruß
    Gerd

    • #9

      Hallo Gerd,

      die Methode, Stylesheets mit @import zu laden, ist generell weniger performant und daher nur in Ausnahmefällen sinnvoll, in denen die Performance keine Rolle spielt (z.B. um mal schnell ein paar Styles zu testen o.ä.).

      Wir greifen bei unseren Themes stets auf die Methode zurück, Stylesheets mittels des dafür vorgesehenen Hook in WordPress über die functions.php des Themes zu laden. (Der Hook wp_head, den der Autor des von dir verlinkten Artikels wählt, ist nicht der von WordPress vorgesehene, um Stylesheets direkt zu laden.)

      WordPress bietet für das Registrieren und Laden von Scripten und Stylesheets eine Standardprozedur über den Hook wp_enqueue_scripts. Das Ganze ist eigentlich so einfach, dass es dafür sogar einen Generator gibt. 😉

      Beispiel: Zuerst wird die style.css aus dem Parent-Theme geladen, und in Abhängigkeit davon anschließend die style.css aus dem Child-Theme. (Mit dem oben verlinkten Generator erstellt und leicht ergänzt.)

      Über die action wp_enqueue_scripts landen die Stylesheets in der richtigen Reihenfolge und an der richtigen Stelle im Hook wp_head, der wiederum in jedem vernünfitgen Theme in den <head> gehört, üblicher Weise innerhalb der Datei header.php. WordPress kümmert sich um die deklarierten Abhängigkeiten und vermeidet doppeltes Laden desselben Style-Handlers („mein-parent-stylesheet“, „mein-child-stylesheet“).

      Lektüre:
      wp_enqueue_script
      wp_enqueue_style
      Nutzung der Konstante SCRIPT_DEBUG für „.min“-Versionen von Stylesheets

  8. #10

    Hallo Caspar,
    klasse vielen Dank für die tolle Erklärung. Da hab ich jetzt was zum studieren und ausprobieren.

    Gruß
    Gerd

  9. #11

    Hallo Caspar,
    als Neuling in der Theme-Bearbeitung habe ich es leider noch nicht geschafft, auf dem von dir beschriebenen Weg das Childtheme zu aktivieren. Ich habe einen Childtheme-Ordner und eine style.css angelegt, deinen Code dort in eine function.php gepackt und die Templatenamen ersetzt. Dabei ist mir ein kleiner Schreibfehler in Zeile 5 bei dir aufgefallen: Dort steht styles.css statt style.css. Hab das bei mir geändert, doch leider wird das Stylesheet nicht gelesen 🙁

    Dann habe ich versucht zu verstehen, wie der Generator funktioniert und bin zu folgendem Code gekommen:

    Doch das funktioniert auch noch nicht. Kannst du mir noch einen Tipp geben? Vielen Dank im Voraus!

    Gruß
    Gerd

  10. #12

    Hallo nochmal,
    als Einsteiger scheitert man manchmal an dem selbstverständlichen 😉

    Eine functions.php muss mit enden.
    Jetzt läuft das Child und ich weiß, wie ich in Zukunft korrekt ein Childtheme in WP einbinde.

    Danke noch mal.

    Gruß
    Gerd

  11. #16

    Hey Hallo,

    ich versuche page-templates anzulegen in meinem child
    also page kopieren und umbenennen anlegen – da kommt nichts im Menü “Temlates”

    Muss da irgendetwas beachtet werden oder listet child nur das auf, was im parentverzeichnis auch vorkommt?

    Danke und Grüße, Mikel

    • #17

      Hi Mikel, damit dein Template in der Dropdown-Auswahl für Templates unter Seite bearbeiten erscheint, muss im Header der Template-Datei so etwas stehen:

Schreibe einen Kommentar

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

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">