So richten Sie in WordPress ein Child-Theme ein

Dieser Beitrag wurde ursprünglich am 01.10.2012 veröffentlicht und am 26.10.2015 aktualisiert.

****

Wenn man Anpassungen in einem WordPress – Theme direkt in der style.css vornimmt, gehen diese Anpassungen mit einem Update des Themes verloren.

Daher sollte man vor jeder Aktualisierung eines Themes eine Sicherungskopie der style.css vornehmen, um die Anpassungen nach der Aktualisierung wieder einspielen zu können.

Eine Alternative dazu ist die Erstellung eines Child-Themes.

Eine Child-Theme übernimmt die Funktion des übergeordneten Themes („Parent Theme“) und erlaubt es Ihnen, individuelle Anpassungen und Ergänzungen an einem Theme vorzunehmen, ohne dass diese bei der Aktualisierung des Parent-Themes verloren gehen.

Um ein Child-Theme zu erstellen, legen Sie zunächst mit Hilfe von Filezilla (bzw. des von Ihnen verwendeten FTP-Programms) auf Ihrem Webspace ein neues Verzeichnis unter „/wp-content/themes“ an.

Hinweis: Die Verzeichnisse sehen Sie in Ihrem FTP-Programm als Ordner.

Beispiel: 
Ihr Parent-Theme befindet sich in folgendem Verzeichnis:

/wp-content/themes/twentyfifteen

Dann legen Sie im Ordner „themes“ einen neuen Ordner an und geben diesem einen griffigen Namen. Ich wähle im Beispiel „twentyeleven_child“

Dann sieht die Struktur so aus:

/wp-content/themes/twentyfifteen_child

Dann legen Sie mit einem Texteditor (z.B. WordPad auf einem Windows-Rechner oder TextEdit auf dem Mac / Ich selbst verwende auf dem MacBook „Tincta“ aus dem App-Store) eine neue Datei an und speichern Sie diese unter dem Namen style.css.

Bei der Benennung dieser Datei dürfen Sie nicht kreativ sein, denn die Datei „style.css“ ist für jedes WordPress-Theme zwingend erforderlich und muss auch genau so heißen.

Diese style.css wird später in das neu angelegte Verzeichnis „twentyfifteen_child“ kopiert, vorher sind aber noch ein paar Informationen in der Datei erforderlich.

Damit WordPress mit der style.css etwas anfangen kann, benötigt sie einen Informations-Header, der WordPress mit den notwendigen Informationen über diese Datei informiert.

Beispiel: 

/*
Theme Name: Neues WordPress Theme
Theme URI: http://example.com/
Description: Ein tolles neues Theme genau nach meinen Vorstellungen
Author: Ihr Name
Author URI: https://wp-bistro.de/
Template: twentyfifteen
Version: 1.0
*/

Erläuterung

Theme Name:

Das ist der Name Ihres Child-Themes. Diese Angabe ist zwingend erforderlich, ohne einen Theme-Namen funktioniert die style.css nicht.

Sie dürfen hier Ihrer Fantasie freien Lauf lassen. Ich habe das Theme im Beispiel einfach nur „Neues WordPress Theme“ genannt, aber es gibt hier keine Restriktionen.

Theme-URI

Hier können Sie die Adresse Ihrer Webseite einfügen, für die Sie das Theme verwenden. Diese Angabe ist optional, Sie können Sie auch weglassen.

Description

Hier können Sie eine kurze Beschreibung zum Theme unterbringen, z.B. was das Theme kann, wie es aussieht oder ähnliches. Auch die Description ist eine optionale Angabe und kann weg gelassen werden.

Author bzw. Author-URI

Hier können Sie Ihren Namen und Ihre eigene Webadresse unterbringen, wenn Sie mögen. Auch das ist eine optionale Angabe und nicht zwingend erforderlich.

Template
Hier muss das Verzeichnis des Parent-Themes angegeben werden. Diese Angabe ist zwingend erforderlich, damit WordPress weiß, wo es die fehlenden Dateien zum Theme findet. Nur mit einer style.css allein kommt ein Theme nämlich nicht besonders weit 🙂

