WordPress Child Themes

Ein WordPress Child-Theme anlegen – so geht’s richtig

Bisher war es üblich, das Stylesheet (style.css) des Eltern-Themes über den @import-Befehl im Stylesheet des Child-Themes einzubinden. Inzwischen ist das aber nicht mehr die beste Methode, sondern die style.css Datei des Eltern-Themes soll nach der Empfehlung vom WordPress Codex über die functions.php im Child-Theme eingebunden werden. Ich werde kurz erklären, wie das funktioniert.

Die functions.php Datei erstellen

Du benötigst also nicht mehr nur eine style.css Datei und dein screenshot.png Child-Theme Vorschaubild, um mit der Erstellung eines Child-Themes loslegen zu können. Stattdessen musst du in deinem Text-Editor (Notepad++, Coda2, Sublime Text o.ä.) eine functions.php Datei anlegen. In dieser Datei solltest du folgenden Code eintragen, um die style.css Datei des Eltern-Themes einzubinden:

<?php
/**
 * Theme Name child theme functions and definitions
 */

/*—————————————————————————————————————————*/
/* Include the parent theme style.css
/*—————————————————————————————————————————*/

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Jetzt benötigst du noch die style.css Datei, um deine eigenen CSS-Anpassungen oder neue CSS-Styles in dein Child-Theme einzubinden. Die style.css Datei sollte so beginnen:

/*
 Theme Name: Theme Name Child
 Theme URI:
 Description: Theme Name Child Theme
 Author: Your Name
 Author URI: http://www.yourdomain.com/
 Template: yourparentthemetextdomain
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: Theme Name Child Theme
*/

/*
You can start adding your own styles here. Use !important to overwrite styles if needed. */

Hinweis zu den Elmastudio Child-Themes:

Wie haben übrigens auch all unsere Elmastudio Beispiel Child-Theme Ordner mit der neuen Methode upgedatet. Wenn du bereits ein Child-Theme angelegt hast, kannst du dein Child-Theme eigentlich recht einfach updaten.

Dazu musst du lediglich den oben beschriebenen Code in die functions.php einbinden, wenn du schon eine functions.php Datei in deinem Child-Theme hast. Wenn nicht, musst du erst eine neue functions.php Datei anlegen, am einfachsten kannst du dafür unsere functions.php Datei-Vorlage nutzen.

Diesen Code-Schnipsel zu Beginn deiner Child-Theme style.css Datei kannst du dann löschen:

/* This will import the stylesheet from the Theme Name parent theme */
@import url('../yourthemename/style.css');
Dein Feedback und deine Fragen

Hast du weitere Tipps zum Thema Child-Theme oder offene Fragen? Dann schreib doch einfach einen Kommentar zum Artikel, wir freuen uns schon auf deine Nachricht!

Weitere hilfreiche Links zum Thema:
Child Theme-Info auf der WordPress.org-Webseite

