Vamos al grano: ¿Qué es un tema hijo en WordPress?: Es un tema en el que podemos realizar modificaciones «seguras»del tema original (el tema padre) sin riesgo a perderlas en actualizaciones.
Un tema se compone de muchos archivos, entre ellos, los más destacables serían «functions.php» y «style.css» (al menos para este ejemplo. Modificando el archivo «styles.css» podrías, por ejemplo, hacer que el tamaño base del párrafo fuera de 16px en vez de 14px que indicaba el tema original (sí, por supuesto ques esto puedes cambiarlo desde las opciones del tema, pero no quiero complicar más la explicación). Si modificas ese archivo, la imagen de la web cambiará, pero en el momento que actualices el tema, tu archivo «styles.css» se actualizará con el nuevo contenido y el párrafo volverá a ser de 14px.
Esto es una modificación muy tonta, pero imagina que has cambiado más estilos, que has añadido nuevas funciones y shortcodes a tu «functions.php» y que incluso has cambiado templates…. todo esto se perdería.
Para eviatrlo, creamos un tema hijo que hereda las bases del tema padre, pero mantiene los cambios que hemos realizado.
Un consejo: aunque estés empezando y aún no hagas estas modificaciones, aconstúmbrate a crear un tema hijo y trabajar sobre él: te ahorrarás dolores de cabeza en un futuro.
Pasos para crear un tema hijo en WordPress
Te lo explico en base al tema «Hello Elementor» (que ya tiene un tema hijo definido en Github), pero es válido para cualquier tema, solamente has de prestar atención a los nombres del tema y las carpetas.
1. Crear la carpeta del tema hijo
Lo primero que debemos hacer es crear una carpeta para nuestro tema hijo en la carpeta de temas de WordPress. Sigue estos pasos:
- Accede a tu servidor mediante FTP o el gestor de archivos de tu hosting.
- Navega hasta wp-content/themes/.
- Crea una nueva carpeta dentro de la carpeta themes y nómbrala como hello-elementor-child (puedes usar cualquier nombre, pero es recomendable que refleje que es un tema hijo).
2. Crear el archivo style.css
Dentro de la nueva carpeta que has creado, debes incluir un archivo llamado style.css. No hace falta que añadas ningún estilo de momento, ya lo harás cuando lo necesites. Sigue estos pasos:
/*
Theme Name: Hello Elementor Child
Template: hello-elementor
*/Asegúrate de que el campo Template tenga el nombre correcto del tema padre (en este caso, hello-elementor), ya que esto es lo que le dirá a WordPress de dónde heredar las funciones y estilos.
Si estás pensando que también puedes modificar estilos en Apariencia-Personlaizar-CSS adicional, quiero decirte que no es lo mismo. El código que escribas ahí aparece como <style> en el código html de la página y aparte de que Google odia esto y penaliza la indexación de la página, te va a romper tu estructura de estilos. Si lo añades en «style.css», WordPress lo añadirá en el archivo de estilos de la página (y además, si usas plugins de optimización, lo minimizará).
3. Crear el archivo functions.php
A continuación, necesitarás un archivo functions.php donde añadirás las funciones de tu tema hijo. Crea este archivo en la misma carpeta y añade el siguiente código:
<?php
// Enqueue parent stylesheet
function hello_elementor_child_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'hello_elementor_child_enqueue_styles');
?>Este código asegura que se cargue el estilo del tema padre en tu tema hijo.
4. Activar el tema hijo
Ahora es momento de activar tu nuevo tema hijo.
- Accede a Apariencia > Temas.
- Busca el tema Hello Elementor Child y haz clic en Activar.
¡Listo! Ya tienes tu tema hijo activado y funcionando.
Personalizando tu tema hijo
Una cosa que no puedo evitar hacer en este proceso es personalizar el archivo screenshot.png, que es la imagen que representa tu tema en el panel de administración de WordPress. Como puedes ver en la imagen de esta publicación, siempre añado mi logo al tema hijo.
1. Crear una imagen para tu tema
Diseña una imagen que quieras usar como screenshot de tu tema hijo. Asegúrate de que la imagen tenga un tamaño de 1200×900 píxeles para obtener los mejores resultados. Lo mejor es coger la existente añadiendo encima tu toque personal.
2. Guardar la imagen como screenshot.png
Una vez que hayas creado tu imagen, guárdala con el nombre screenshot.png y colócala en la carpeta de tu tema hijo (hello-elementor-child).
Con esto, cada vez que mires la sección de temas en tu panel de WordPress, verás tu nueva imagen representando tu tema hijo.
Pues ya lo tienes. Aqunque estés empezando con WordPress y aún no modifiques código ni estilos, te recomiendo crear un tema hijo SIEMPRE… en un futuro lo agradecerás.
