No tenía planeado hacer un tutorial sobre la creación de temas hijos, pero como son muchas las consultas que me llegan al respecto decidí preparar esta entrada, que es básicamente una traducción de la sección Child Themes del Codex de WordPress, más un par de referencias a algunos recursos útiles que complementan esa información esencial.

En primer lugar…

¿Qué son los temas hijos?

Son temas que heredan la funcionalidad y estilos de otro tema, llamado “tema padre”. Los temas hijos son la manera recomendada de modificar un tema existente.

¿Por qué usar un tema hijo?

Existen varias razones por las cuales es práctica recomendada:

  • Si modificamos un tema directamente y es actualizado, perderemos todos los cambios que hayamos hecho. Al usar un tema hijo, nos aseguramos de que los cambios se conserven.
  • Usar un tema hijo puede acelerar el tiempo de desarrollo.
  • Usar un tema hijo es la mejor manera de aprender sobre el desarrollo en WordPress.

¿Cómo crear un tema hijo?

Estructura de los temas hijos

Un tema hijo consta al menos de un directorio (el directorio del tema hijo), y dos archivos: style.css y functions.php, los cuales tendremos que crear.

El primer paso es crear un directorio para el tema hijo, que estará dentro de la carpeta /wp-content/themes. Se recomienda (aunque no es obligatorio, en especial si creamos un tema para uso público) que el nombre del directorio del tema hijo tenga como apéndice el término “-child”. Ejemplo, si estamos creando un tema hijo para Twenty Sixteen, la carpeta se llamaría twentysixteen-child.

Tendremos que asegurarnos de que el nombre del directorio no contenga espacios (ni caracteres especiales), ya que esto podría ocasionar errores. En la imagen de ejemplo, hemos denominado nuestro tema hijo “twentysixteen-child” para indicar que el tema padre es Twenty Sixteen.

El siguiente paso es crear la hoja de estilos (style.css), la cual debe comenzar con el siguiente encabezado:

/*
Theme Name:   Twenty Sixteen Child
Theme URI:    http://ejemplo.com/twenty-sixteen-child/
Description:  Twenty Sixteen Child Theme
Author:       Juan Pérez
Author URI:   http://ejemplo.com
Template:     twentysixteen
Version:      1.0.0
License:      GNU General Public License v2 o superior
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-sixteen-child
*/

Aquí un par de cosas para tener en cuenta:

  • Tendremos que reemplazar los textos de ejemplo con los datos correspondientes a nuestro tema.
  • La línea Template pertenece al nombre del directorio del tema padre. El tema padre de nuestro ejemplo es Twenty Sixteen, así que Template será twentysixteen. En el caso de usar otro tema padre, recordar usar el nombre de la carpeta que corresponda.
  • El único archivo que se requiere en un tema hijo es style.css, pero functions.php es necesario para incluir los estilos de manera correcta.

El paso final es incluir los estilos del tema padre y del tema hijo. Aclaremos que el método anterior era importar la hoja de estilos del tema padre con @import. Esta ya no es una práctica recomendada, debido a que aumenta el tiempo de carga de las hojas de estilo. El método correcto para incluir la hoja de estilos del tema padre es agregar una acción wp_enqueue_scripts y usar wp_enqueue_style() en el archivo functions.php del tema hijo. Por lo tanto, tendremos que crearlo necesariamente. La primera línea del archivo debe ser una etiqueta PHP de apertura (<?php), después de la cual incluiremos las hojas de estilo del tema padre y del tema hijo. El siguiente ejemplo solo funciona si el tema padre usa únicamente un archivo style.css principal para contener todo el código CSS. Si el tema hijo tiene más de un archivo .css (por ejemplo, ie.css, style.css, main.css), debemos asegurarnos de mantener todas las dependencias del tema padre.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Si el archivo style.css del tema hijo ya contiene código CSS (como ocurre por lo general), también tendremos que incluirlo. Asignando ‘parent-style‘ como dependencia garantizará que la hoja de estilos del tema hijo cargue después de la del tema padre. Incluir el número de versión asegura que también se pueda quebrar la caché para el tema hijo (esto es, decirle al navegador que descargue una nueva versión de la hoja de estilos si es que fue actualizada). El ejemplo completo se convertirá en:

<?php
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; // Este es 'twentysixteen-style' para the el tema Twenty Sixteen.
    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')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

El tema hijo ya está listo para ser activado. Si vamos al panel de administración de WordPress, en el menú Apariencia > Temas, veremos el tema hijo en la lista y podremos activarlo.

Nota: es probable que tengamos que volver a guardar el menú (desde Apariencia > Menús o Apariencia > Personalizar > Menús) y las opciones del tema (incluidos el fondo y la imagen de cabecera), luego de activar el tema hijo.

Archivos de plantilla

Si queremos cambiar más que los estilos, el tema hijo puede sobrescribir cualquier archivo presente en el tema padre: tan solo hay que incluir un archivo con el mismo nombre en el directorio del tema hijo, el cual sobrescribirá el archivo equivalente del directorio del tema padre cuando cargue el sitio. Por ejemplo, si queremos cambiar el código PHP de la cabecera del sitio, podemos incluir un archivo header.php en el directorio del tema hijo y ese archivo se usará en lugar de header.php del tema padre.