22 Kommentare

  1. Von der Performance betrachtet, war das mit dem @import übrigens noch nie eine gute Idee, da erst ein Stylesheet geparst, dann die @imports geladen, die geparst und dann in der Cascade nach oben geschoben werden mussten, was uU einen kompletten Repaint der Seite auslöst.

    Ansonsten: Gern geschehen. ;-)

  2. Merlin 1. Mai 2015

    Hey Ellen, was ist ein Child-Theme und in welchen Fällen kommt ein Child Theme zum Einsatz? Ich setze eines Eurer Themes ein und bin mir nicht sicher ob das Thema für mich relevant ist.
    Viele Grüße, Merlin

    • Ich bin zwar nicht Ellen, und der Post ist schon 7 Monate alt, aber die Frage kommt öfter, daher hier die Antwort: Childthemes sind Kopien eines Themes, die man individualisieren, modifizieren und adaptieren kann, ohne das Originaltheme zu verändern. Ein (blödes) Beispiel: Du klonst ein Schaf und malst das 2. Schaf grün an. Beide Schafe sind identisch, nur das 2. ist halt grün. Childthemes kommen immer dann zum Einsatz, wenn Du ein Theme hast, dass Dir zwar grundsätzlich gefällt, du aber Kleinigkeiten anpassen möchtest, ohne Plugins zu nutzen oder im Code herumzudoktern. Childthemes machen auch Sinn, wenn du programmieren lernen und oder herumprobieren möchtest. Zu guter letzt werden Childthemes eingesetzt, wenn Du verhindern möchtest dass Updates des Originalthemes deine händischen Änderungen überschreiben.

  3. Sehr interessant, danke dafür.

    Ich hatte bisher immer bei Childs immer das Problem, dass eine functions.php im Child-Ordner das Theme zerschoss :D

    • Ach, was mir einfiel als Frage zu Childs:

      Ist es irgendwie möglich bestimmte CSS-Definitionen zu Reseten?

      Also wenn ich beim Zuki zum Beispiel die Font ändern will, muss ich ja bisweilen alle Classes überschreiben, kann ich aber irgendwie dem sagen „Wenn font-family: blablabla, dann ändern zu font-family: blublublu“?

  4. Hi Ellen,

    da wp_enqueue_styles die Styles im wp_head() aufruft ergibt diese neue Lösung bei den Child-Themes für die älteren Themes (Baylys, Bugis, Kerikeri, Meola, Nilmini, Nori, Piha, Pohutukawa, Tatami, Waipoua) allerdings keinen Sinn. Denn in diesen Themes wird durch den Direktaufruf über bloginfo( ’stylesheet_url‘ ) ja jetzt *zuerst* das Child-Theme aufgerufen und erst danach im wp_head-Aufruf das CSS des Eltern-Themes, welches eigentlich überschrieben werden sollte. Das ist aber bei dieser Reihenfolge der Stylesheet-Daten nicht mehr richtig möglich (bzw. nur durch haufenweise !important).

    Richtig großartig wäre eine Überarbeitung der alten Themes mit der Technik von Justin Tadlock:
    http://justintadlock.com/archives/2014/11/03/loading-parent-styles-for-child-themes

  5. Hi Ellen,

    vielen Dank für das Update. Ich nutze das Yoko Theme von euch und würde das gerne mit Hilfe eines Child Themes meinen Vorstellungen anpassen. In diesem Artikel schreibst du, dass ihr den Beispiel Child-Theme Ordner upgedated hättet.
    Wo finde ich diesen?

  6. Hallo,
    also so einfach geht das gar nicht. Es wäre evtl. hilfreich was man macht wenn es mehrere CSS-Dateien gibt?

  7. Es ist in der Tat nicht so einfach! Child-Themes werden bei mir nicht mehr angezeigt. Stattdessen erhalte ich Fehlermeldungen

    „Beschädigte Themes
    Die folgenden Themes sind installiert, aber nicht vollständig. Themes müssen ein Stylesheet und ein Template haben.“

    Eben – das haben sie doch!

  8. Ich werd‘ verrückt! Ich habe das CSS doch tatsächlich in Gedanken mit dem Namen styles.css gespeichert. Richtig ist es natürlich style.css! Oh Mann…, der Abend war lang gestern.

  9. Hallo Ellen
    Dein Artikel hat mich gerade etwas verunsichert. Bisher habe bei meinen WordPress-Sites nicht diese Lösung verwendet sondert den alten Weg mit dem Einbinden über den @import-Befehl.
    Muss ich dies nun zwingend nach Neu machen respektive sind Probleme zu erwarten, wenn ich dies nicht so mache?
    Viele Grüsse
    Charlie

  10. mit der functions.php komme ich noch nicht ganz klar – es heißt immer noch, Template fehle.

    Könnte es sein, dass ich irgendwo in dem angegebenen code etwas theme-spezifisches eingeben sollte (sorry, bin völliger Anfänger) – Danke für Hilfe!!

  11. Hallo, vielen Dank für die hilfreichen Tipps auf Deiner Seite.
    In welches Verzeichnis lege ich die neue „style.css“ und die „function.php“ des Child-Themes?
    Ich habe einen Ordner erstellt mit dem Themename-Child und sie da reingespeichert – aes tut sich so aber nichts! Habe ich das falsch geamacht?
    viele Grüße
    Susanne

  12. Hallo zusammen .
    Ich versuche gerade ein child theme für mein aktuelles theme“sugar-and-spice“ zu erstellen ….

    Beide Dateien habe ich wie oben beschrieben erstellt im child ordner….

    Mein Problem ist das ich z.B. im original Theme an der Datei header.php gebastelt habe.
    Dies wird nun nicht angezeigt wenn ich mein child theme aktiviere….
    Ich habe auch versucht die datei header.php aus dem original theme ordner in meinen child ordner zu kopieren… Aber auch dies brachte keinen erfolg…. Wie kann ich nun meine änderungen in mein neues Childtheme übernehmen ?

    Zudem stelle ich mir immer noch die Frage :
    Warum ein Child theme nutzen ?
    Ist es nicht einfach möglich die automatische Updatefunktion von für Themeupdate zu unterbinden ? bzw. komplett alles updates zu unterbinden von WordPress ? Wenn ich meine Seite einmal fertig habe hätte ich ungern das bei einem update von wordpress oder dem theme alles zerschossen wird!

    Danke im voraus
    Mike

  13. Hallo,
    ich will meine erste Homepage entwerfen und das ist für mich alles ziemliches Neuland. Ich möchte ein Child Theme für das Theme Virtue anlegen. Kann mir jemand bitte hierzu ein Beispiel functiond.php. sheet erstellen?!
    (Notepad++, Coda2, Sublime Text o.ä.) Was ist denn hier mit gemeint? Sorry wie gesagt ich kenne mich mit Programmierung überhaupt nicht aus. Ich will nur dieses Child Theme anlegen, damit ich die Schrift und die Schriftgröße in meinem Theme Virtue ändern kann. Würde mich über eure Hilfe freuen. LG

  14. Hi,
    ich hab hier leider eine wirkliche Anfängerfrage. Bedauerlicherweise konnte ich dazu nirgends etwas nachlesen.
    Meine Frage:
    Ist das Child Theme das AKTIVIERTE Theme, oder ist das Parent Theme das aktive?
    und:
    Wenn es ein Theme update gibt, datet man dann auch das Child Theme ab? (Mein Theme hat bereits beim Kauf beide Versionen mitgeliefert, Child- und Parent Theme).
    Würde mich sehr freuen, wenn mir hier jemand meine Wissenslücke schließen könnte.

  15. Moin,

    soweit bin ich gekommen, dass das CHILD die PARENT styles übernimmt. Nun komme ich aber zu dem Problem, dass in meinem PARENT einige Dateien / Bilder genutzt werden z.B. für den Header oder bei Verlinkungen auf PDF-Dateien.

    Wie bekomme ich diese auch ins Kind?

    Besten Dank im Voraus

  16. Ich dachte erst mein Child- theme funktioniert doch nach einen Update des Parent- themes sind viele meiner Änderungen wieder verloren gegangen.

    Bei mir lädt er scheinbar die style.css vom Parent- theme, obwohl angezeigt wird dass es die style.css vom Child- theme geladen wird. Ich seh da aber allerdings beim Editor von WordPress gar keine Codes obwohl ich wenn ich mir die Datei so angucke alles sichtbar ist. Kann es daran liegen, dass ich den kompletten Inhalt der stlye.css einfach kopiert habe und in die der Child-theme style.css eingefügt habe?
    Die style.css die im Child- theme vorhanden ist beinhaltet natürlich meine persönlichen Änderungen (vor dem Update).

    LG.

  17. Hallo liebes Elmateam,

    leider bin ich nicht dazu in der Lage ein das Dorayaki Childtheme zu installieren….

    1. Installation Parenttheme
    2. Installation Childtheme
    3. Folgende Fehlermeldung:

    Beschädigte Themes

    Die folgenden Themes sind installiert, aber nicht vollständig. Themes müssen ein Stylesheet und ein Template haben.
    Name Beschreibung
    Dorayaki Child Das übergeordnete Theme fehlt. Bitte installiere das übergeordnete Theme „dorayaki“, da du Child-Themes sonst nicht nutzen kannst.

    Was mache ich falsch?

    Es wäre super, wenn ich hier Hilfe bekomme.

    Viele Grüße
    Maike Reinberger

  18. Hallo zusammen,

    eine Frage: Ich habe vor Jahren eine Website/ Blog mit WordPress erstellt. Damals kannte ich mich nicht aus und habe dummerweise auch kein Child Theme erstellt. Dennoch habe ich einige Plugins installiert und im CSS File herumgebastelt um Anpassungen vorzunehmen. Nun würde ich aber gerne mein Theme und WordPress mal aktualisieren – trau mich aber nicht, weil ich nicht will, dass alle Änderungen verloren gehen.

    Kann man das Child-Theme im Nachhinein erstellen?
    Oder wie würdet ihr die Sache angehen.

    Danke für eure Tipps dazu!!

    Liebe Grüße,

    Tamara

  19. Guten Abend,

    wenn ich mein Child-Theme aktiviert habe und SSl-verschlüsselt aufrufe, erhalte ich von meinem Browser die Meldung, dass die Verbindung nur teilweise verschlüsselt ist. Woran liegt das? Wie kann ich diesbezüglich Abhilfe schaffen?

Hinterlasse eine Antwort

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