Wichtig: Bei dieser Angabe muss unbedingt Groß- und Kleinschreibung beachtet werden. Das Template muss genau so benannt werden, wie der entsprechende Ordner in Ihrer Verzeichnis-Struktur

Version
Hier kann eine Versions-Nummer angegeben werden. Auch dies ist eine optionale und nicht zwingend erforderliche Angabe

Alles, was nach dem */ kommt, ist dann das eigentliche Stylesheet des neuen Themes.

Jetzt ist die style.css soweit fertig, dass Sie diese in das neue Verzeichnis für Ihr Child-Theme hochladen können.

Wenn das erledigt ist, finden Sie die neue style.css in WordPress unter „Design“ -> „Editor“ und können Sie dort bearbeiten.

Gegebenenfalls ist es dafür erforderlich, rechts oben im Dropdown hinter „Zu bearbeitendes Theme wählen“ das Child-Theme auszuwählen.

Tipp: 
Um Ihre Ergänzungen in der style.css auch nach einer ganzen Weile noch nachvollziehen zu können, empfiehlt es sich, mit Überschriften eine Struktur in die Regeln einzubringen.

Überschriften können Sie mit /* starten und */ beenden.

Beispiel: 

/* Hier beginnen meine eigenen CSS Regeln */

/* Anpassungen an Schriften */

/* Anpassungen an Grafikelementen */

Und so weiter …

Import des Stylesheets aus dem Parent-Theme

Damit die Angaben aus dem Stylesheet des Parent-Themes übernommen werden ist es erforderlich, dieses in das Parent-Theme zu laden. Früher hat man das über @import direkt in der style.css des Child-Themes erledigt.

Diese Methode gilt heute als veraltet.

Der neue, korrekte Weg sieht den Import über die functions.php vor.

Dafür legen Sie wieder mit Ihrem bevorzugten Texteditor eine neue Datei an, die Sie „functions.php“ nennen.

In diese Datei gehört der folgende Code:

<?

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    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')
    );
}

Die functions.php wird nun ebenfalls in den neu angelegten Ordner twentyfifteen_child hochgeladen, damit ist das Child-Theme funktionsfähig und kann aktiviert werden.

Weitere Dateien im Child-Theme

Das Stylesheet ist zwingender Bestandteil eines Child-Themes. Sie können aber nahezu alle Dateien des Parent-Themes in den Ordner des Child-Themes kopieren, wenn Sie daran individuelle Anpassungen vornehmen.

Wer den Code für Google Analytics nicht über ein Plugin einbindet sondern über die header.php, der sollte auch die header.php in das Child-Theme legen. Dadurch ist sichergestellt, dass Sie nicht bei jedem Theme-Update den Tracking-Code neu in das Theme einbauen müssen.

Dafür ist übrigens kein Import der alten Datei erforderlich. Kopieren Sie einfach die Datei aus dem Parent-Theme und fügen Sie diese in das Child-Theme ein. Simple as that

War diese Erläuterung für Sie hilfreich? Oder haben Sie noch Fragen? Dann stellen Sie diese gern in den Kommentaren.

Bildquelle:
© coramax – Fotolia.de

Print Friendly

Kommentare

