Un Child Theme o Tema Hijo en WordPress es un tema que hereda la funcionalidad de otro tema, llamado «tema padre». Los temas hijos permiten modificar o añadir las funcionalidades del tema padre.
Un tema hijo es la forma más segura y fácil de modificar un tema existente, tanto si se quiere hacer pequeños cambios como otros más amplios. En lugar de modificar los archivos del tema directamente, es posible crear un tema hijo y hacerlo prevalecer sobre el tema padre.
¿Por qué usar un Child Theme?
El principal motivo es que si actualizas un tema que previamente has personalizado, los cambios que hayas hecho se perderán, me explico. Imagina que utilizas un Theme gratuito bajado del repositorio de WordPress. En dicho Theme has tenido que modificar CSS (algo de colores, tipografía, …) y HTML (para adecuarlo a tus necesidades). Si dicho Theme se actualiza (los Themes del repositorio de WordPress se actualizan con el fin de adaptarse a los cambios de nuevas versiones, seguridad, …) tus cambios se verán anulados, ya que sobreescribe los ficheros, sin embargo usando un Child Theme puedes conservar las modificaciones, ya que están hechas en otra carpeta.
¿Cómo crear un Child Theme?
Vamos a tomar de ejemplo el theme Twenty Sixteen. El tema está en la carpeta twentysixteen, con lo que lo primero que hay que hacer es crear una carpeta llamada twentysixteen-child o twentysixteen-hijo. El nombre da lo mismo, mientras tu sepas que es el tema hijo. La carpeta quedaría más o menos así:
En la cual la carpeta twentysixteen tiene todos los archivos del tema y la twentysixteen-child, de momento, ninguno.
Los dos archivos básicos que hemos de crear en la carpeta twentysixteen-child para que sea un Child Theme son:
style.css
/* Theme Name: Twenty Sixteen Child Theme URI: http://example.com/twenty-sixteen-child/ Description: Twenty Sixteen Child Theme Author: John Doe Author URI: http://example.com Template: twentysixteen Version: 1.0.0 Text Domain: twenty-sixteen-child */ /* =Aquí empieza la personalización de tu tema -------------------------------------------------------------- */
y functions.php
<?php
// Importando style.css del tema padre
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child_theme_styles' , get_stylesheet_directory_uri() . '/style.css' );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
// Fin de la importaciónEn el archivo «functions.php«, lo que hacemos es importar a nuestro Child Theme el archivo «style.css» del tema padre, con lo que he de tener la misma apariencia que el tema padre. Esta «importación» del archivo «style.css» antes se hacía en el mismo «style.css» del Child Theme, añadiendo la línea:
@import url("../twentysixteen/style.css");pero dejó de usarse, aunque no pasaría nada si lo usas.
Archivos del Theme
Si quieres cambiar algo más que la hoja de estilos, tu tema hijo puede sobrescribir cualquier archivo del tema padre: simplemente incluye un archivo del mismo nombre en la carpeta del tema hijo y sobreescribirá el archivo equivalente en la carpeta del tema padre. Por ejemplo, si quieres cambiar el código PHP para la cabecera (header), puedes incluir un header.php en la carpeta de tu tema hijo. De este modo, este archivo se usará en lugar del header.php del tema padre.
También puedes incluir archivos en el tema hijo que no esté incluido en el tema padre. Por ejemplo, puede que quieras crear una plantilla más específica que se encuentre en tema padre, como una plantilla para una página específica o categoría de archivo.
El archivo functions.php, por el contrario, no se sobreescribe ni sustituye al del tema padre, sino que sirve como complemento, de manera que si quieres añadir una función al tema lo lógico sería hacerlo en el functions.php del Child Theme, en previsión de que una actualización sobreescriba el archivo y la función desaparezca.
Una vez hecho esto, ya podemos usar el Child Theme y lo que es mejor, ya podemos hacer modificaciones en el CSS y HTML o PHP.
Como puedes ver, nuestro Child Theme no tiene imagen, para solucionar esto tan solo hay que poner una de 1200px por 900px llamada screenshot.png en la carpeta del Child Theme.
Ya podemos ponernos a cambiar colores, formas y código sin temor a que una actualización dé al traste con todo nuestro trabajo.
Algo importante es el modo de direccionar al Child Theme. Por ejemplo, si creamos en el Child Theme una carpeta (img/) con un archivo (logo.png), la manera de referirnos a él cambia con respecto al Tema Padre. En el tema padre es:
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo">
Mientras que en tema hijo es el sitio en el que está la hoja de estilos:
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" alt="Logo">
Evidentemente hay plugins para crear Child Themes, por si el código no es lo tuyo, pero si tienes que hacer cambios de CSS y PHP quiere decir que algo de código sabes, por lo tanto no encuentro ningún motivo para no utilizar el método manual.