Qué son y cómo crear un child theme (tema hijo) en WordPress

Debido a que WordPress es una plataforma mundialmente extendida, a menudo cuando empiezas a utilizarlo,  es muy probable que leas ciertos términos que desconozcas y por ello, no aproveches todas las opciones que nos ofrece el gestor de contenidos más usado del mundo.

Si hablamos de los temas hijo, debes saber que sirven para resolver algunos de los principales problemas con los que nos encontramos los usuarios, a la hora de personalizar nuestra página web, mejorando el diseño y las funcionalidades.

Por eso, antes de ver en detalle qué significa child theme, veamos por qué te interesa crear uno lo antes posible.

¿Por qué crear un tema hijo en WordPress?

Da igual si utilizas alguno de los potentes themes gratuitos incluido en Hosting WebCloud o las plantillas premium mejor valoradas del mercado.

Una de las principales ventajas que tiene este CMS con respecto a la competencia es su capacidad para personalizar prácticamente cualquier cosa que se te ocurra.

Trabajar con una herramienta con un abanico tan amplio de opciones va a permitirte adaptar cada una de las partes de tu página web a las necesidades que requieras.

No importa si lo que estás buscando es personalizar el aspecto de tu tema o añadir alguna función que hayas pensado que puede serte de utilidad.

Por suerte, tanto WordPress como la comunidad que hay detrás, está totalmente preparada para ofrecer una solución a prácticamente cualquier necesidad, haciendo por ello que WordPress sea una una de las herramientas referentes del sector.

Y hablando de soluciones personalizadas, hoy vamos a hablar de los temas hijo, también conocidos como child themes.

¿Qué es un child theme de WordPress y para qué sirve?

Un child theme o tema hijo de WordPress es un tema de WordPress que hereda su funcionalidad y diseño de otro tema, el tema padre.

De hecho, un tema hijo sin ningún tipo de personalización es idéntico al parent theme con el que se ha creado.

Tal como lo define el Codex de WordPress, un child theme es un tema que «hereda la funcionalidad y el estilo de otro tema, llamado el tema padre. Se recomienda que los temas hijos modifiquen los temas existentes manteniendo al mismo tiempo su diseño y código».

Los temas hijo en WordPress se utilizan para poder personalizar o modificar un tema existente de WordPress sin miedo a perder todas esas personalizaciones a la hora de actualizar el tema padre principal.

Aunque actualices el theme principal que estés usando como base (algo muy recomendable), los cambios que hagas en un child theme prevalecen sobre la actualización y por eso mantienen el estilo y los cambios realizados.

Como podrás imaginar, si no utilizas un child theme, todos los cambios que hagas, los perderás cuando tengas que actualizar la plantilla que estés usando.

Además, un tema hijo es muy útil cuando se quieren hacer reestructuraciones o muchos cambios sobre un diseño o funcionalidad, ya que en lugar de crear un sitio desde cero, puedes crear un tema que comparta la mayor parte de su código y estilo con un tema principal pero modificando por completo los archivos que necesites con total tranquilidad.

¿Es recomendable usar un child theme?

Es altamente recomendable que utilices un child theme en tu web WordPress ya que permiten realizar cambios en un sitio sin necesidad de cambiar realmente el código o los archivos del tema original, manteniendo así la posibilidad de actualizarse sin perder nada.

Aunque estés empezando, y crees que nunca vas a necesitar modificar un theme, te recomiendo que crees uno siguiendo esta guía, ya que no tardarás más que unos minutos y lo más probable es que en el futuro, tarde o temprano quieras hacer una modificación.

También es muy recomendable el uso de temas hijo para aprovechar las ventajas de los diferentes frameworks de WordPress disponibles, como es el caso de Génesis Framework, posiblemente el más conocido.

Un framework es como un esqueleto o base sobre la que construir tu web aprovechando las mejores prácticas y estándares web. Al dejar todo el tema del diseño en el child theme, el tema padre de un framework es bastante ligero y permite todo tipo de personalizaciones ahorrándote sobrecargar tu web código y estilos CSS innecesarios.

En definitiva, el objetivo final que se persigue al crear un child theme en WordPress es el de adaptar cada uno de los temas a las necesidades que tenga tu página web, por lo que son sin duda una de las soluciones más populares cuando no tienes presupuesto, tiempo o simplemente no quieres pasar por el tedioso proceso de crear una página web completamente desde cero.

¿Cómo crear un child theme en WordPress?

