Siempre que utilizamos uno de los miles de temas que tenemos a nuestra disposición en el mundo WordPress, necesitamos darle nuestro toque personal o realizar modificaciones que nos demande nuestro cliente. Si solamente necesitamos cambiar algún que otro color, podemos hacerlo cómodamente desde el editor CSS adicional que ya se incluye en las últimas versiones de WordPress:
Pero si necesitamos realizar cambios estructurales en el HTML de la cabecera, el pié de página o añadir / modificar funciones, necesitaremos modificar los archivos internos del tema (header.php, footer.php, functions.php…) con el inconveniente de que en el momento que salga una nueva versión del tema y actualicemos, perderemos todos los cambios que hayamos realizado, ya que al actualizar un tema se sobreescriben todos los archivos de este.
Para ello surgió la técnica de crear temas hijos o child themes, que consiste en un tema (o sub-tema), que hereda todas las propiedades del tema principal (tema padre), con la particularidad de que si realizas un cambio en el tema hijo, este permanecerá aunque se actualice el tema padre, con lo que podemos aprovechar las mejoras y optimizaciones del tema padre sin perder los cambios que hayamos realizado para nuestro proyecto. Y ahora viene lo mejor, lo fácil que es crear un tema hijo.
¿Cómo se crea un tema hijo o child theme?
Tan sencillo como crear una nueva carpeta dentro del directorio de themes de WordPress (wp-admin/content/themes), usando el nombre que deseemos darle a nuestro nuevo tema hijo. Lo mejor es crearlo en minúsculas, de una sola palabra y sin caracteres especiales.
Ahora dentro de esta carpeta crearemos dos archivos muy importantes:
- style.css
- functions.php
Configurar style.css
Vamos a añadir un pequeño código comentado para configurar el tema hijo, con datos como el nombre de la plantilla, el autor, descripción, etc:
<?php
/*
Theme Name: Boutique (nombre para la plantilla)
Theme URI: https://www.url_de_nuestra_plantilla.com
Author: Nuestro nombre
Author URI: https://nuestro_dominio.com
Description: Descripción de la plantilla
Version: 1.0
Template: storefront
*/
?>La mayoría de las etiquetas son opcionales, pero lo más importante es indicar el Template, que el directorio donde está el tema padre, en este caso “storefront”
Configurar functions.php
Ahora vamos a añadir una función al archivo functions.php para cargar los estilos del tema padre:
<?php
function estilos_padre(){
wp_enqueue_style('estilos-padre', get_template_directory_uri().'/style.css');
}
add_action('wp_enqueue_scripts', 'estilos_padre');Con esta función le decimos a WordPress, dónde se encuentran los estilos principales para aplicarlos al tema hijo, de lo contrario, nuestro tema hijo no tendría ninguń estilo CSS configurado.
Con esto, ya podemos ir al menú Apariencia – Temas de WordPress, y debería aparecer el nuevo tema hijo para seleccionarlo y activarlo:
Si queremos que aparezca una captura del tema, podemos crear un archivo screenshot.png y ponerlo en la carpeta del tema hijo.
A partir de aquí podemos modificar las clases que deseemos, si por ejemplo queremos cambiar el color de fondo de la cabecera, solo tenemos que llamar a su clase y cambiar el valor del background:
.site-header{
background:#ff3300;
}Modificar archivos internos (header.php, footer.php, content.php…)
Para hacer cambios en la estructura de las cabeceras, pie de página, contenido… simplemente tenemos que copiar los archivos del tema padre y pegarlos en el tema hijo. Todas las modificaciones que hagamos en el tema hijo prevalecerán aunque se actualice el tema padre.
Muy importante es respectar la jerarquía de directorios del tema padre. Si por ejemplo queremos modificar un archivo que se encuentra en:
tema_padre/assets/lib/plantilla.php
Tenemos que crear esta misma jerarquía en el tema hijo:
tema_hijo/assets/lib/plantilla.php
Modificaciones en el archivo de funciones (functions.php)
En este caso no es necesario copiar todo el archivo functions.php del tema padre. Basta con añadir las funciones que necesitemos en el nuevo tema hijo.
Si necesitamos modificar una función del tema padre, podemos copiarla y modificarla en el tema hijo, pues WordPress siempre leerá primero las funciones del tema hijo y continuará cargando las del tema padre.