También se pueden incluir archivos que no estén presentes en el tema padre. Por ejemplo, podríamos crear una plantilla más específica que alguna de las que se encuentren en el tema padre, como podría ser una plantilla de página o un archivo de categoría.

El archivo functions.php

A diferencia de style.css, functions.php del tema hijo no sobrescribe su contraparte del tema padre. Por el contrario, es cargada como adicional (para ser específicos, se carga justo antes del archivo del tema padre).

En ese sentido, functions.php de un tema hijo proporciona un método inteligente y libre de problemas para modificar la funcionalidad del tema padre. Digamos que queremos agregar una función PHP al tema. La manera más rápida sería abrir el archivo functions.php y colocar la función ahí dentro. Pero eso no es lo correcto, porque cuando se actualice el tema la función desaparecerá. Existe una alternativa y método correcto: crear un tema hijo y añadir la función en su respectivo archivo functions.php. La función hará exactamente el mismo trabajo desde allí, con la ventaja de que no será afectada por las futuras actualizaciones del tema padre. Importante: no debemos copiar el contenido del archivo functions.php del tema padre al del tema hijo.

La estructura de functions.php es simple: una etiqueta PHP de apertura al principio, y a continuación el código PHP personalizado. Allí podemos colocar las pocas o muchas funciones que queramos. El siguiente ejemplo muestra un archivo functions.php básico que nada más hace algo sencillo: añadir un enlace al favicon en el elemento HTML <head> de las páginas.

<?php // Etiqueta PHP de apertura - no hay que colocar absolutamente nada antes, ni siquiera espacios en blanco
// Función personalizada para incluir
function my_favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );

Un consejo para desarrolladores de temas: el hecho de que el archivo functions.php del tema hijo se cargue primero implica que las funciones del tema se puedan hacer “enchufables”. Esto quiere decir que se pueden reemplazar por las del tema hijo declarándolas de manera condicional. Por ejemplo:

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Hacer algo.
    }
}

De esa manera, el tema hijo puede reemplazar una función PHP del tema padre simplemente declarándola de antemano.

Referir / Incluir archivos en el tema hijo

Cuando necesitemos incluir archivos que residan dentro de la estructura del directorio del tema hijo, usaremos get_stylesheet_directory(). Ya que el archivo style.css del tema padre es reemplazado por style.css del tema hijo, y style.css reside en la raíz del subdirectorio del tema hijo, get_stylesheet_directory() apunta a ese directorio y no al directorio del tema padre.

Aquí hay un ejemplo con require_once, que muestra que se puede usar get_stylesheet_directory cuando se refiera a un archivo dentro del directorio del tema hijo:

require_once( get_stylesheet_directory() . '/mi_archivo.php' );

Usar formatos de entrada

Un tema hijo hereda los formatos de entrada definidos por el tema padre. Al crear un tema hijo, debemos tener en cuenta que si usamos add_theme_support('post-formats') no se agregarán, sino que se sobrescribirán los formatos definidos por el tema padre.

Soporte RTL

Para incluir soporte de idiomas RTL tendremos que incluir un archivo rtl.css al tema hijo con el siguiente contenido:

/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
*/

WordPress solo cargará rtl.css si is_rtl() devuelve true.

Se recomienda añadir el archivo rtl.css al tema hijo aunque el tema padre no lo contenga.

Internacionalización

Los temas hijos, así como otras extensiones, se pueden traducir a otros idiomas con las funciones gettext.

Para internacionalizar un tema hijo debemos seguir los siguientes pasos:

  • Agregar un directorio /languages/ dentro del directorio del tema hijo.
  • Añadir archivos de idioma, que serán es_ES.po y es_ES.mo (dependiendo del idioma), a diferencia de los plugins, que tendrán que llamarse dominio-es_ES.xx.
  • Cargar un dominio de texto (textdomain), usando load_child_theme_textdomain() en el archivo functions.php durante la acción after_setup_theme. El dominio de texto definido en load_child_theme_textdomain() deberá usarse para traducir todas las cadenas presentes en el tema hijo.
  • Usar funciones GetText que añadan soporte i18n para las cadenas.
Ejemplo: textdomain
<?php
/**
 * Asignar el dominio de texto del tema hijo.
 *
 * Declarar el textdomain para este tema hijo.
 * Las traducciones se pueden archivar en el directorio /languages/.
 */
