Cuando tu sitio web WordPress se basa en la personalización de un tema o plantilla web, muchas veces tendrás la necesidad de modificar algunos aspectos, como pueden ser los colores, tipos de letra, frases, o la forma en la que se muestran las cosas para personalizarlas a tu gusto.

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 tus objetivos y necesidades. Pero otras veces necesitarás hacer ciertos cambios en la plantilla web que no se contemplan en el personalizador del tema.

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

¿Qué son los temas hijos o Child Themes?

Los Child Themes o temas hijos son la forma recomendada por WordPress para realizar modificaciones en temas. 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.

Podrás 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 JavaScript, siguiendo siempre los criterios de cualquier otro diseño web.

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 instalada en tu WordPress la plantilla web que quieras 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

A continuación te muestro los pasos a seguir para crear un tema hijo de forma manual:

Instalación del tema padre

Antes de comenzar a crear tu tema hijo tendrás que instalar el tema padre o plantilla web que te interese modificar, para posteriormente utilizarlo en tu sitio web. Cuando lo tengas instalado, podrás avanzar al siguiente paso. En este ejemplo haremos uso del tema por defecto Twenty Seventeen, instalado en la carpeta “twentyseventeen”.

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.

Copiar el archivo .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.

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 los metadatos de tu Child Theme listos, tendrás que eliminar por completo el contenido restante del archivo css.

Importar o poner en cola los estilos css del tema padre

El siguiente paso consistirá en importar el contenido de la hoja de estilos original. Llegados a este punto es necesario que sepas que esto se puede realizar de dos maneras:

Método 1 – @import

Aunque no es el método recomendado actualmente ya que se puede incrementar considerablemente el tiempo de carga del sitio web, puedes importar los estilos del tema padre desde el archivo css de la carpeta del Child Theme haciendo uso de la siguiente directiva:

@import url(“../twentyseventeen/style.css”);

A continuación un ejemplo con el código completo:

/* METADATOS */

Theme Name: Mi tema

Theme URI: http://www.tu-dominio.es/

Description: Descripción del tema hijo.

Author: Javier Félix

Author URI: https://javierfelix.es/

Version: 1.0

Template: twentyseventeen

*/ IMPORTAR ESTILOS CSS DEL TEMA PADRE */

@import url(‘../tu-twentyseventeen/style.css’);

*/ NUEVOS ESTILOS A PARTIR DE ESTA LINEA */

Método 2 – wp_encueue_style()

Aunque @import te permite importar los estilos del tema padre, existe otra forma más correcta y recomendable para hacerlo, y es añadiendo la función wp_encueue_style() en el archivo functions.php del tema hijo, permitiendo de esta manera que los estilos del tema padre se pongan en cola y se carguen sólo si es realmente necesario, en vez de cargarlos todos juntos en bloque. Con el uso de wp_enqueue_scripts se puede reducir bastante el tiempo de carga de la página ya que es WordPress quien controla cuándo se cargan los scripts.

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:

wp_encueue_style();

Últimos pasos

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 (sin captura de pantalla y 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.

Si quieres mostrar una captura de pantalla de tu Child Theme deberás crear el archivo [screenshot.png] y copiarlo en su carpeta correspondiente.

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 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.

A continuación te muestro en un vídeo cómo crear y activar un tema hijo de forma manual en WordPress: