Cómo crear un tema hijo en WordPress

Cuando un proyecto online con WordPress se basa en la personalización de un tema o plantilla web, muchas veces surgirá la necesidad de modificar algunos aspectos, como pueden ser los colores, tipos de letra, frases, o la forma en la que se muestran los elementos para personalizarlos a medida.

Por regla general todos los temas WordPress vienen con un panel de personalización desde el que podrás ajustar su configuración a tu gusto, según los objetivos y necesidades. Pero otras veces necesitarás hacer ciertos cambios en el tema que no se contemplan en su personalizador.

Por ello se suelen utilizar los temas hijos o Child Themes.

Hoy en día la mayoría de temas comerciales (los más utilizados en la mayoría de proyectos) ya incorporan un tema hijo o Child Theme listo para descargar y personalizar al gusto.

¿Qué es un tema hijo?

Un tema hijo es un tema que tiene toda la funcionalidad y el estilo de otro tema, llamado tema padre.

Los temas hijos o Child Themes son la forma recomendada por WordPress para realizar modificaciones en el código de un tema existente, ya que éstos conservan todos los cambios y modificaciones del código personalizado, incluso después de una actualización. Si modificas el código directamente en un tema y luego éste se actualiza, los cambios se perderán.

Su funcionamiento se basa en que el tema hijo hereda la funcionalidad del tema padre, al que además vas a añadir o modificar algunas funciones o aspectos de diseño.

Los temas hijos se pueden usar para añadir acciones a tu medida, implementando tus propios estilos CSS y tus propias funciones, o incluir cualquier tipo de fichero que creas oportuno, desde imágenes o sonidos a librerías, modificaciones de archivos de plantilla y ganchos PHP personalizados.

Realmente el proceso de crear un Child Theme es muy sencillo. Podrás crear un tema hijo de forma manual o con ayuda de plugins, siendo requisito indispensable, en ambas maneras, tener instalado en tu WordPress el tema original o tema padre que quieras clonar/modificar.

También es importante conocer qué tipo de licencia tiene cada tema. Como cualquier otro tipo de software, cada tema tendrá su propia licencia. Si haces uso de un tema con licencia GPL, estarás obligado a liberarlo con la misma licencia, según los fundamentos y reglas del Software Libre.

Cómo crear un tema hijo en WordPress de forma manual

Paso 1: Instalación del tema padre

Antes de comenzar a crear un tema hijo tendrás que instalar el tema padre que se vaya a clonar/modificar. Cuando lo tengas instalado, podrás avanzar al siguiente paso.

Paso 2: Crear la nueva carpeta

La manera más rápida de crear un tema hijo es dirigirnos a la ruta donde tenemos WordPress instalado y acceder a la carpeta donde se encuentran los temas [wp-contents/themes]. Una vez allí tendrás que crear una nueva carpeta con el nombre que hayas decidido utilizar, por ejemplo “mi-tema”. Una vez creada la nueva carpeta, procederás con el siguiente paso.

Esto lo puedes realizar a través del administrador de archivos de tu hosting.

Paso 3: Copiar el fichero .css

Ahora copiarás el archivo de hoja de estilos [style.css] ubicado en la carpeta del tema padre, y lo pegarás en la nueva carpeta del tema hijo.

Esto lo puedes realizar a través del administrador de archivos de tu hosting.

Paso 4: Modificaciones en el archivo .css

El siguiente paso será modificar dicho fichero .css, en la carpeta del tema hijo. Para ello tendrás que editar los metadatos de la cabecera:

• Theme name: Nombre del tema [obligatorio]
• Theme URI: Referencia web del tema [opcional]
• Description: Descripción [opcional]
• Author: Autor del tema [opcional]
• Author URI: Referencia web del autor del tema [opcional]
• Versión: Número de versión [opcional]
• License: Tipo de licencia
• License URI: Referencia web de la licencia
• Tags: Etiquetas necesarias que describen el tema y permiten una búsqueda en el repositorio de WordPress
• Template: Indica el directorio o carpeta donde se encuentra instalado el tema padre [obligatorio]

Una vez que tengas preparados los metadatos de tu Child Theme, tendrás que eliminar por completo el contenido restante del archivo css.

