Crear un tema hijo en WordPress (Child Theme)

Una de las principales ventajas con la que cuenta WordPress es la posibilidad de poder escoger entre multitud de temas para personalizar el diseño de nuestra web.

Ahora bien, es posible que queramos personalizar algún aspecto del diseño del tema elegido o añadir nuevas funcionalidades en el mismo. Para estos casos la mejor opción es crear un tema hijo en WordPress.

En este artículo vamos a repasar todo lo que tienes que saber para crear un tema hijo y lo que puede conseguir con él. ¡Vamos allá!

Qué es un tema hijo de WordPress

Un tema hijo, también conocido como child theme, es un tema que hereda el diseño y funcionamiento de otro tema, llamado padre, que tengamos instalado en nuestro WordPress.

La ventaja de hacer esto será que con el tema hijo podremos modificar el diseño del tema padre y añadir nuevo código, sin tener que tocar nada en los archivos de dicho tema padre.

Para qué sirve un tema hijo de WordPress

Supongamos que quieres aplicar un cambio en los estilos CSS del tema que estás utilizando, o quieres modificar alguno de los archivos del tema para cambiar la forma en la que se carga la información. También puede ocurrir que quieras añadir un código en el archivo functions.php del tema para añadir una nueva funcionalidad que has encontrado en un tutorial.

Para todos estos casos tendrás que modificar uno o varios de los archivos del tema que estés utilizando. Esto supone un problema. ¿Adivinas de qué se trata?

Lo que ocurrirá es que cuando actualices el tema a una nueva versión (siempre es recomendable tener actualizado tanto WordPress, como los plugins y temas) perderás los cambios que hayas aplicado. Para evitar esto puedes optar por no actualizar el tema, lo que no es recomendable, o volver a aplicar los cambios una vez actualizado.

Para evitar esto WordPress nos ofrece una solución: los temas hijo.

Gracias a ellos todos los cambios que teníamos previsto aplicar en el tema los podremos aplicar en el tema hijo, y dichos cambios nunca se perderán aunque actualicemos el tema padre. Más adelante veremos qué tipo de cambios podemos aplicar.

Cuándo debemos crear un child theme o tema hijo en WordPress

Por lo que hemos visto hasta ahora, deberemos crear un tema hijo siempre que queramos aplicar cambios en cualquiera de los archivos del tema que estemos utilizando.

Una buena práctica será crear un tema hijo justo después de instalar el tema que vayamos a utilizar en nuestro WordPress, y activar dicho tema hijo una vez que lo hayamos configurado convenientemente. Realmente no es imprescindible crearlo en ese momento, ya que lo podremos hacer más adelante.

Una puntualización: si únicamente queremos aplicar cambios en los estilos CSS, la mayor parte de los temas para WordPress ya disponen de una opción para añadir CSS personalizado. Por tanto, para estos casos no es necesario crear un tema hijo, aunque no pasará nada si lo hacemos en él.

Esta personalización se suele encontrar entrando en Apariencia > Personalizar, dentro de la administración de WordPress.

En nuestro blog dispones de un artículo con más información sobre cómo personalizar los temas en WordPress.

Cómo crear un tema hijo o child theme en WordPress

Aunque existen plugins para crear temas hijo, como Child Theme Configurator, el proceso es lo bastante sencillo como para que podamos hacerlo de forma manual.

En algunos temas de pago podremos encontrar también un instalador del child theme, lo que nos evitará tener que crearlo nosotros. Recuerda que para hacer esto primero tendrás que instalar el tema padre y después el tema hijo, activando el segundo.

Si necesitas más información sobre esto te recomiendo revisar el tutorial donde explico cómo instalar temas en WordPress.

Para crear un tema hijo en primer lugar deberemos acceder a los archivos de nuestro WordPress. Podemos hacerlo vía FTP o a través del administrador de archivos de nuestra cuenta de hosting.

Aquí deberemos acceder al directorio wp-content/themes a partir de la ruta raíz de la web. En esta ruta veremos diversas carpetas, una para cada tema que tengamos instalado actualmente en nuestro WordPress.

Ahora tendremos que crear una carpeta para nuestro tema hijo. Por ejemplo, si estamos creando un child theme del tema Twenty Sixteen, situado en el directorio twentysixteen, podemos crear la carpeta twentysixteen-hijo. Realmente podemos poner cualquier nombre sin acentos, espacio u otros caracteres especiales, pero de esta forma podremos identificar mejor el directorio del tema hijo y cual es su padre.

Una vez hecho esto deberemos entrar en el nuevo directorio creado y en él tendremos que crear una serie de archivos. Los repasamos con detalle uno a uno.

Archivo style.css

