Los estilos del tema hijo de WordPress no cargan

El style.css de tu tema hijo no carga porque WordPress no lo encola por ti. La hoja de estilos del tema hijo hay que registrarla a mano en el functions.php del tema hijo, y ese encolado casi siempre tiene uno de dos fallos: o no está, o carga sin declarar la hoja de estilos del tema padre como dependencia, así que tus reglas caen en el sitio equivocado de la cascada y quedan sobrescritas. Corrige el encolado y los estilos vuelven. El viejo truco del @import que seguramente copiaste de un tutorial de 2013 es la solución equivocada.

Por qué ocurre

Un tema hijo clásico son dos archivos obligatorios: un style.css con un bloque de cabecera que nombra al padre, y un functions.php. La línea Template: de la cabecera le dice a WordPress de qué padre heredar las plantillas. Eso es lo único que WordPress hace automáticamente. Lee la cabecera, monta el sistema de plantillas de respaldo y para. Nunca encola tu style.css hijo en el front end.

El tema padre, por su parte, encola su hoja de estilos desde su functions.php, enganchado a wp_enqueue_scripts. Tu functions.php hijo se ejecuta primero, luego el del padre, y después se dispara todo lo que hay en ese hook. Si tu hijo nunca llama a wp_enqueue_style para su propio archivo, el navegador nunca lo pide. La página se ve como el tema padre en crudo porque es exactamente eso.

El segundo fallo es más sutil. Encolas la hoja de estilos hija, carga, pero tus sobrescrituras no hacen nada. Es un problema de orden de carga. Cuando dos reglas tienen la misma especificidad, gana la que carga la última. Si tu CSS hijo carga antes que el del padre, el padre gana cada empate. El array de dependencias de wp_enqueue_style es lo que fuerza el orden.

Una cosa más que la gente confunde: get_template_directory_uri() apunta a la carpeta del tema padre, y get_stylesheet_directory_uri() apunta a la carpeta del tema activo (el hijo). Si los intercambias, encolas el style.css del padre por segunda vez y nunca tocas el del hijo.

La solución, paso a paso

Primero, confirma qué se está cargando de verdad. Abre la página rota, mira el código fuente y busca el nombre de la carpeta de tu tema hijo. WordPress renderiza los estilos encolados como <link id="handle-css" href="..."> — el id es tu handle más -css. Si tu style.css hijo no aparece en el <head> para nada, el encolado no se está ejecutando. Si está pero los estilos no se aplican, es un problema de dependencia/orden. Esta simple comprobación te dice cuál de los dos fallos tienes.

Segundo, encuentra el handle real del padre. La mayoría de los temas modernos (Astra, GeneratePress, los temas Twenty-*) ya encolan su propia hoja de estilos bajo un handle concreto — astra-theme-css, generate-style-css, twenty-twenty-four-style, etc. Necesitas esa cadena exacta. Haz un grep del tema padre, o léela del <link id="...-css"> en el código fuente (quítale el -css del final).

Tercero, escribe el encolado. Para el caso común en que el padre ya carga su propia hoja de estilos, no vuelves a encolar el padre. Solo encolas el hijo y pones el handle del padre como dependencia para que el tuyo cargue después:

<?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' )
    );
}

Si el tema padre no encola su propia hoja de estilos (algunos temas antiguos o minimalistas se apoyan en @import), entonces encola ambos y haz que el hijo dependa del padre:

<?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' )
    );
}

El argumento wp_get_theme()->get('Version') es tu rompecachés. Sube la línea Version: en la cabecera del style.css del hijo y los navegadores vuelven a descargarlo. Sáltatelo y editarás CSS jurando que nada cambia cuando solo está cacheado.

Si el functions.php tiene un error de sintaxis, el archivo entero muere en silencio y ninguno de tus encolados se ejecuta — y eso se presenta exactamente como “los estilos no cargan”. Activa WP_DEBUG, o pega tu debug.log en nuestro descodificador de logs de error de WordPress para localizar el fatal rápido.

Qué no hacer

No uses @import. El consejo de la era del Codex era poner @import url("../parenttheme/style.css"); al principio del style.css hijo. Funciona, pero es lento — el navegador no puede empezar a descargar el CSS del padre hasta que ha parseado el CSS del hijo, así que las dos peticiones van en serie en vez de en paralelo. El propio manual de WordPress lleva años desaconsejándolo. Si tu tutorial te dijo que hicieras esto, ese tutorial es el motivo de que tus estilos vayan a trompicones.

No fijes a mano el handle 'parent-style' ni encoles el archivo del padre a ciegas. El famoso snippet del Codex hace exactamente esto, y está mal para cualquier tema que ya registre su hoja de estilos bajo un handle distinto. Acabas cargando el CSS del padre dos veces y tu dependencia apunta a un handle que quizá no existe.

No llames a wp_enqueue_style en el nivel superior de functions.php. Tiene que ejecutarse dentro de una función enganchada a wp_enqueue_scripts. Llamado demasiado pronto, no hace nada.

No copies el functions.php entero del padre en el hijo. Ambos se cargan; el del hijo va primero. Copiarlo provoca declaraciones de función duplicadas y un fatal error.

Una salvedad: todo esto va de temas clásicos (de plantilla PHP). Si tu padre es un tema de bloques, el estilo fluye sobre todo a través de theme.json y el Editor del sitio, y las sobrescrituras de style.css se comportan de otra forma — de eso me fiaría menos y lo probaría directamente en vez de dar por hecho que este encolado es la solución.

¿Sigues atascado?

Confirma que la línea Template: de la cabecera del style.css del hijo coincide exactamente con el nombre de la carpeta del padre, distinguiendo mayúsculas y minúsculas — no con el nombre visible del padre. Luego vuelve a revisar el código fuente: handle presente, cargando después del padre, cadena de consulta de versión subida. Si el <link> está ahí, cargando el último, y el CSS aún no se aplica, ya no es un problema de encolado — es de especificidad, y la solución se traslada a las propias reglas.