Una vez hayas instalado WordPress, tarde o temprano te surgirá la necesidad de modificar ciertos aspectos visuales o funcionales de tu página web.
Algunos temas de pago te ofrecen gran cantidad de posibilidades para personalizar tu tema. Sin embargo, puede darse el caso de que necesites realizar alguna modificación que tu tema no te permite y decidas hacerlo, por ejemplo, mediante CSS.
Para este caso, entre otros muchos, es necesario crear un tema hijo en WordPress o child theme, ya que si no lo creas, todas las modificaciones que realices se borrarán cuando realices la próxima actualización de tu tema.
En este artículo te enseñaré todo lo que necesitas para crear un tema hijo en WordPress de manera manual o a través de un plugin.
Bien, ¡empecemos!
¿Qué es un tema hijo en WordPress?
Un tema hijo o child theme es una «copia» complementaria del tema principal de tu web (el tema padre) que hereda las funcionalidades de éste, permitiéndote realizar modificaciones sobre este tema hijo sin que se borren los cambios al momento de actualizar el tema padre. Es decir, las modificaciones de código que hayas hecho no se borrarán porque las habrás realizado sobre los archivos del tema hijo, mientras que lo que actualizarás será el tema padre.
Crear un tema hijo en WordPress de forma manual
La mejor forma de crear un tema hijo en WordPress es hacerlo de forma manual. Para este ejemplo haré el proceso a través de cPanel que es el que me provee mi servicio de hosting y la mayoría de proveedores de hosting. Otros proveedores pueden otro tipo de paneles pero siempre son muy similares a este cPanel, así que no te preocupes.
Bien, el primer paso es el al «Administrador de archivos» de cPanel.
Una vez dentro debes ubicar la siguiente ruta: wp-content/themes/
Después, en esa misma ruta deberás crear una carpeta para el tema hijo. Para nombrar esta carpeta yo siempre recomiendo escribir el nombre del tema padre y añadirle la palabra «child» al final, de forma que sea fácil identificar el tema hijo y a qué tema padre está asociado.
Para que lo entiendas mejor, yo en mi ejemplo estoy utilizando el tema padre «Storefront», por lo que el nombre que pondré a mi carpeta para el tema hijo será «storefront-child».
Bien, ahora dentro de la carpeta que hemos creado debemos crear dos archivos: un archivo style.css y un archivo functions.php
En el interior del archivo style.css tienes que insertar un código como el siguiente:
/*
Theme Name: storefront child theme
Description: Tema hijo para hacer personalizaciones de código
Author: Librenetworks
Author URL: https://nombredetuweb.com
Template: storefront
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storefront-child
*/
Lógicamente, en tu caso tendrás que adaptar los valores del código por los tuyos. A continuación te explico a qué se refiere cada apartado:
- Theme Name: hace referencia al nombre del tema hijo. Como te dije antes es recomendable que el nombre incluya el nombre del tema padre.
- Description: aquí puedes escribir una descripción de tu tema hijo.
- Author: aquí puedes indicar quién es el autor del tema hijo.
- Autor URL: en este campo debes indicar el sitio web del autor del tema hijo.
- Template: este apartado tienes que escribir el nombre de la carpeta del tema padre.
- Version: indica la versión de tu tema hijo.
- License: aquí va el nombre de la licencia.
- License URI: Url con información sobre la licencia utilizada.
- Text Domain: sirve para identificar las traducciones del child theme.
Ahora, el siguiente paso es editar el archivo functions.php y agregar este código:
function enqueue_styles_child_theme() {
$parent_style = 'parent-style';
$child_style = 'child-style';
wp_enqueue_style( $parent_style,
get_template_directory_uri() . '/style.css' );
wp_enqueue_style( $child_style,
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles_child_theme' );
Con esto ya tendrás listo tu tema hijo o child theme. Para comprobarlo dirígete a Apariencia > Temas y, si has realizado todo correctamente, podrás ver que aparece tu recién creado child-theme.
Crear un tema hijo en WordPress mediante un plugin
Si prefieres no meterte en temas de código y crear un tema hijo en WordPress de una forma más sencilla, lo puedes realizar a través de un plugin.
Como siempre ocurre en WordPress, existen multitud de plugins para realizar una misma tarea. Para este ejemplo, yo utilizaré el plugin Child Theme Configurator que funciona muy bien en mi opinión.
Para ello, lo primero que vamos a hacer es instalarlo a través del repositorio de plugins de WordPress. Vamos a Plugins > Añadir nuevo, escribiendo el nombre del plugin. Una vez lo encuentres, darle a instalar y posteriormente a activar.
Una vez tengas Child Theme Configurator instalado y activado, en tu panel de backend de WordPress habrá aparecido un nuevo apartado, dentro del apartado Herramientas.
Si accedes a este nuevo apartado podrás visualizar una primera pestaña con los primeros pasos para crear un tema hijo en WordPress.
Una vez hayas realizado los 3 primeros pasos, se te mostrarán nuevos pasos que te recomiendo dejar por defecto, por lo que ve directamente al paso 9 y haz click en «Create New Child Theme».
Y ¡tachán! Aparecerá un mensaje que te indicará que tu tema hijo ya está creado.
Ahora solo tienes que activarlo yendo a Apariencia > Temas y activar tu tema hijo.
Ahora que ya has creado tu tema hijo también te recomiendo desinstalar el plugin Child theme Configurator, ya que una vez creado el tema hijo no lo necesitas de nuevo.
Conclusión
Como has podido ver en este artículo, crear un tema hijo en WordPress es una tarea fundamental a la hora de realizar cambios con código a tu sitio web y no perderlos con las actualizaciones. Así que no esperes un minuto más y corre a crear un tema hijo en WordPress para tu sitio web.
Recuerda que en el blog de Librenetworks tienes un montón de artículos gratuitos sobre cómo crear tu página web, mejores plugins, etc.
Por mi parte esto es todo por hoy. ¡Hasta el próximo artículo!