Será el archivo que cargará los estilos CSS del tema. Tenemos que crearlo porque en él se hará referencia a cuál es el tema padre del que hereda estilos y funcionamiento, así como otra información importante.

Una creado el archivo style.css lo editamos y añadiremos en él un código como el siguiente, en este ejemplo para indicar que el tema padre es el Twenty Sixteen:

/*
Theme Name: Twenty Sixteen Hijo
Theme URI: http://caltener.com
Description: Tema Hijo Twenty Sixteen
Author: Pablo
Author URI: http://caltener.com
Template: twentysixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, accessibility-ready
Text Domain: twentysixteen-hijo
*/

Vamos a repasar cada uno de los parámetros que aparecen aquí:

• Theme Name: será el nombre del tema hijo, que veremos cuando accedemos en la administración de WordPress a Apariencia > Temas. Lo recomendable es poner el nombre del tema padre seguido de «Hijo»o «Child».
• Theme URI: es la página web donde se verá la información del tema. Se puede dejar el valor del tema padre, poner la url que queramos o, incluso, no añadir este dato.
• Description: una descripción del tema. Lo habitual es poner que se trata de un tema hijo de otro tema.
• Author: persona que ha creado el tema.
• Author URI: página web del desarrollador, en caso de que queramos ponerla.
• Template: tema padre del child theme que estamos creando. Tendremos que poner el nombre del directorio donde se encuentra el tema padre. Por ejemplo, para el tema Twenty Sixteen ponemos twentysixteen, ya que es el directorio que lo aloja.
• Version: indica la versión del dicho tema. Cuando lo creamos podemos poner 1.0.0, y esto lo podremos ir modificando según vayamos aplicando cambios en el tema hijo, aunque realmente no es necesario.
• License: Tipo de licencia que tiene el tema. Se puede dejar el valor que he puesto en el ejemplo.
• License URI: página web donde se indican los detalles de la licencia que hemos aplicado.
• Tags: las etiquetas por la que se encontraría el tema en una búsqueda de temas. Puedes poner los mismos valores del tema padre o directamente no añadir este parámetro.
• Text Domain: se utiliza para poder traducir las constantes de idioma del tema, ya que este parámetro sirve para identificarlas. Como valor puedes poner el nombre del directorio que has creado para el tema hijo.

De todos estos valores, los únicos obligatorios serían el Theme Name y el Template. También es muy recomendable que añadas el valor para Text Domain, ya que más adelante es posible que quieras traducir alguna constante de texto. El resto de parámetros puedes no añadirlos si quieres, y no afectará al funcionamiento del tema hijo. Por ejemplo, el código anterior se podría dejar así:

/*
Theme Name: Twenty Sixteen Hijo
Template: twentysixteen
Text Domain: twentysixteen-hijo
*/

Archivo functions.php

Realmente el único archivo imprescindible para crear un tema hijo es el style.css, pero necesitaremos el archivo functions.php para que nuestro WordPress se vea de forma correcta.

Crea el archivo functions.php en el directorio que has creado en el tema hijo y añade el siguiente código:

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

Este código servirá para poder heredar los estilos CSS del padre. Aunque también se puede hacer utilizando la regla import en el archivo styles.css, es más correcto hacerlo de esta forma.

Este archivo functions.php del tema hijo no reemplaza el functions.php del tema padre, sino que sirve como complemento. De esta forma podremos añadir código en el tema hijo sin tener que modificar el tema padre.

Archivo screenshot.png

Este archivo es opcional. Es la imagen que acompaña al tema dentro de Apariencia > Temas en la administración de WordPress.

Lo más fácil será copiar este archivo del directorio del tema padre y colocarlo en el directorio del tema hijo, por lo que en la administración veremos la misma imagen.

Si queremos dejarlo bonito podemos modificar la imagen del tema padre, para poner un texto «Tema hijo» o similar encima de la misma, o crear nuestra propia imagen desde cero. En caso de que optemos por esta opción la imagen que subas al directorio del child theme se deberá llamar screenshot.png (formato png) y tener unas dimensiones de 1200×900 píxeles.

Si no subimos el archivo screenshot.png no pasa nada. Simplemente, al ver el tema dentro de Apariencia > Temas no se cargará ninguna imagen en el espacio reservado para ello.

Estos son los archivos que hay que tener para crear un tema hijo (no todos imprescindibles). Por supuesto, se podrá agregar código adicional a los archivos styles.css y functions.php, o añadir nuevos archivos que sobreescribirán a los del tema padre.

Recuerda que una vez tengas creado el tema hijo deberás activarlo desde Apariencia > Temas para que empiece a actuar. En el caso de que no veas un diseño similar al que tenía el tema padre significaría que algún cambio no se ha aplicado de forma correcta.

Personalizar tema hijo en WordPress