Paso 5: Poner en cola los estilos css del tema padre

El siguiente paso consistirá en poner en cola el contenido de la hoja de estilos original.

En el pasado, el método común era importar la hoja de estilos del tema padre usando @import dentro del fichero .css. Esta ya no es la práctica recomendada, ya que aumenta la cantidad de tiempo que tardan en cargarse las hojas de estilo.

Actualmente la forma recomendada de poner en cola las hojas de estilo es agregar la acción wp_enqueue_scripts en la función wp_enqueue_style() dentro del fichero functions.php.

De manera que para poner en cola los estilos del tema padre tendrás que crear un archivo functions.php dentro de la carpeta del tema hijo y añadir la siguiente función en dicho archivo:

/**

* Enqueue styles

*/

function child_enqueue_styles() {

      wp_enqueue_style( 'tema-padre', get_template_directory_uri(). '/style.css');

}

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

Paso 6: Imagen del tema hijo

Si quieres mostrar una imagen miniatura o captura de pantalla de tu tema hijo, deberás crear el archivo [screenshot.png] y copiarlo en su carpeta correspondiente.

Recomiendo copiar el fichero original del tema padre y modificar su contenido en la carpeta del tema hijo, siempre respetando el nombre del fichero.

Paso 7: Otros archivos

Los demás ficheros del tema padre también podrán ser modificados desde el tema hijo para preservarnos de los problemas relacionados con las actualizaciones.

A diferencia de los archivos .css, los demás ficheros están implementados en PHP, de manera que cuando los creas en tu tema hijo, éstos no sobre escriben al del tema padre, sino que se cargan ambos, primero el del tema hijo y luego el del tema padre.

Así tus modificaciones siempre tendrán más relevancia que las posibles actualizaciones que sufra el tema padre.

Conclusión

Cuando hayas finalizado ya podrás acceder al gestor de temas en el escritorio de WordPress y verás cómo aparece tu tema hijo recién creado (aparentemente igual que el tema padre).

A partir de aquí ya podrás comenzar a modificar aspectos del diseño, escribiendo tu nuevo css, de forma que todas las reglas que añadas, tendrán más prioridad que las del css del tema padre.

De esta manera aprovecharás el potencial de las hojas de estilo para personalizar tu sitio web o blog sin que las actualizaciones del tema padre afecten a tus modificaciones.

Cómo crear un tema hijo con ayuda de plugins

Para crear un tema hijo de forma automatizada, es decir, haciendo uso de plugins, puedes buscar y utilizar cualquiera de los que existen en el repositorio de WordPress.

Pero por su sencillez de uso y excelentes resultados, voy a recomendarte una magnífica herramienta para facilitarte el trabajo y ahorrarte mucho tiempo.

El proceso es muy sencillo:

• Instala y activa el plugin
• Accede a la herramienta haciendo clic en la sección de Child Themes, dentro de Herramientas, en la barra lateral izquierda
• Elige la opción que quieras ejecutar, en este caso, crear un nuevo Child Theme
• Selecciona el tema padre que quieras modificar (previamente instalado)
• Haz clic en el botón Analizar
• Después de mostrarte confirmación de que el tema padre seleccionado permite la creación de temas hijos, entonces puedes continuar rellenando los siguientes campos
• Escribir el nombre de la nueva carpeta donde se almacenarán los ficheros del tema hijo
• Seleccionar dónde guardar los estilos CSS
• Seleccionar el método para cargar los estilos del tema padre (se recomienda wp_enqueue_style)
• Personalizar los campos relativos a la información del tema hijo: nombre del tema, autor, descripción, etiquetas, etc.
• Opcionalmente podrás también copiar los menús y widgets del tema padre
• Clic en el botón de crear tema hijo y ¡listo!

Sin duda se trata de una excelente herramienta que te ahorrará bastante tiempo y evitará que tengas que escribir código si no tienes los conocimientos necesarios.

A modo de conclusión, los temas hijos son indispensables si quieres personalizar un tema y modificar su aspecto sin tener que crear uno desde cero. Son la manera correcta y recomendada por WordPress para hacer cambios en temas.

Fecha de la última modificación: Enero de 2024.