WordPress Child-Theme-Styles werden nicht geladen
Die style.css deines Child-Themes wird nicht geladen, weil WordPress sie nicht für dich einbindet. Das Stylesheet des Child-Themes muss von Hand in der
Veröffentlicht
Die style.css deines Child-Themes wird nicht geladen, weil WordPress sie nicht automatisch für dich einbindet. Das Stylesheet des Child-Themes muss von Hand in der functions.php des Child-Themes registriert werden, und bei diesem Enqueue steckt fast immer einer von zwei Fehlern: Entweder er fehlt komplett, oder er lädt, ohne das Parent-Stylesheet als Abhängigkeit anzugeben – dann landen deine Regeln an der falschen Stelle in der Kaskade und werden überschrieben. Korrigiere den Enqueue, und die Styles kommen zurück. Der alte @import-Trick, den du wahrscheinlich aus irgendeinem Tutorial von 2013 kopiert hast, ist die falsche Lösung.
Warum das passiert
Ein klassisches Child-Theme besteht aus zwei Pflichtdateien: einer style.css mit einem Header-Block, der das Parent benennt, und einer functions.php. Die Template:-Zeile im Header sagt WordPress, von welchem Parent die Templates geerbt werden sollen. Das ist das Einzige, was WordPress automatisch erledigt. Es liest den Header, richtet den Template-Fallback ein – und hört dann auf. Deine style.css des Child-Themes wird im Frontend niemals eingebunden.
Das Parent-Theme wiederum bindet sein Stylesheet aus seiner functions.php ein, angehängt an den Hook wp_enqueue_scripts. Deine functions.php im Child läuft zuerst, dann die des Parents, dann feuert alles an diesem Hook. Wenn dein Child nie wp_enqueue_style für seine eigene Datei aufruft, fordert der Browser sie auch nie an. Die Seite sieht aus wie das nackte Parent-Theme, weil sie genau das ist.
Der zweite Fehler ist subtiler. Du bindest das Child-Stylesheet ein, es lädt, aber deine Overrides bewirken nichts. Das ist ein Ladereihenfolge-Problem. Wenn zwei Regeln die gleiche Spezifität haben, gewinnt die, die zuletzt geladen wird. Lädt dein Child-CSS vor dem des Parents, gewinnt das Parent jeden Gleichstand. Das Abhängigkeits-Array bei wp_enqueue_style ist das, was die Reihenfolge erzwingt.
Noch etwas, das viele falsch machen: get_template_directory_uri() zeigt auf den Ordner des Parent-Themes, und get_stylesheet_directory_uri() zeigt auf den Ordner des aktiven (Child-)Themes. Vertausche sie, und du bindest die style.css des Parents ein zweites Mal ein und rührst die des Childs nie an.
Die Lösung, der Reihe nach
Prüfe zuerst, was tatsächlich geladen wird. Öffne die kaputte Seite, schau in den Quelltext und suche nach dem Ordnernamen deines Child-Themes. WordPress rendert eingebundene Styles als <link id="handle-css" href="..."> – die id ist dein Handle plus -css. Wenn die style.css deines Childs überhaupt nicht im <head> steht, läuft der Enqueue nicht. Steht sie da, greifen aber die Styles nicht, ist es ein Abhängigkeits- bzw. Reihenfolgeproblem. Dieser eine Check verrät dir, welchen der beiden Fehler du hast.
Finde als Zweites das echte Handle des Parents. Die meisten modernen Themes (Astra, GeneratePress, die Twenty-*-Themes) binden ihr eigenes Stylesheet bereits unter einem bestimmten Handle ein – astra-theme-css, generate-style-css, twenty-twenty-four-style und so weiter. Du brauchst genau diese Zeichenkette. Grep das Parent-Theme, oder lies sie am <link id="...-css"> im Quelltext ab (lass das abschließende -css weg).
Schreib als Drittes den Enqueue. Für den häufigen Fall, dass das Parent sein eigenes Stylesheet bereits lädt, bindest du das Parent nicht erneut ein. Du bindest nur das Child ein und gibst das Handle des Parents als Abhängigkeit an, damit deins danach lädt:
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 20 );
function child_enqueue_styles() {
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'astra-theme-css' ), // <-- the parent's REAL handle
wp_get_theme()->get( 'Version' )
);
}Wenn das Parent-Theme sein eigenes Stylesheet nicht einbindet (manche älteren oder minimalistischen Themes setzen auf @import), dann binde beide ein und lass das Child vom Parent abhängen:
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );
function child_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' ),
wp_get_theme()->get( 'Version' )
);
}Das Argument wp_get_theme()->get('Version') ist dein Cache-Buster. Erhöhe die Version:-Zeile im Header der style.css des Childs, und Browser laden neu. Lässt du es weg, änderst du CSS und schwörst, dass sich nichts tut – dabei ist es nur gecacht.
Wenn die functions.php einen Syntaxfehler hat, stirbt die ganze Datei stillschweigend und keiner deiner Enqueues läuft – das sieht genau nach „Styles werden nicht geladen“ aus. Schalte WP_DEBUG ein, oder füge deine debug.log in unseren WordPress Error-Log-Decoder ein, um den kritischen Fehler schnell zu finden.
Was du nicht tun solltest
Nutze kein @import. Der Ratschlag aus der Codex-Ära war, @import url("../parenttheme/style.css"); an den Anfang der style.css des Childs zu setzen. Es funktioniert, aber es ist langsam – der Browser kann das Parent-CSS erst herunterladen, wenn er das Child-CSS geparst hat, also laufen die beiden Requests nacheinander statt parallel. WordPress’ eigenes Handbuch rät seit Jahren davon ab. Wenn dein Tutorial dir das empfohlen hat, ist genau dieses Tutorial der Grund, warum deine Styles ruckeln.
Codiere das Handle 'parent-style' nicht fest und binde die Parent-Datei nicht blind ein. Das berühmte Codex-Snippet macht genau das, und es ist falsch für jedes Theme, das sein Stylesheet bereits unter einem anderen Handle registriert. Du lädst am Ende das Parent-CSS doppelt, und deine Abhängigkeit zeigt auf ein Handle, das möglicherweise gar nicht existiert.
Rufe wp_enqueue_style nicht auf der obersten Ebene der functions.php auf. Es muss innerhalb einer Funktion laufen, die an wp_enqueue_scripts gehängt ist. Zu früh aufgerufen, tut es nichts.
Kopiere nicht die komplette functions.php des Parents ins Child. Beide werden geladen; die des Childs läuft zuerst. Kopieren führt zu doppelten Funktionsdeklarationen und einem kritischen Fehler.
Ein Vorbehalt: Das alles gilt für klassische (PHP-Template-)Themes. Wenn dein Parent ein Block-Theme ist, läuft das Styling größtenteils über theme.json und den Site-Editor, und style.css-Overrides verhalten sich anders – da würde ich weniger darauf vertrauen und es direkt testen, statt anzunehmen, dass dieser Enqueue die Lösung ist.
Immer noch festgefahren?
Vergewissere dich, dass die Template:-Zeile im Header der style.css des Childs exakt dem Ordnernamen des Parents entspricht, Groß-/Kleinschreibung beachten – nicht dem Anzeigenamen des Parents. Prüfe dann erneut den Quelltext: Handle vorhanden, lädt nach dem Parent, Versions-Query-String erhöht. Wenn der <link> da ist, zuletzt lädt und das CSS trotzdem nicht greift, ist es kein Enqueue-Problem mehr – dann ist es Spezifität, und die Lösung wandert in die Regeln selbst.