Gracias a los temas hijo podremos aplicar modificaciones sobre el tema que estemos usando (tema padre), sin perder dichos cambios cuando lo actualicemos. Vamos a repasar aquí algunos ejemplos.

¡Ojo! Todos los cambios que voy a explicar se tienen que aplicar sobre el tema hijo.

Añadir nuevas funciones en el functions.php del tema

Seguro que has visto muchos tutoriales en internet donde se explican trucos para añadir nuevas funcionalidades, o donde se modifica el comportamiento de WordPress o sus plugins mediante un código que hay que añadir en el functions.php.

Por ejemplo, se puede insertar código para añadir una llamada a un javascript en la cabecera, cambiar el logo de acceso a la administración, ocultar mensajes, modificar el número de productos por fila en WooCommerce, etc. Las posibilidades son inmensas.

Muchas de ellas las podremos conseguir a través de plugins, pero usando el functions.php del child theme conseguiremos tener nuestro WordPress más limpio.

Modificar las funciones ya existentes en el tema padre

Dado que el functions.php del tema hijo se carga antes que el functions.php del tema padre, lo podremos usar para modificar funciones del functions.php del padre.

Ahora bien, esto solo lo podremos hacer si la declaración de la función que queremos sobrescribir va precedida con un condicional que compruebe si ya ha sido declarada anteriormente. Sería algo como esto:

if ( ! function_exists( 'NOMBRE_FUNCION' ) ) {

Para este ejemplo NOMBRE_FUNCION sería el nombre de la función que queremos modificar.

De no ser el caso, no podremos aplicar el reemplazo, ya que en php (lenguaje con el que está desarrollado WordPress) no se permite declarar una misma función más de una vez. Se produciría un error y la web no cargaría.

Modificar los estilos CSS del tema

Como había comentado antes, normalmente los temas ya incorporan un apartado para incluir CSS adicional. Esta es una opción perfectamente válida cuando no vamos a incluir muchos estilos.

En el caso de que vayamos a aplicar cambios más profundos, no solo en los estilos del tema, sino también en los estilos de los plugins, será mejor opción añadir dichos estilos CSS dentro del archivo style.css del tema hijo. Esto nos permitirá tener mejor organizado el código.

De esta forma, partiendo de un tema padre podremos modificar de forma profunda su diseño, hasta conseguir exactamente lo que busquemos. Existen temas base que se pueden utilizar como punto de partida para crear nuestro tema a nuestro gusto.

Modificar otros archivos del tema padre

Además de los archivos style.css y functions.php, que hemos utilizado para crear el tema hijo, podemos modificar otros archivos incluidos en el tema padre.

Esto ocurre debido a que los archivos que tengamos en el tema hijo sobrescribirán a los del tema padre.

Te pongo un ejemplo para verlo más claro: dentro de los archivos del tema hay un archivo header.php donde se suele cargar el contenido de cabecera de WordPress. Si queremos cambiar el contenido que se carga, añadir nuevas llamadas a estilos CSS, incluir nuevos metas, etc. podemos copiar dicho archivo en el directorio del tema hijo y editarlo para aplicar las modificaciones que necesitemos.

Esto mismo se puede aplicar con otros archivos como el footer.php (pie de la web), page.php (página que define la estructura de las páginas) o comments.php (donde se define la forma con la que se mostrarán los comentarios).

Ten en cuenta que cuando se añade código al functions.php y style.css del tema hijo, dicho código complementa al código existente en dichos archivos del tema padre, mientras que cuando incluimos otros archivos en el tema hijo lo reemplazan por completo. Es por eso que es tan importante copiar el archivo original del tema padre y luego modificarlo.

Para aplicar estos cambios deberemos tener ciertos conocimientos en HTML y PHP, ya que en caso de que cometamos algún error en el código nuestro WordPress no cargará.

Conclusión

Como habrás visto en este artículo, los temas hijo o child themes en WordPress son una gran herramienta para poder personalizar el aspecto de nuestro WordPress, a partir del tema que estemos utilizando.

Gracias a ellos podrás actualizar sin problema el tema padre, cosa siempre conveniente para corregir posibles errores o agujeros de seguridad. Y en caso de que surjan errores tras la actualización, siempre será más fácil de corregir, ya que solo tendrás que revisar los archivos del tema hijo.

Si estás utilizando un tema en el que has aplicado cambios en el código (por ejemplo, una función nueva en el functions.php), todavía estás a tiempo de crear tu tema hijo. Simplemente tendrás que eliminar estos cambios del tema padre y añadirlos en tu nuevo child theme.

Y si estás empezando a crear tu WordPress, y todavía no has cambiado nada, será un momento perfecto para crear el tema hijo y tenerlo listo para modificaciones futuras.

Por cosas como esta nos encanta WordPress.