Crear un tema hijo (child theme) en WordPress

/ DOCUMENTACIÓN, NOVEDADES / Por

Un tema hijo o secundario es un tema que hereda la funcionalidad y el estilo de otro tema ya existente llamado padre o principal.

Los temas hijo son la forma recomendada de modificar un tema WordPress existente.

¿Por qué usar un tema hijo?

Entre otras razones, por las siguientes:

  • Si modificas un tema existente y se actualiza, tus cambios se perderán. Con un tema hijo, puedes subir el tema padre (que puede ser importante por cuestiones de seguridad o funcionalidad) y seguir manteniendo los cambios.
  • Puede acelerar el tiempo de desarrollo.
  • Es una buena forma de empezar si se está empezando a aprender sobre desarrollo de temas WordPress.

¿Cómo crear un tema hijo?

Un tema hijo consta de al menos un directorio (el directorio de tema hijo) y dos archivos (style.css y functions.php), siendo necesario crear por tanto:

  • El directorio del tema hijo.
  • El archivo style.css
  • El archivo functions.php

El primer paso para crear un tema secundario es crear el directorio del tema hijo, que se colocará en wp-content/themes.
Aunque no es obligatorio, se recomienda, especialmente si estás creando un tema para uso público, que al nombre del directorio del tema hijo se agregue ‘-child’. También deberás asegurarte de que no haya espacios en el nombre del directorio del tema hijo, lo que puede generar errores. En la captura de pantalla hemos llamado a nuestro tema hijo “twentyfifteen-child”, lo que indica que el tema principal es el tema Twenty Fifteen.

El siguiente paso es crear la hoja de estilo del tema hijo (style.css). La hoja de estilo debe comenzar con lo siguiente (el encabezado de la hoja de estilo):

 /* 
Theme Name:   Twenty Fifteen Child Theme
URI:    http://example.com/astra-child/ 
Description:  Astra Child 
Theme Author:       Desarrollosweb 
URI:   http://ejemplo.com 
Template:     Astra 
Version:      1.0.0 
Tags:   light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready 
*/ 

/* Aquí tus regals CSS */

Dos cosas importantes respecto al encabezado de la hoja de estilo:

  • Deberás reemplazar el texto del ejemplo con los detalles de tu tema hijo.
  • La línea Template corresponde al nombre de directorio del tema padre. El tema padre en nuestro ejemplo es el tema Twenty Fifteen, por lo que Template será twentyfifteen que es el nombre de su directorio. Como lo normal es que estés trabajando con un tema principal diferente, deberás ajustar esta línea.

El último paso es poner en cola las hojas de estilo de los temas padre e hijo.

Antes, el método era importar la hoja de estilo del tema principal utilizando @import, pero esto ya no se considera una buena práctica porque aumenta el tiempo de carga de las hojas de estilo. El método correcto para poner en cola la hoja de estilo del tema principal es agregar una acción wp_enqueue_scripts y usar wp_enqueue_style() en el archivo functions.php del tema hijo. Por lo tanto, deberás crear un archivo functions.php en el directorio del tema secundario.

La primera línea del archivo functions.php de tu tema hijo será una etiqueta PHP de apertura (<?php), después de la cual podrás poner en cola las hojas de estilo del tema principal y secundario:

<?php
 
add_action( 'wp_enqueue_scripts', 'theme_slug_enqueue_styles' );
function theme_slug_enqueue_styles() {
 
    $parent_style = 'parent-style'; // Esto será 'twentyfifteen-style' para el tema Twenty Fifteen.
 
    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')
    );
}
 
/* Aquí tus funciones personales */
?>

En el código de arriba parent-style es el mismo $handle que usa el tema principal cuando registra su hoja de estilo. Por ejemplo, si el tema principal es Twenty Fifteen, al buscar en su archivo functions.php la llamada a wp_enqueue_style(), verás que la etiqueta que usa allí es “twentyfifteen-style”. En el codigo del tema hijo, deberás reemplazar parent-style por twentyfifteen-style.

Si no se utiliza la etiqueta adecuada, se cargará innecesariamente el archivo CSS dos veces. Esto generalmente no afectará la apariencia del sitio, pero es ineficiente y aumenta el tiempo de carga de tu página.

Ahora, el tema hijo ya está preparado para ser activado. Inicia sesión en tu sitio y ve a Apariencia > Temas, donde debería encontrarse el tema listo para ser activado.

Top