Cómo incluir los estilos CSS en el tema hijo

Cuando se crea un tema hijo en WordPress, hay que tener unas cuantas cosas presentes, pero la más importante es quizás tener en cuenta que hay que importar los estilos CSS del tema padre. Entonces, la pregunta clara es: ¿cómo incluirlos en el tema hijo?

Cómo no hacerlo

La forma más sencilla y que más fácilmente se encuentra en Internet es la de usar la regla @import en el archivo style.css del tema hijo:

@import url('../mi_tema/style.css');

Esa forma no es la recomendada actualmente, debido a que aumenta el tiempo de carga de la página web y no funciona bien en navegadores antiguos.

La manera correcta

La forma correcta de incluir estilos CSS en un tema hijo es la siguiente. Nota: si utilizas un tema de bloques (block theme en inglés), muchos estilos se controlan mediante theme.json y style.css puede ser opcional; si añades CSS personalizado a style.css en un tema hijo, asegúrate de incluirlo como se muestra a continuación.

Entonces, la forma correcta de incluir los estilos CSS en el tema hijo es la siguiente:

1. Abrimos el archivo functions.php de nuestro tema hijo.
2. Añadimos el siguiente código:

 /* Importando estilos CSS del tema padre */
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );
function child_enqueue_styles() {
    wp_enqueue_style(
        'parent-style',
        get_parent_theme_file_uri( 'style.css' ),
        array(),
        wp_get_theme()->parent()->get( 'Version' )
    );
    wp_style_add_data( 'parent-style', 'rtl', 'replace' );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_uri(),
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
    wp_style_add_data( 'child-style', 'rtl', 'replace' );
}

El código anterior añade primero el archivo style.css del tema padre y luego el del tema hijo, lo que hace que los estilos del tema hijo se carguen después de los del tema padre. Para idiomas que se escriben de derecha a izquierda, como el hebreo o el árabe, configura cada hoja de estilos para que cargue automáticamente su equivalente -rtl si existe (por ejemplo, style-rtl.css tanto en el tema padre como en el tema hijo).

(Fuentes: Ulrich y el propio WordPress)