So richten Sie in WordPress ein Child-Theme ein — 40 Kommentare

  1. Pingback: Die wichtigsten Sicherheits-Regeln für Ihre WordPress-Webite › Smart ins Web

  2. da ist ein Fehler in der Anleitung:
    „Dann legen Sie im Ordner “twentyeleven” einen neuen Ordner an“

    muss doch wohl heißen:
    „Dann legen Sie im Ordner “themes” einen neuen Ordner an …“

    Gruss Connie

  3. und noch was:

    „in die ich den Tracking-Code für Google-Analytics unterbringe. “

    GoogleAnalytics entspricht nicht den deutschen Datenrichtlinien! Der Einsatz ist nicht unbedingt empfehlenswert.. vielleicht sogar rechtlich nicht in Ordnung!
    da die Seitenbesucher nicht informiert werden…

    besser ist PIWIK! Gruss Connie

  4. Hallo Frau Steidl,

    vielen Dank für diese tolle Anleitung! Diese macht mir Mut, es selbst einmal mit einem Child Theme zu versuchen… 🙂

    Ich hätte da nur noch zwei Fragen: Wenn ich derzeit bereits beim Parent Theme einige Widgets in der Sidebar eingerichtet habe und nun auf das Child Theme umstelle, sind die Widgets dann alle weg? Und: Wenn das Parent Theme einige Optionen zur Änderung anbietet, wie beispielsweise ein eigenes Headerbild, eine Link-Farbe etc., sind diese Einstellungen mit dem Child-Theme dann auch alle weg?
    Falls die Antwort für beide Fragen JA lautet: Was kann ich tun, damit sowohl Theme-Optionen als auch Widgets des Parent Theme erhalten bleiben?

    Vielen herzlichen Dank im voraus für Ihre Hilfe!
    Stephanie

    • Hallo Stephanie,

      Sie müssen sich keine Sorgen machen: Die Einstellungen und Inhalte des Parent-Themes bleiben bei der Einrichtung eines Child-Themes erhalten.

      In der einfachsten Form, wenn nämlich nur die style.css in das Child-Theme übernommen wird, greift das Child-Theme für alle anderen Informationen auf die Dateien des Parent-Themes zu.

      Viel Erfolg beim Umstellen auf das erste eigene Child-Theme 🙂

      Viele Grüße
      Michaela Steidl

  5. Pingback: Google Fonts in eine Website einbinden › Smart ins Web

  6. Pingback: Social Media-Links im Menü Ihrer Website anzeigen › WordPress-Bistro

  7. Guten Tag, Frau Seidel.

    Erst einmal herzlichen Dank für die wirklich gute Anleitung.
    Ich bin noch nicht sehr fit mit WordPress und muss deshalb mal etwas nachfragen.
    Ich habe eine Multisite unter der obigen Adresse (ist noch im Aufbau) installiert. Das Weaver II Theme ist das Theme, mit dem ich schon immer arbeite. Fand es nur bedauerlich, dasss man nirgendwo deutschen Support dafür bekam.
    Das Theme habe ich nach meinem Geschmack getuned.
    Die Website beinhaltet 247 BlogWebseiten und ich habe bislang immer für jeden Blog die Einstellungen am Theme einzeln vorgenommen. Inzwischen habe ich die Seite 4mal neu installiert, aus verschiedenen Gründen.
    Ich wollte das ganze nun nochmals machen, da mir Plugins, die ich ausprobiert habe, wie Memphis Sliding Menu, ShareThis, Dynamic Sidebars und andere mir die Seite irgendwie beschädigt haben, d.h. es fliegt noch Code-Müll hier und dort herum und schaut hier und da mal um die Ecke. Es läuft nicht mehr so richtig rund.
    Um nicht wieder diese viele Arbeit zu haben, habe ich jetzt nach Ihren Anweisungen ein Child Theme erstellt. Hat auch bestens geklappt. Danke nochmals.

    Ich möchte nun die Umstellungen/Einstellungen, die ich vorher manuell vornehmen musste, gleich in das Child-Theme übernehmen und per Anweisung in der wp-config, beim Start laden lassen.

    Können Sie mir sagen, wo ich hierzu Anleitung finden kann?

    Mit freundlichem Gruß

    Carl Buntdschuh

  8. Pingback: Farben anpassen für das WordPress-Theme Twenty Fourteen › WordPress-Bistro

  9. Hallo Michaela,
    ich war gerade im Begriff, ein Child-Theme einzurichten, als mir ein Freund und IT-Experte sagte, dass ich das bei der Verwendung des Weaver II-Themes nicht brauche. Dort gibt es so viele Möglichkeiten, Anpassungen einzufügen, z.B. unter „Weaver II Admin – Advanced Options“, dass ich kein Child-Theme brauche, da diese Anpassungen bei Updates nicht überschrieben werden.
    Was meinst du dazu?

    • Hallo Karin, es ist richtig, dass die unter „Advances Options“ eingestellten Anpassungen auch das Update von Weaver „überleben“ und damit eigentlich ein Child-Theme nicht erforderlich ist.

      In zwei Fällen würde ich trotzdem zu einem Child-Theme raten:

      Wenn Du sehr viele Anpassungen in Advanced Options stehen hast – Diese werden nämlich immer mit jedem Seitenaufruf „inline“ geladen und das könnte die Ladezeit Deiner Seite etwas reduzieren.

      Und wenn Du Anpassungen in den Theme-Templates machst, also z.B. header.php, footer.php anpasst oder Ergänzungen in der functions.php vornehmen möchtest.

  10. Pingback: Buttons verwenden – Ganz ohne Plugin › WordPress-Bistro

  11. Pingback: Google Analytics mit dem Google Analyticator Plugin › WordPress-Bistro

  12. Pingback: Einführung in CSS - Individuelle Anpassungen selber machen › WordPress-Bistro

  13. Wie aktualisiere ich denn dann ein Child-Theme? Ich meine so rein praktisch, denn wenn mir der Theme-Hersteller ein Update anbietet, dann aktualisiere ich doch nur das Parent-Theme oder?

    • Wenn Du ein Child-Theme anlegst bist Du im Prinzip selbst dafür verantwortlich, dass die Templates des Child-Themes korrekt funktionieren.

      Wenn Du nur Layoutanpassungen über die style.css vorgenommen hast ist das in der Regel eher unproblematisch.

      Wenn Du aber auch PHP-Templates angepasst hast dann kannst Du mit Hilfe dieses Plugins prüfen, welche Änderungen am Parent-Theme beim Update vorgenommen wurden und diese falls erforderlich auch im Child-Theme anpassen:

      https://de.wordpress.org/plugins/child-theme-check/

      Herzliche Grüße
      Michael

  14. Guten Morgen, Michaela

    Zwei Kleinigkeiten, die mir den Umgang mit Child-Themes vereinfachen:
    1) Es geht ohne ftp: Das auf dem Computer fertig entwickelte Child-Theme in ein ZIP-Archiv verpacken und bei Design – Themes- klick Installieren – klick Theme Hochladen über die WordPress-Oberfläche installieren.
    2) Ganz viele und fast alle Professionellen Anbieter bieten fertig nutzbare Child-Themes an. Das macht das Suchen nach dem Ordnernamen des Parent-Themes obsolet.

    Und wer darauf so gar keine Lust hat, für die oder den ist vielleicht das Plugin Child Theme Configurator (https://de.wordpress.org/plugins/child-theme-configurator/) eine Idee.

    Beste Grüße
    OLAF

  15. Hallo,
    ich möchte eine Frage stellen. Wie weißt du es bestimmt, ob die Funktionalität selbe in einer Child Theme hinzugefügt werden soll ,oder als ein Plugin?
    Gruß
    prajakta

    • Hallo Prajakta,

      ich hoffe, ich habe Deine Frage richtig verstanden: Du möchtest wissen wann ein Plugin sinnvoll ist für das Einfügen von Änderungen und wann ein Child-Theme?

      Ein Child-Theme benötigst Du immer dann, wenn Du Änderungen an den PHP-Dateien Deines Themes vornimmst.

      Wenn Du Anpassungen am Stylesheet (also den CSS-Dateien) vornehmen möchtest gibt es verschiedene Herangehensweisen:

      Hast Du nur einige wenige Anpassungen zu machen, dann kannst Du das entweder in die CSS-Sektion Deines Themes eintragen (wenn es eine solche gibt) oder Du installierst ein Plugin wie z.B. „Simple Custom CSS“.

      Wenn Du aber sehr viele Anpassungen am Aussehen Deiner Website machst ist es sinnvoller dafür ein Child-Theme anzulegen, in das Du die Änderungen einfügen kannst.

      Ich hoffe, das hilft Dir so ein wenig weiter?

      Herzliche Grüße
      Michaela Steidl

  16. Hallo buerosmart,

    erstmal danke für die ausführliche Anleitung.
    Leider ändert sich bei mir am Theme durch die Änderungen nichts.

    Habe mir aus der original style.css die zu ändernden Codeschnippsel in die neue style.css kopiert und so geändert wie ich es haben will.

    Danach die Functions.php erstellt und genau den von dir geschriebenen Inhalt eingefügt.

    Ich benutze das Theme Seopress, kann es sein das man mit deisem kein Childtheme erstellen kann?

    LG
    levant

    • Hallo levant,
      taucht das neu angelegte Child-Theme denn unter „Design“ – „Themes“ auf?

      Und wenn ja, was passiert wenn Sie das Theme dort aktivieren?

      Herzliche Grüße
      Michaela Steidl

      • Es taucht auf nur wenn ich es aktiviere ändert sich nichts am aussehen des Themes.
        Ich poste mal eben den Inhalt meiner style.css und der functions.php

        style.css:

        /*
        Theme Name: SEOPress Childtheme
        Theme URI: http://www.geblogt.com
        Description: SEOPress Childtheme
        Author: Boris Bergmann
        Author URI: http://www.geblogt.com
        Template: seopress
        Version: 1.0
        Tags:SEOPress, Childtheme
        */

        .widget_sidebar_main .right-widget-title {
        background-color: #3B5998;
        }

        .content-first .content-second h3.the-title {
        background-color: #3B5998;
        }

        .content-first .content-second h1.the-title, .woocommerce .left-content h1.page-title {
        background-color: #3B5998;

        .seopressbtn {
        background-color: #3B5998;
        }

        .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
        background-color: #3B5998;
        }

        .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
        background-color: #3B5998 !important;
        }

        .tagcloud a {
        background-color: #3B5998;
        }

        .tagcloud a::before {
        border-right-color: #3B5998;
        }

        .singletags a {
        background-color: #3B5998;
        }

        .singletags a::before {
        border-right-color: #3B5998;
        }

        .woocommerce .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce .widget_price_filter .ui-slider .ui-slider-range {
        background-color: #3B5998;
        }

        #back-to-top, .seopress_social_widget a {
        background-color: #3B5998;
        }

        #navbar, #navbar ul.dropdown-menu {
        background-color: #3B5998;
        }

        functions.php:

        Evtl. hilft das weiter.
        Wollte nur bestimmte Farben ändern aber es bleiben alle Farben so wie sie standart sind.

        LG
        Boris Bergmann

        • Hallo Boris,

          Du gibst in Deiner CSS als Farbe #3b5998 vor – und wenn ich die Website aufrufe dann sehe ich als Farbe z.B. für die Überschriften der Widgets auch #3b5998 als Hintergrundfarbe.

          Welche Farbe möchtest Du denn auf der Seite angezeigt bekommen?

          Herzliche Grüße
          Michaela

          • Aktuell löse ich die Sache mit dem Custom CSS von Jetpack.
            Aber das ist wie ich finde keine gute Lösung.

            Hatte dir die functions.php auch bei Facebook nochmal geschickt weil ich hier keinen Code schreiben kann oder zu doof dafür bin. xD

            LG
            Boris Bergmann

  17. Schau mal, so werden die Stylesheets in Deinem Theme geladen:

    https://www.dropbox.com/s/fgdh1fa20zsjhek/Screenshot%202016-08-17%2015.35.16.png?dl=0

    Das heißt, die Core-CSS des Parent Themes wird nach der Default-CSS aus dem Child-Theme geladen. Du musst also ALLE CSS-Datein, nicht nur die style.css, aus dem Parent-Theme ins Child übernehmen.

    Allerdings: Wenn Du nur ein paar Layout-Anpassungen hast ist die Vorgehensweise mit der Custom CSS über Jetpack durchaus legitim – das würde ich in dem Fall vermutlich nicht anders machen 🙂

    Herzliche Grüße
    Michaela Steidl

  18. Hallo Michaela,

    Wie müsste ich vorgehen wenn ich eine kleine Änderung in der functions.php des Child Themes vornhemen möchte.?

    Ich habe in meiner originalen Parent-Theme-functions.php aus Seo-gründen die h1 Tags der Screenreader-Texte von h3 auf h1 gesetzt und möchte nun dass diese auch im child-theme gespeichert werden, damit diese Anpassungen nicht bei jeder Aktualisierung erneut verloren gehen bzw. zurückgesetzt werrden.

    Welche Befehle muss ich da in die child-Theme functions.php eingeben? Kannst du mir da helfen, dam nirgens im Netz diese Infos speziell mit änderungen an der functions.php findet.

  19. Das ist sehr gut beschrieben aber für manch einen Einsteiger etwas zu komplex. Einfacher geht das ganze mit dem Plugin: „One-Click Child Theme“ da klickt man einmal und schon hat man ein fertiges Child-Theme.
    Ich bin zwar kein Einsteiger, aber ich nutze das auch nur noch, da es wirklich in wenigen Sekunden alles fertig einrichtet.

    • Hallo Gerd,

      vielen Dank für den Plugin-Hinweis.

      Wer meinen Blog schon länger liest der weiß, dass ich kein „Plugin-Verweigerer“ bin, aber ein Child-Theme anzulegen ist im Prinzip so einfach und in weniger als 15 Minuten erledigt so dass ich denke, das auch Einsteiger gut ohne Plugin zurecht kommen.

      Als Arbeitserleichterung ist das von Dir erwähnte Plugin aber sicher eine gute Idee.

      Herzliche Grüße
      Michaela

  20. Hi Michaela,

    um ein Child-Theme anzulegen stieß ich unmittelbar auf Deine sehr nützliche Beschreibung.

    Ich hatte bereits mit dem Parent-Theme Anpassungen auf der aktuell noch Test-Site https://wir-zwei-bei-de.prossl.de/wordpress/ umgesetzt, also z. B. die Auswahl der Bilder für den Header-Slider, die Darstellung der Beiträge, die Schiftart etc. über den Online-Dialog (…wordpress/wp-admin/customize.php?) angepasst. Die über den Editor erreichbaren Dateien hatte ich noch unberührt gelassen.

    In dem Moment, wenn ich das Child-Theme für mein aktiviere, sind meine oben beschriebenen Anpassungen nicht mehr vorhanden. Um es mal etwas naiv auszudrücken: ist das „normal“ und muss ich die Anpassungen dann erneut für das Child-Theme umsetzen?

    Beim Vergleich von Parent- und Child-Theme mit Chrome-Entwicklertools fiel bei Betrachtung der Sources auf, dass bei dem Child-Theme folgende Quellen geladen (+) und nicht geladen (-) wurden:

    + [Parent-Theme-Verzeichnis]/images
    – [Parent-Theme-Verzeichnis]/js/masonry-init.js
    – [Theme-Verzeichnis]/uploads/2016/11
    – [WordPress-Verzeichnis]/wp-includes/js/-imagesloaded.min.js
    – [WordPress-Verzeichnis]/wp-includes/js/-imagesloaded.min.js

    Kannst Du mir hier bitte weiterhelfen?

    Über Deine kurze Rückmeldung würde ich mich sehr freuen!

    Viele Grüße

    Jens

    • Hallo Jens,

      es ist normal, dass bei einem Theme-Wechsel die über die Theme-Options vorgenommenen Einstellungen nicht immer komplett übernommen werden.

      Bei manchen Themes ist es möglich die Theme-Einstellungen per Export und Import zu übernehmen, bei den anderen wird es vermutlich am einfachsten sein, die Einstellungen für das Child-Theme nochmal neu einzustellen.

      Ich hoffe, das hilft Dir weiter?

      Herzliche Grüße
      Michaela

      • Hi Michaela,

        vielen Dank für Deine Antwort, die mich neben dem Ergebnis weiterer Recherchen einmal mehr bestärkte, nichts falsch gemacht zu haben!

        Für meinen Fall ist es am einfachsten, die ohnehin noch nicht final gewählten Einstellungen nochmal neu auszuwählen.

        Nochmals danke + viele Grüße!

        Jens

  21. Guten Tag Frau Steidl,

    mit Interesse habe ich nicht nur diesen Beitrag gelesen :-).

    Nur eine kurze Information.
    Die Veränderungen an einer Test-Website wurden erst wirksam, nachdem ich
    – das Child Theme explizit aktiviert hatte
    (diesen Hinweis könnte man ergänzen)
    – die functions.php korrigiert habe

    Viele Grüße – Dietmar Mittner

Schreibe einen Kommentar

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


Ich möchte auch den WordPress-Rundbrief abonnieren