Crear un tema hijo en Wordpress

Existen varias maneras de desarrollar sitios en Wordpress, la más común y rápida es comprando un tema ya desarrollado y adaptarlo a nuestras necesidades, pero cuando nuestro sitio requiere de elementos personalizados, necesitamos crear un tema nuevo en Wordpress, llamado child theme.

Qué es un child theme o tema hijo de WordPress

Un tema hijo o child theme es un tema que utiliza los archivos e información de un “tema padre” y tiene la capacidad de “pasar por encima” de él.  
 

La importancia de usar un child theme

Se usa para evitar perder los cambios. Si haces cambios sobre el tema padre y hay una actualización, perderás todo.

¿Cómo empezar?

Para explicarte mejor como es el proceso de creación de un Child Theme utilizaremos el tema gratuito de Wordpress: Twenty Seveventeen. 1.- El primer paso es crear una nueva carpeta de la siguiente ruta: wp-content/themes/. Las buenas practicas es nombrar esa carpeta igual a la del tema padre y agregar un guion y la palabra child al final del nombre: twentyseventeen-child. 2.- Dentro de la carpeta wp-content/themes/ crearemos dos archivos, styles.css y funtions.php.     3.- Dentro del archivo styles.css agregaremos la siguiente metadata que servirá para identificar el tema dentro de Wordpress: [pastacode lang="css" manual="%2F*%0ATheme%20Name%3A%20Twenty%20Seventeen%20Child%0A%0ATheme%20URI%3A%20http%3A%2F%2Ftusitio.com%2Ftwenty-seventeen-child%2F%0A%0ADescription%3A%20Child%20theme%20de%20modificaciones%0A%0AAuthor%3A%20Tu%20nombre%0A%0AAuthor%20URI%3A%20http%3A%2F%2Ftusitio.com%0A%0ATemplate%3A%20twentyseventeen%0A%0AVersion%3A%201.0.0%0A%0ALicense%3A%20GNU%20General%20Public%20License%20v2%20or%20later%0A%0ALicense%20URI%3A%20http%3A%2F%2Fwww.gnu.org%2Flicenses%2Fgpl-2.0.html%0A%0ATags%3A%20light%2C%20dark%2C%20two-columns%2C%20right-sidebar%2C%20responsive-layout%2C%20accessibility-ready%0A%0AText%20Domain%3A%20twenty-seventeen-child%0A*%2F" message="" highlight="" provider="manual"/] Veamos que contiene el archivo styles.css:
  • Theme Name: nombre del tema hijo
  • Theme URI: opcional, la url de la documentación y demo del tema hijo.
  • Descripción, Author, Author URI: son opcionales pero se recomienda colocarlas.
  • Template: este parámetro te indica el nombre de la carpeta del tema padre.
  • Version: versión del tema hijo, importante para el control de cambios.
  • License, License URI: si se quieres hacer alguna variación a la licencia.
  • Tags: si harás variaciones en la funcionalidad del theme, puedes agregar otro tag.
  • Text-Domain: si tus cambios implican agregar texto traducible.
4.- Dentro del archivo functions.php agregaremos el siguiente código: [pastacode lang="php" manual="%3C%3Fphp%0A%09function%20enqueue_styles_child_theme()%20%7B%0A%0A%09%09%24parent_style%20%3D%20'twentyseventeen-style'%3B%0A%09%09%24child_style%20%20%3D%20'twentyseventeen-child-style'%3B%0A%0A%09%09wp_enqueue_style(%20%24parent_style%2C%0A%09%09%09%09%09get_template_directory_uri()%20.%20'%2Fstyle.css'%20)%3B%0A%0A%09%09wp_enqueue_style(%20%24child_style%2C%0A%09%09%09%09%09get_stylesheet_directory_uri()%20.%20'%2Fstyle.css'%2C%0A%09%09%09%09%09array(%20%24parent_style%20)%2C%0A%09%09%09%09%09wp_get_theme()-%3Eget('Version')%0A%09%09%09%09%09)%3B%0A%09%7D%0A%09add_action(%20'wp_enqueue_scripts'%2C%20'enqueue_styles_child_theme'%20)%3B" message="" highlight="" provider="manual"/] Veamos que contiene el código en functions.php:
  • La función: enqueue_styles_child_theme, es llamada a la acción: wp_enqueue_scripts
  • Se definen dos variables que serán los IDs de los estilos a cargar.
    • El ID del padre ya existe por lo que tenemos que buscarlo en el archivo functions.php del tema padre.
    • El ID del tema hijo puede ser cualquier texto, aunque se recomienda igualmente que tenga un nombre similar al tema padre.
  • Colocamos en cola el estilo del tema padre a través de la función wp_enqueue_style.
  • Colocamos en cola el estilo del tema hijo, igualmente usando la función wp_enqueue_style.
  • En la carga del style.css del tema hijo usamos el tercer parámetro para indicar dependencia.
  • También usamos el cuarto parámetro para usar la versión que se ha definido en el archivo style.css del tema hijo.
    Para comprobar que tu Nuevo Child Theme se a creado con éxito ve al menú de Apariencia > Temas de tu web en Wordpress y comprueba que tengas tu nuevo child theme (no tendrá imagen destacada).    
Note to VCs: Aviada is not for sale. Please look somewhere else.