Si ya te he convencido con las ventajas y bondades que un child theme puede aportar a tu proyecto, es hora de ponernos manos a la obra.

En este tutorial vamos a ver varias formas para crear un child theme, por lo que lee todas con atención y escoge de entre todas las opciones, la que más te guste en función de tus conocimientos y se adapte al tiempo y recursos de los que dispongas.

Si has empezado hace poco en esto de WordPress, quizás el proceso que te voy a enseñar para hacer todos los pasos a través de un plugin puede ser el más recomendado, al carecer totalmente de ningún tipo de complicación ni riesgo para tu proyecto.

¿Cómo crear un tema hijo en WordPress desde cero mediante código?

Para crear un tema hijo desde cero, es importante tener en cuenta que te harán falta, principalmente, dos archivos básicos que deberás crear: el style.css y el functions.php.

Por supuesto, si quieres hacer cambios sobre algún otro archivo de tu parent theme, tan sólo tendrás que crear una copia de ambos y modificar lo que estimes oportuno.

En el caso del style.css y functions.php, no es necesario que copies la información original del tema padre, si no que con un archivo vacío, que incluya el pequeño fragmento de código que veremos a continuación bastará.

Style.css

Debes crear un archivo llamado style.css, que será el lugar en el que se recopilará toda la información referente al aspecto visual de tu tema hijo.

Puedes crear este archivo con un editor de código gratuito como Atom o con el bloc de notas de tu ordenador.

Simplemente crea un archivo con ese nombre, copia el siguiente fragmento de código dentro y cambia la información que te indico a continuación para que se adapte a tu proyecto y que funcione correctamente:

/*
Theme Name: Poner aquí el nombre de tu tema hijo
Description: (Opcional) Breve descripción de tu tema
Author: Poner aquí u nombre
Author URI: Poner aquí tu web
Template: Poner aquí el nombre del tema padre tal y cómo aparece en el apartado de Apariencia > Temas
Version: 1.0.0
*/

Functions.php

El otro archivo que deberás crear nuevo deberás llamarlo functions.php.

Es el sitio en el que deberás indicar a WordPress toda la información relativa al proceso de carga del tema hijo desde el tema padre así como añadir funcionalidades extra que quieras para tu web.

Es decir, este archivo le estará indicando a WordPress que debe de recoger toda la información desde el tema padre y añadir además, todas las modificaciones extra.

Simplemente crea un archivo nuevo con ese nombre (recuerda que puedes hacerlo con el bloc de notas) y copia y pega dentro el siguiente fragmento de código:

<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

Sube tu tema hijo a la web

Una vez tengas creados ambos archivos, deberás meterlos en una carpeta llamada con un nombre representativo que te sea fácil de recordar, por ejemplo «nombre-del-tema-child».

Por motivos de optimización y para asegurarte disgustos, te recomiendo que no pongas espacios en el nombre de la carpeta. Si quieres separar, utiliza guiones.

Además, cuanto más corto y fácil de recordar sea el nombre, mejor.

Cuando lo tengas todo, comprímelo en un archivo zip y súbelo a WordPress como cualquier otro tema Premium.

Un poco más abajo, en este mismo tutorial, te describo el proceso con todo detalle, pero por si quieres ir avanzando, podrás hacerlo sin mucha dificultad a través de la sección Apariencia en el menú lateral del panel de administración y luego en Temas > Subir Tema para después seleccionar el archivo .zip que acabas de crear.

Una vez instalado, tan sólo tendrás que activarlo en el menú de Apariencia > Temas para poder empezar a personalizar tu web.

¿Cuál es el mejor plugin para crear un tema hijo en WordPress?

El gran repositorio de WordPress hace que puedas crear un child theme de una manera muy sencilla, totalmente segura sin ningún conocimiento de código o programación gracias a los plugins.

A través de estos plugins, podrás realizar esta función si no te ves capacitado para comenzar a introducir líneas de código o si prefieres fiarte de las automatizaciones de los procesos.

Pese a que hay varios plugins que pueden servirte de ayuda, te recomiendo que te decantes por uno de los más populares, llamado Child Theme Configurator, ya que es realmente fácil de usar.

Puedes descargarlo pulsando la siguiente imagen:

Una vez lo hayas descargado y activado, deberás de acudir a la pestaña del menú de herramientas. Esa será la página principal sobre la que deberás de realizar todos los ajustes que necesites para su sitio web.

Uno de los aspectos que más me gustan de este plugin y el motivo por lo que lo suelo recomendar de manera habitual es por el proceso guiado que ofrece para la creación paso a paso del tema hijo.

