Child-Theme erstellen und anpassen

Child-Theme erstellen und anpassen 1

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:

/**
 * Theme Name: Hamburg Child
 * Template:   hamburg
 */

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! 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?

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.

Newsletter abonnieren

Das könnte dich auch interessieren

SEO-Quick-Wins für bessere Rankings

Die Liste an möglichen Maßnahmen zur Suchmaschinenoptimierung ist lang und viele Seitenbetreiber wissen oftmals nicht, wo sie anfangen sollen. In der Pra ...

Mehr erfahren

WooCommerce: Gutenberg-Blöcke ersetzen die Shortcodes für Warenkorb und Kasse

Ab der Version 8.3 verwendet WooCommerce nach einer Neuinstallation für die Darstellung der Warenkorb- und Kassenseite standardmäßig nicht mehr Shortco ...

Mehr erfahren

Von Woo.com zu KI: Aktuelle Entwicklungen bei WooCommerce

Zu Beginn des Jahres 2024 zeigen wir in diesem Artikel die aktuellen Entwicklungen von WooCommerce und werfen einen Blick in die Zukunft. Wir beginnen ...

Mehr erfahren

Kommentare

17 Kommentare

  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. gesucht. gefunden. danke.

  3. Vielen Dank, sehr hilfreich!

  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. 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. 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

    1. 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. 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

    @import url("../Childthemename/style.css");

    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

    1. 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.)

      // Register Style
      function custom_styles() {

      /* Stylesheet des Parent-Theme */
      wp_register_style( ‘mein-parent-stylesheet’, get_template_directory_uri() . ‘/styles.css’, false, false );
      wp_enqueue_style( ‘mein-parent-stylesheet’ );

      /* Stylesheet des Child-Theme: soll abhängig von dem des Parent-Theme geladen werden */
      wp_register_style( ‘mein-child-stylesheet’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘mein-parent-stylesheet’ ), false );
      wp_enqueue_style( ‘mein-child-stylesheet’ );

      }

      // Hook into the ‘wp_enqueue_scripts’ action
      add_action( ‘wp_enqueue_scripts’, ‘custom_styles’ );

      Ü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

      1. Hallo Caspar,
        kennst Du diesen Artikel von Justin Tadlock:
        http://justintadlock.com/archives/2014/11/03/loading-parent-styles-for-child-themes

        Spannende Variante, die es noch einfacher machen würde Child-Themes zu nutzen.

      2. @Torsten Nett, danke! 🙂 Dieselben Core-Funktionen nutzen wir bei unseren Starter-Child-Themes (gerade aktualisiert und signifikant vereinfacht); bloß laden wir halt klassisch das Child-Stylesheet aus dem Child-Theme heraus. Justin geht einen Schritt weiter mit „decisions, not options“ – interessanter Ansatz.

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

    Gruß
    Gerd

  9. 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:

    // Register Style
    function custom_styles() {
    
    	wp_register_style( 'twentyfourteen', 'http:///testdomain.de/wp-content/themes/twentyfourteen/style.css', false, false );
    	wp_enqueue_style( 'twentyfourteen' );
    
    	wp_register_style( 'twentyfourteen_child', 'http:///testdomain.de/wp-content/themes/twentyfourteen_child/style.css', false, false );
    	wp_enqueue_style( 'twentyfourteen_child' );
    
    }
    
    // Hook into the 'wp_enqueue_scripts' action
    add_action( 'wp_enqueue_scripts', 'custom_styles' );

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

    Gruß
    Gerd

  10. 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

    1. @Gerd: Danke für dein Feedback und viel Erfolg weiterhin!

  11. Mikel Päpke

    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

    1. 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:

      <?php
      /**
       * Template Name: Dein Template-Name
       */
      
      // Rest vom Template …

Schreibe eine Antwort

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

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