WordPress nos ofrece un montón de posibilidades para la creación de webs, entre ellas la posibilidad de crear temas hijos, más conocidos como Child Themes.
Los Child Themes en WordPress, son aquellos que heredan las características de otro tema padre (Parent Theme) del que dependen. La utilidad de los Child Themes reside en poder personalizar un sitio sin tener que crear un tema desde cero, ya que lo que no se defina en el Child Theme, éste lo heredará del tema padre.
Una de las ventajas principales, es que al hacer las actualizaciones del tema padre no perderemos los cambios que hayamos hecho en nuestro Child Theme, así que podemos modificarlo sin miedo a perder esas modificaciones actualizando el tema padre.
Índice del artículo
Pasos para crear y modificar un Child Theme
Si has comprado una plantilla es muy posible que encuentres dentro comprimido un archivo llamado nombredeltema-child.zip. Sólo tienes que descomprimirlo dentro de la carpeta themes de tu plantilla y prestar atención a los siguientes pasos que voy a explicar.
- En caso de no tener previamente un Child Theme, lo primero que haremos es crear una carpeta dentro de /wp-content/themes/ llamándola parecida al tema padre. Por ejemplo, si vuestro tema padre se llama miplantilla a la carpeta la llamaremos miplantilla-child.
- Si nuestra plantilla ya venía con un Child Theme, veremos dentro una hoja de estillos llamada style.css y sólo tendremos que poner el código css a continuación de lo escrito dentro del archivo, así de fácil. En caso contrario, creamos la hoja de estilos, un archivo style.css dentro de nuestra carpeta miplantilla-child. Abrimos el archivo, a continuación copiamos y pegamos lo siguiente.
/* Theme Name: Miplantilla Child (Poner aquí el nombre de vuestro Child Theme) Theme URI: https://iborra.es (Poner aquí la url de vuestra web) Author: Iborra Web Design (Poner aquí vuestro nombre) Author URI: https://iborra.es (Poner aquí la url de vuestra web) Description: Child Theme de Miplantilla (Opcional, breve descripción de vuestro tema) Version: 1.0.0 Template: miplantilla (Poner aquí el nombre del tema padre tal y cómo aparece en el apartado de Apariencia > Temas) */
Después de estas líneas es donde empezamos a modificar todos los estilos de nuestro sitio web, estos cambios no se verán afectados cuando actualicemos el tema padre.
- En nuestra plantilla comprada también veremos dentro el archivo functions.php y tan solo debemos escribir cualquier función debajo del encabezado del archivo. Si de lo contrario, no disponemos de este archivo, dentro de la carpeta miplantilla-child crearemos el archivo functions.php. Es el sitio en el que deberás indicar a WordPress toda la información relativa al proceso de carga del Child Theme desde el tema padre así como añadir funcionalidades extra que quieras para tu web. Abrimos el archivo, copiamos y pegamos el encabezado siguiente.
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
El archivo functions.php funciona de forma diferente. WordPress prioriza el archivo functions.php del tema hijo sobre el del tema padre, pero no lo sobrescribe sino que solo tendrá en cuenta las modificaciones o funciones añadidas del tema hijo, por lo tanto no hace falta copiar entero el fichero functions.php del tema padre.
Si queremos añadir algunas hojas de estilo .css o archivos .js que hemos añadido dentro de nuestro Child Theme, debemos realizar la llamada desde el archivo functions.php del tema hijo. Os pongo un ejemplo a continuación de como quedaría junto al código anterior.
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'lightbox-style', get_stylesheet_directory_uri() . '/css/lightbox.css' );
wp_enqueue_script( 'lightbox-js', get_stylesheet_directory_uri() . '/js/lightbox.js', array ( 'jquery' ), 1.1, true);
}
?>
- Ahora activamos nuestro Child Theme miplantilla-child como cualquier otro tema dentro de la administración de WordPress.
Añadimos estilos a nuestro Child Theme en el archivo style.css. El tema hijo, ya activo, hereda el CSS de la hoja de estilos original, salvo que añadamos clases personalizadas, en cuyo caso tomará primero las del tema hijo, aplicando el resto de la hoja de estilos del tema padre.
- También podemos personalizar los ficheros del tema, es decir, los archivos .php o crear unos nuevos. Por ejemplo, imaginemos que queremos cambiar el archivo single-product-reviews.php, copiamos este archivo del tema padre y lo pegamos a la carpeta de nuestro Child Theme para hacer las modificaciones correspondientes. Es importante tener en cuenta aquí que debemos seguir la estructura de carpetas del tema padre. Si el archivo original en el tema padre esta en en la ruta /miplantilla/woocommerce/single-product-reviews.php, en el tema hijo debe seguir esta misma estructura, la ruta sería /miplantilla-child/woocommerce/single-product-reviews.php. Así de fácil.
Con estos pasos ya tendremos listo nuestro Child Theme y estaremos preparados para modificar nuestra plantilla sin miedo a futuras actualizaciones.
El mejor plugin para crear un Child Theme en WordPress
Para los que no son programadores y no quieren meterse con tanto código o la plantilla comprada carece de un tema hijo, el siguiente plugin os puede venir muy bien.
- Child Theme Configurator
Una vez descargado y activado, debéis ir a la pestaña del menú de herramientas. Esa será la página principal sobre la que deberéis de realizar todos los ajustes que necesitéis.
Uno de los aspectos que más me gustan de este plugin es el proceso guiado que ofrece para la creación paso a paso del tema hijo. Por si no lo veis claro, aquí os dejo los pasos que se deben seguir:
Ir a Plugins > Añadir nuevo y buscar ‘Child Theme Configurator’.
- Instalar.
- Activar.
- Menú lateral > Herramientas > Temas hijo.
- Clic en Crear nuevo tema hijo.
- Elegir el tema en el que deseáis hacer la copia.
- Clic sobre Analizar.
- Escoger el nombre para la carpeta en la que se va a guardar el Child Theme.
- Clic en Crear nuevo tema hijo.
Estos son los pasos principales. Una vez terminado ir a Apariencia > Temas y activar el tema creado. Una vez activado y comprobado que funciona, ya no hará falta para nada el plugin descargado, por lo que si queréis, podéis borrarlo para ocupar menos recursos.
Ir al sitio oficial del plugin
!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design