En cualquier caso, por si no lo ves claro, aquí te dejo los pasos que debes seguir:

Ir a Plugins > Añadir nuevo y buscar «Child Theme Configurator»

1. Instalar
2. Activar
3. Menú lateral >  Herramientas
4. Pulsa en “Crear nuevo Child Theme”
5. Elige el tema en el que deseas hacer la copia
6. Pulsa sobre “Analizar”
7. Escoge el nombre para la carpeta en la que se va a guardar el child theme.
8. Pulsa en “Crear nuevo child theme”

El resto de puntos que no he mencionado es mejor no tocarlos a no ser que sepas lo que estás haciendo, pues lo único que vas a conseguir va a ser sobreescribir información o aumentar las posibilidades de que no termine de encajar por completo la configuración.

Así que céntrate en estos pasos y verás como consigues tu objetivo sin ningún tipo de problema.

Cuando termines, deberás dirigirte a la opción de “Apariencia” de tu página web y acudir al apartado de “Temas”.

Entre todos los que tengas descargados, habrá uno que tenga el nombre que escogiste en el paso 7 del proceso anterior, y es el que debes activar.

Una vez lo actives y compruebes que funciona, ya no te hará falta para nada el plugin descargado, por lo que si quieres, puedes borrarlo sin ningún problema (lo cual te recomiendo hacer para no sobrecargar innecesariamente tu web).

Cómo instalar un child theme de WordPress

Si ya tienes una plantilla creada con un tema hijo y no necesitas crearlo desde cero, puedes saltarte los pasos anteriores. El proceso será todavía más sencillo, especialmente si ya has instalado algún que otro tema anteriormente, ya que sólo tendrás que subirlo a tu web para empezar a trabajar la personalización de tu sitio.

Para instalar un tema hijo en WordPress deberás ir al panel de control de WordPress, ir a Apariencia > Temas > Añadir nuevo.

Una vez le hayas dado a “Añadir nuevo”, bastará con pulsar sobre el botón de “Subir tema” y seleccionar la carpeta del tema hijo que quieras utilizar. Eso sí, deberá estar en algún formato comprimido, preferentemente en formato zip.

Una vez subido a WordPress, deberás de activar al tema para poder comenzar a utilizarlo a través de Apariencia > Temas y pulsando el botón de activar sobre la opción que corresponda.

Ten cuidado con no activar el tema padre, ya que serán bastante parecidos. (Deberían diferenciarse como mínimo por el nombre eso sí)

Como puedes comprobar, el proceso es exactamente igual de sencillo que a la hora de trabajarlo sobre un plugin. No reviste ningún tipo de complicación y los resultados serán igual de positivos.

Cómo personalizar un child theme de WordPress

Ha llegado el momento.

Ya tienes todo instalado y listo para ser utilizado.

Sin embargo, el tema todavía está completamente en blanco o exactamente igual que el padre y es momento de proporcionarle la personalidad que quieres que tenga tu página web.

Ha llegado el momento de hacer lo más divertido en lo referentes a los temas de WordPress, ¡personalizarlo!

¿Estás preparad@?

¡Vamos allá!

Cómo modificar el diseño o estilos CSS en un child theme de WordPress: style.css

A lo largo de los años WordPress ha ido evolucionando para poner cada vez más fácil la posibilidad de moficiar el diseño y apariencia de nuestras páginas web utilizando algún maquetador visual para WordPress como los de esta comparativa actualizada con los mejores page builders del 2019, algo que se complementa perfectamente con tu nuevo child theme.

Pero si lo que buscas es modificar el código CSS para añadir tus propios snippets, tan sólo tienes que ir a “Apariencia” > “Personalizar” > CSS Adicional, donde podrás pegar o crear los fragmentos de código que necesites.

Por supuesto, si lo prefieres, también puedes modificar directamente el archivo style.css de tu tema hijo, ya sea mediante el panel de administración de WordPress (si tu plugin de seguridad te lo permite) o accediendo mediante FTP y cambiando los archivos directamente en el servidor.

Siempre y cuando no elimines el pequeño comentario que añadimos en la cabecera del archivo, podrás añadir todo el código que necesites.

Cómo añadir funcionalidades a tu tema hijo de WordPress: functions.php

Como ya he comentado previamente, a la hora de utilizar un tema hijo lo que estás realizando es cargando dos archivos functions.php al gestor.

