Un child theme o tema hijo en WordPress es un tema que modifica o extiende la funcionalidad de otro tema, llamado “tema padre”. En esta entrada vamos a ver cómo crear un child theme o tema hijo en WordPress.
El tema hijo hereda la funcionalidad completa y los estilos del tema padre, y te permite modificarlo o añadir nuevas funcionalidades de una manera inteligente sin tocar el código fuente del tema padre. Todos estos cambios que hagamos en el tema hijo prevalecen sobre el tema padre.
En muchas ocasiones compramos un tema premium porque nos gusta o nos encaja al 90%, y si no encontramos ningún plugin que nos dé ese 10% restante, es cuando debemos plantearnos extender o modificar la funcionalidad del padre a través de un tema hijo.
Si estos cambios los hiciéramos directamente sobre el tema principal, nos podemos encontrar con el problema de que si el día de mañana sale una nueva versión del tema con nuevas mejoras o solución de bugs y/o vulnerabilidades y nos la descargamos, machacaremos todos los cambios que hicimos, lo que implicaría volver a rehacer el desarrollo sobre la nueva versión.
Creando un tema hijo
Vamos a ver con un ejemplo práctico cómo extender el tema por defecto de WordPress a día de hoy, el twentysixteen. Simplemente con un ejemplo sencillo para tener una idea básica de cómo modificar el comportamiento de un tema padre a través de un tema hijo. En este caso, veremos cómo cambiar el footer y poner nuestros datos de contacto en lugar de el nombre del blog y la frase “Proudly powered by WordPress”.
1. Creamos la carpeta y los archivos del tema hijo
Lo primero es crear una carpeta dentro de wp-content/themes/ a la que llamaremos twentysixteen-child. Dentro de la carpeta twentysixteen-child crearemos un archivo style.css, que es el único archivo obligatorio para hacer un tema hijo. En la cabecera de esta hoja de estilos colocaremos estas líneas:
/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twentysixteen-child/
Description: Twenty Sixteen Child Theme
Author: Tu nombre
Author URI: http://tudominio.com
Template: twentysixteen
Version: 1.0
Tags: twentysixteen, extension, child, etc
Text Domain: twentysixteen-child
*/
@import url("../twentysixteen/style.css");
/* A partir de aquí empieza la personalización de tu tema */Cabe destacar:
- Theme Name: Es el nombre de nuestro tema, debe ser diferente al nombre del tema padre, en este caso los hemos llamado igual pero añadiéndole el “Child”.
- Template: Debe ser el nombre de la carpeta del tema padre, tal cual. Importante que sea así, de lo contrario no funcionará.
- @import: Importamos la hoja de estilos principal del tema padre. También podríamos crear un archivo functions.php en el tema hijo y cargarla a través de wp_enqueue_style(), que sería más correcto, pero para éste ejemplo es suficiente con importarla.
Simplemente con esto ya podríamos activar el tema hijo.
2. Screenshot para su identificación visual en el back-end
Vamos a incluir también un pantallazo de nuestro tema, para identificarlo mejor desde el back-end. Para esto basta con añadir un archivo screenshot.png a la raíz del tema hijo. Podríamos simplemente utilizar el screenshot del tema padre y añadirle una máscara con el nombre del tema hijo.
3. Archivos
Ahora es cuando toca agregar los archivos a nuestro tema hijo. La regla general es que si agregamos cualquier archivo del tema padre en nuestro tema hijo, prevalecerá el archivo del hijo sobre el padre. Dicho de otro modo, en el ejemplo que vamos a ver, copiaremos el archivo footer.php de twentysixteen en la carpeta twentysixteen-child, y es éste último el que se cargará en nuestra web.
También se pueden incluir archivos nuevos. Si por ejemplo queremos añadir una nueva plantilla de página con un layout a nuestro gusto, bastará con crear el archivo nuevo en twentysixteen-child.
Si queremos modificar algún estilo, bastará con empezar a escribir CSS en el archivo style.css del tema hijo a continuación del import del style.css del tema padre.
Sólo hay una excepción en estas dependencias de archivos, y es el functions.php. El functions.php de un tema hijo no sobrescribe al tema padre. En lugar de eso, se carga de manera adicional (antes del tema padre). Esto es así porque en este archivo se suele recoger toda la funcionalidad del tema. Si queremos añadir una función nueva, bastará con añadir sólo esa función en el tema hijo, y no todo el functions.php completo más la nueva función.
¿Y qué pasa si quieres sobrescribir una función del padre? Bastaría con crearla en el tema hijo y modificarla a nuestro antojo e invocarla de la siguiente forma:
<?php
if ( ! function_exists( 'mi_funcion' ) ) {
function mi_funcion() {
// Mi Nuevo código
}
}4. Nuestro ejemplo
Vamos a cambiar el pie de twentysixteen a través de un tema hijo, por lo tanto copiaremos el archivo footer.php de twentysixteen a la carpeta twentysixteen-child. Abriremos este archivo y modificaremos las líneas 50 y 51:
//Cambiamos estas líneas
<span class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentysixteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentysixteen' ), 'WordPress' ); ?></a>
//Por estas otras
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a><br>
Calle lorem ipsum, número X<br>
Tel: 655 555 555 – email@email.comEs un ejemplo muy sencillo, que pretende servir de base y mostrar cual es el camino para modificar un tema padre a través de un child theme sin tocar el código fuente original. A partir de aquí las posibilidades son infinitas: crear nuevas plantillas, añadir nuevos custom post type, modificar el look & feel de la web, etc…
Puede que también te interese
