Tema hijo en WordPress: cómo crearlo correctamente

Pese a la multitud de artículos que existen sobre la necesidad de crear un tema hijo en WordPress para modificar una plantilla, actualmente hay infinidad de páginas que no lo hacen y realizan las modificaciones sobre el propio tema que han instalado, así que tengo que insistir en este punto. En este post te explico los motivos y te enseño cómo crear uno fácilmente.

Cuándo crear un tema hijo

En el momento en que tengas necesidad de modificar cualquiera de los archivos de tu tema, debes optar por esta opción. No esperes a que los cambios que debas realizar sean de gran tamaño, hazlo aunque solo sea una línea. Esto incluye cualquier cambio, ya sea en la hoja de estilos (style.css), el archivo functions.php o cualquier plantilla de página.

Quizá tengas una plantilla con multitud de configuraciones y puedas realizar todos los cambios desde sus opciones, pero tarde o temprano es posible que termines necesitando añadir alguna línea de código. Por este motivo, siempre que elijo una plantilla para un proyecto creo inmediatamente su tema hijo, no se tarda nada y así lo tengo disponible en cuanto lo necesite.

Ventajas de crear un tema hijo

Lo que te preguntarás ahora es qué beneficio tiene realizar esta tarea y por qué la gente insiste tanto. Pues hay varios motivos, pero sin duda, el más importante es que todos los cambios que hagas directamente sobre el tema padre se pierden al actualizarlo. Y dudo que te agrade tener que volver a añadir todas las modificaciones cada vez que esto suceda, si es que recuerdas cuáles eran.

Además, gracias a esto se facilita el desarrollo. Por un lado, tienes el tema padre, el cuál no vas a tocar. Por otro, totalmente separado, tienes tu tema hijo, el cuál solo tiene los archivos indispensables para añadir los cambios necesarios, por lo que es muy fácil visualizarlos y trabajar sobre ellos.

Una ventaja más es que si estropeas algo al modificar un archivo, es tan fácil como eliminarlo y entonces tu plantilla volverá a usar el original.

Cómo crear un tema hijo

Entonces ahora que sabemos que debemos crear un tema hijo y sabemos por qué, necesitamos aprender cómo hacerlo. Es muy fácil de realizar y hasta existen plugins que realizan este proceso por nosotros. Sin embargo, creo que es mejor prescindir de estos plugins que realizan tareas tan sencillas que podemos hacer manualmente, para así conservar una instalación de WordPress lo más limpia posible.

Lo que necesitaremos es acceso a los archivos de nuestro WordPress ya que vamos a trabajar directamente sobre ellos. En primer lugar, vamos a crear una carpeta que contendrá nuestro tema, y que debe crearse en el directorio wp-content/themes’, al lado de los otros temas. En el ejemplo haremos un tema hijo del tema twentysixteen que ya viene instalado por defecto. Nombraremos a la carpeta twentysixteen-child.

carpeta del tema hijo

Bien, una vez que tenemos esto, style.css es el único archivo imprescindible para que WordPress reconozca este tema. Aunque tendremos que añadir en él algunas líneas.

Crea el archivo en la carpeta. Ahora ve al archivo style.css del tema padre, copia el comentario que hay en la hoja de estilos donde está la información del tema y pégalo en tu archivo. Además debes cambiar el nombre del tema en la línea Theme Name y añadir la línea Template: nombre-carpeta-tema-padre. El resultado debe ser este:

Si comprimes tus hojas de estilos con alguna herramienta, normalmente se eliminan todos los comentarios para reducir el tamaño del archivo. Asegúrate de que no se elimina este comentario pues si no WordPress no reconocerá tu tema. Yo normalmente utilizo SASS por lo que comienzo este comentario por /*! en vez de solo /* para que se mantenga al comprimir.

Recuerda que debes subir esta carpeta y los archivos que añadas al servidor. Si ahora vamos al apartado Apariencia > Temas en el panel de WordPress, podremos observar que ya está disponible nuestro tema.

En vez de una imagen aparecerán cuadrados blancos y grises. Esto es porque no hay ninguna imagen asociada al tema. Si lo deseas, puedes hacer una captura y añadirla en la raíz del tema como screenshot.png, o puedes copiar la del tema padre y pegarla en tu tema.

tema hijo en el panel de wordpress

Sin embargo, si activamos el tema y visualizamos la web notarás un problema: la página se carga sin estilos. Eso es porque ahora solo se carga el style.css de nuestro tema, que está vacío, y no el del padre. ¿Cómo se soluciona esto? Muy fácil, indicamos en nuestra hoja de estilos que importe la del tema padre añadiendo la siguiente línea:

Simplemente haciendo esta referencia, podemos ver que nuestro tema ahora carga con éxito el estilo inicial del tema. Sigue leyendo para ver otra manera mejor de hacer esto.

Buenas prácticas para añadir la hoja de estilos style.css

Acabamos de conseguir cargar los estilos del tema padre, pero sin embargo esta manera de hacerlo no es la más adecuada, ya que conlleva un problema: la regla @import aumenta el tiempo de carga de nuestra web.

En vez de añadir esto en nuestra hoja de estilos, vamos a hacerlo a través de un hook de WordPress. Para esto creamos en nuestro tema el archivo functions.php con el siguiente contenido:

Esto añade la hoja de estilos del tema padre a la lista de estilos que deben cargarse con nuestra plantilla, y así podemos eliminar el @import de nuestro style.css. Pruébalo y observa como la plantilla conserva el mismo aspecto.

Existen diferencias entre estas funciones:
get_template_directory_uri()
get_stylesheet_directory_uri()
La primera nos devuelve siempre el directorio del tema padre. La segunda, nos devuelve el directorio del tema padre, pero si estamos usando un tema hijo, nos devolverá este en vez de la ruta del padre.

Archivo functions.php

Para cualquier modificación que añada nuestro tema debemos tirar inicialmente del archivo functions.php que ya hemos creado para el ejemplo anterior. A partir de él podemos incluir funciones u otros archivos PHP, teniendo en cuenta que esto no sobrescribe el del tema padre, sino que se añade a lo que ya existe.

Sobrescribir partes del tema

Además de los estilos, es probable que en algún momento necesitemos modificar también el HTML de la cabecera, de las plantillas de página o de cualquier otro archivo. Para esto, lo que debemos hacer es copiar el archivo original en nuestro nuevo directorio y editarlo desde ahí.

Cuando WordPress busque el archivo, lo hará inicialmente en el tema hijo, y si no lo encuentra es cuando buscará en el del padre. De este modo no tocaremos los archivos originales y también se mantendrán los cambios aunque actualicemos el tema.

Espero que te haya sido de utilidad y que a partir de ahora trabajes de esta manera si es que no lo hacías ya, así podrás perder ese miedo de actualizar tus temas por miedo a perder los cambios.