En el caso de que el tema hijo no cuenta con este archivo, no te preocupes, puedes añadirlo de manera manual sin ningún tipo de dificultad.

Pero es importante entender el funcionamiento de que existan dos archivos iguales trabajando al mismo tiempo sin que por ello sean incompatibles. Para entenderlo, hay que saber que el administrador está pensado para que primero cargue el tema padre y luego el hijo, de manera que lo que está realizando es una ampliación o sustitución de funciones del tema padre en cuestión, actuando como un complemento.

WordPress prioriza el archivo functions.php del tema hijo sobre el tema padre, teniendo en cuenta únicamente las modificaciones.

Para modificar o añadir funcionalidades, tan sólo tienes que seguir los pasos comentados anteriormente.

O bien accedes al archivo a través del panel de administración, lo modificas directamente en el servidor, o si lo prefieres, haces todos los cambios antes de subirlo a la web para después no tener que hacer más cambios si todo funciona correctamente.

Cómo modificar la Imagen de perfil del child theme WordPress: screenshot.png

Una vez ya has configurado y tienes todo a tu gusto, puedes valorar si te interesa, cambiar la foto de perfil del tema sobre el que has estado trabajando.

Aunque esto no tiene ningún impacto, más allá de ponértelo fácil a la hora de identificarlo en el apartado de temas, lo cierto es que es tan fácil hacerlo que por qué no dotar a tu tema de una imagen a la altura…

Si no tienes ninguna imagen que quieras añadir, puedes hacer una captura de pantalla de cómo queda tu web con este tema para así no tener dudas a la hora de seleccionar la versión correcta.

Para esto, dirigete a la página principal de tu tema y haz una captura de esa instantánea. Si utilizar Mac, podrás realizarla a través de la combinación de “Cmd” + “Shift” + “3”, para seleccionar directamente al área que quieres que se visualice.

En caso de trabajar son Windows, bastará con utilizar la tecla de imprimir pantalla.

Una vez tenemos la captura guardada, será tan simple como acudir al programa nativo de tu sistema operativo, pegar captura guardada y eliminar todo lo que no quieres que aparezca en la foto de perfil de tu tema. Esto puede ser, por ejemplo, la barra de Windows.

En caso de que la hayas hecho con Mac, al poder seleccionar directamente el área que quieres recortar, no será necesario volver a recortar nada.

Tras esto, deberás de acudir a la carpeta raíz del tema sobre el que has trabajado y pegar el archivo en su interior, bajo el nombre de “screenshot.png”.

Una vez eso, podrás comprobar de manera prácticamente instantánea como la captura se ha subido perfectamente y tu tema ya tiene una foto de perfil totalmente personalizada.

Conclusión

Como ya has podido comprobar, el proceso de creación de un tema hijo puede suponer un pequeño trabajo inicial, especialmente si no estás habituado a trastear con WordPress o a añadir o quitar funcionalidades que no te interesen.

Sin embargo, es precisamente esta cuestión la que hace de WordPress una de las herramientas más utilizadas en internet, y debes tener claro, que tarde o temprano querrás añadir alguna personalización a tu web, por lo que lo mejor es crear un tema hijo cuanto antes si no quieres perder todo con la primera actualización de turno.

Debes de tener en cuenta que la comunidad que existe detrás de la plataforma de WordPress hace que ya hayan sido desarrolladas prácticamente todas las funciones que se te puedan pasar por la cabeza. haciendo que la integración con la plataforma sea muy sencilla.

Además de los plugins, en la mayoría de casos, si buscas por «snippets + lo que quieras realizar» lo más probable es que te encuentres algún fragmento de código que sólo tengas que copiar.

En lo referente a los temas hijo, únicamente deberás de prestar especial atención a la hora de definir las funcionalidades que quieres que tenga con respecto al tema padre en cuestión, a partir de ahí, has podido comprobar como el funcionamiento es muy sencillo, llegando a existir incluso plugins que te permiten instalar el tema sin necesidad de ningún conocimiento especial.

Atrévete a trabajar sobre un child theme completamente personalizado, enseguida notarás la diferencia con respecto a un tema convencional, consiguiendo maximizar la experiencia de tu sitio web y maximizar sus funcionalidades a un nivel superior.

Antes de despedirme, por supuesto quería agradecerte tu visita y pedirte, que si te ha gustado o crees que le puede ser de utilidad a alguien más, lo compartas en las redes sociales o a quien creas que puede ayudar.

¡Muchas gracias!

[wpbc_stamp]