Cómo crear un tema hijo en WordPress
Los temas hijos en WordPress son temas sencillos y ligeros que se alimentan de la estructura completa de otra plantilla. El principal motivo para querer un tema hijo es aprovechar que se sobrescriben los estilos y las funciones del tema «Madre» de modo que podemos lanzar actualizaciones sin miedo a perder ningún cambio.
Otra de las ventajas que nos ofrece la creación de temas hijos es que podemos modificar partes enteras de la plantilla, como la cabecera o el pie, además de que podemos añadir nuestras propias posiciones de widgets. Puedes revisar nuestro artículo sobre cómo crear tus propias posiciones de widgets.
Como ya hemos dicho, podremos lanzar actualizaciones del tema «Madre» sin miedo a que todos los cambios hechos en el tema hijo se pierdan. Para conseguir crear un tema hijo, deberemos seguir los siguientes pasos.
1. Creación de la estructura básica del tema hijo
Deberemos crear el directorio que contendrá el tema hijo en la ruta /wp-content/themes/. Lo usual es que el nombre de dicho directorio sea «nombre_plantilla-child», pero realmente podemos poner el nombre que nos apetezca.
Dentro de este directorio, crearemos dos ficheros:
- style.css
- functions.php
Con esto ya tendremos la estructura básica creada.
2. Cabecera en la hoja de estilos
De momento nuestro fichero style.css está vacío. Debemos insertar la cabecera que identifica al tema hijo. Cada tema debe tener una cabecera diferente, en caso contrario podemos encontrar problemas en la pantalla de selección de tema.
La cabecera se inserta en forma de comentario y tiene la siguiente estructura:
/* Theme Name: Nombre de tu tema hijo Description: Descripción de tu tema hijo. Author: Tu Nombre Author URI: http://tu-web.com Template: nombre_tema_madre Version: 1.0.0 Text Domain: nombre_tema_hijo */
Deberemos rellenar la cabecera con la información pertinente del tema hijo. Es importante fijarse en el parámetro Template: es donde se especifica cuál es el tema «Madre» y es la estructura que tomará por defecto el tema hijo.
3. Configuración del fichero de funciones
En el fichero functions.php deberemos poner el código inicial para enlazar las hojas de estilo del tema «Madre». Para ello, añadiremos el siguiente código PHP:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'plantilla-madre', get_template_directory_uri() . '/style.css' );
}
?>
Donde pone «plantilla-madre» hemos de poner el nombre del directorio que contiene la plantilla «Madre». Con esto ya tendremos enlazado su fichero de estilos. En otras palabras, si activamos el tema hijo, el fichero style.css del tema «Madre» también se va cargar.
Es posible que el fichero de estilos del tema hijo se cargue automáticamente, pero si ese no es el caso, deberemos sustituir el código anterior por el siguiente:
<?php
function theme_enqueue_styles() {
$parent_style = 'plantilla-madre';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'tema-hijo',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>
Igual que en el caso anterior, donde pone «plantilla-madre» deberemos poner el nombre del directorio que contiene el tema, y donde pone «tema-hijo» deberemos poner el nombre del respectivo directorio del tema que estamos creando.
Una vez llegados a este punto, el tema hijo está listo para ser usado. El comportamiento que tomará ahora es el mismo que el de la plantilla «Madre». Ahora es momento de añadir estilos en nuestro fichero style.css, que sobrescribirán los estilos del tema original.
Template override
Lo que acabamos de hacer con la hoja de estilos del tema hijo se llama «Template override«. Para que nos entendamos, son estilos «de más» que añadimos al fichero original, pudiendo sobrescribir los ya existentes.
Ahora vienen las buenas noticias: podemos hacer override de todos los ficheros de plantilla del tema «Madre». Por ejemplo, si queremos modificar la estructura de la página que muestra un artículo, deberemos copiar el fichero single.php del tema original en nuestro tema hijo, luego, haremos todas las modificaciones que queramos sobre el fichero copiado.
Si queremos añadir otras funcionalidades, podemos añadir funciones en el fichero functions.php que hemos creado.
Para los no programadores
Si eso de picar código no te va, no te asustes. También hay plugins que hacen el trabajo sucio. Por ejemplo, puedes probar con Child Theme Configurator. En cualquier caso, siempre puedes ponerte en contacto con nosotros y pedirnos ayuda, sin ningún compromiso.
Si te ha gustado el artículo, puedes suscribirte a nuestra newsletter. No somos muy pesados, solo te mandaremos las últimas novedades de vez en cuando.