function my_child_theme_setup() {
    load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>
Ejemplo: funciones gettext
<?php
esc_html_e( 'Code is Poetry', 'my-child-theme' );
?>

Para resumir, todas las cadenas que usen el dominio de texto “my-child-theme” serán aptas para traducción. Y los archivos de traducción deberán estar presentes en el directorio /languages/ del tema hijo.

Otra información útil

Konstantin Kovshenin, del equipo de Automattic, nos cuenta en esta entrada por qué no hay que usar la regla @import. En pocas palabras, aunque el método funciona, lo mejor es evitarlo, ya que duplica el tiempo de carga del sitio.

En tanto, Kenneth John Odle desde su blog contesta algunas preguntas frecuentes relacionadas con los temas hijos. Veamos algunas:

¿Es necesario usar un tema hijo?

No, si estamos satisfechos con las opciones actuales que nos ofrece el tema. Sin embargo, si queremos hacer algo que el tema no hace, vamos a necesitar un tema hijo.

Por ejemplo, supongamos que el tema tiene una opción “Oscuro” y “Claro” para un esquema de color. Supongamos que “Oscuro” no es lo suficientemente oscuro, o bien es demasiado. Supongamos que queremos una opción de color rojo, o de color azul. Es para esto exactamente que se usa un tema hijo.

¿Por qué no simplemente editar los archivos del tema? Existe un editor en el panel de administración de WordPress, después de todo…

Sí, se puede hacer eso, pero aquí hay dos problemas grandes:

El primero es que tenemos que saber muy bien lo que estamos haciendo. Los archivos de temas por lo general son una combinación de PHP, HTML, CSS y JavaScript. Algo tan simple como olvidarse un punto y coma puede romper un sitio entero. A menos que estemos totalmente seguros de lo que estamos haciendo, corremos el riesgo de tirar abajo el sitio, incluido el administrador de WordPress, lo cual significa que ni siquiera podremos entrar para intentar corregir el error. En este punto, la única manera de arreglarlo es vía FTP, subiendo una copia nueva del tema, con lo cual los cambios realizados se perderán.

El segundo problema es que cuando el tema se actualice, los cambios también se perderán (y , de veras es necesario aplicar las actualizaciones cada vez que estén disponibles).

¿Tengo que actualizar el tema que estoy usando?

En una palabra, sí. Con frecuencia me encuentro con gente que cree que las actualizaciones son más un problema y que no valen la pena, y que optan por no actualizar nunca.

Aunque es cierto que las actualizaciones a menudo pueden ocasionar problemas (en especial actualizaciones primarias de WordPress), hacen dos cosas muy importantes para los sitios. La primera, ofrecen nuevas características que fueron solicitadas por los usuarios. La segunda, corrigen errores de seguridad que se encuentran en versiones anteriores, lo cual es vital para que los sitios no sean víctimas de ataques por parte de hackers.

¿Cuáles son los beneficios de usar un tema hijo?

El principal es que se puede dejar el tema actual intacto. Si sabemos que funciona, funciona. Y si metemos la pata en el tema hijo, siempre podemos volver al tema padre hasta que resolvamos el problema.

Otro beneficio es que podemos actualizar el tema padre sin preocuparnos de perder los cambios que hayamos hecho dentro del tema hijo. De esta manera, podremos aprovechar las nuevas características, así como también mantener el sitio seguro.

Por último, y lo más importante, es que podemos lograr cosas que el tema padre no nos ofrece.

¿Cuáles son las desventajas de usar un tema hijo?

Como dijimos antes, los temas de WordPress están construidos con una combinación de PHP, HTML y CSS (y casi siempre JavaScript), así que tendremos que tener cierta familiaridad con esos lenguajes para poder crear un tema hijo. Por suerte, casi todo lo que se necesita saber se puede encontrar en el Codex de WordPress, en los foros de soporte, o en Google, donde abundan los tutoriales gratuitos. Se puede lograr mucho con un simple “copiar y pegar”.

También la manera más fácil de crear y usar un tema hijo es tener acceso FTP al sitio. No todo el mundo lo tiene, y aunque lo tengamos, es otra tecnología que hay que dominar (aunque si se tiene un buen cliente de FTP, es muy fácil).

Otro aspecto para tener en cuenta es que las actualizaciones del tema padre a veces pueden ocasionar problemas de compatibilidad con el tema hijo. Esto sucede cuando el creador del tema usa otros selectores CSS, o cuando añade código para implementar alguna nueva funcionalidad, el cual no estará presente en el archivo correspondiente del tema hijo.

¿Cuándo debería crear un tema hijo?

Como ya dijimos, algunos usuarios están conformes con las opciones que ofrece su tema actual. Si estamos dentro de ese grupo, no tendremos que preocuparnos. Ahora, en el preciso instante en que pensemos: “Quisiera que el tema tuviera…” es cuando deberíamos crear un tema hijo.

Conclusión

Esta guía nos enseña a crear un tema hijo de la manera recomendada y genérica. Ha respondido también algunas preguntas frecuentes sobre el porqué de su uso. Pero vale recordar que muchas veces los desarrolladores de temas incluyen también un tema hijo de ejemplo, o proporcionan un tutorial para crearlo de acuerdo con sus propias directrices. Esto es porque podrían usar una prioridad diferente de carga de los estilos. Ante la duda, siempre consultar con la página del tema para el cual crearemos un tema hijo.

Por último, como no podíamos dejar de mencionar, existen plugins para crear temas hijos que nos ahorran todo el trabajo de hacerlo a mano. Basta con buscar en el repositorio de WordPress y probar. 🙂

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en Electromecánica, Periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)