Un tema hijo o child theme se usa para evitar perder los cambios hechos en tu theme cuando lo actualices. Sigue leyendo para aprender a crearlo.
Un child theme es un tema que utiliza los archivos e información de un “tema padre”, es decir, del tema que estás usando ahora mismo en tu web. Pero además tiene la capacidad de pasar por encima de él.
En este episodio del podcast hablo más en profundidad de qué es y de su importancia.
Ahora te voy a enseñar a crearlo de forma manual (es muy sencillo) y de manera automática, con un plugin.Índice
1. Crear un child theme de forma manual
2. Crear un child theme con un plugin
3. Curso de creación de child themes
Para hacerlo de forma manual vas a necesitar acceder a tu web por FTP. Si nunca lo has hecho, aquí tienes un vídeo que explica lo básico.
Ahora sí, vamos a aprender a crear un child theme de nuestro tema.
Crear un child theme de WordPress de forma manual
#1 Crear la carpeta del child theme
El primer paso es crear una carpeta dentro de wp-content/themes con el nombre del theme hijo. Puede ser el nombre que quieras aunque tendría sentido que tuviese relación con el tema padre.
#2 Crear la hoja de estilos (style.css) dentro del child theme
Crea un archivo style.css dentro de la carpeta del theme hijo.
Copia y pega las siguientes líneas en la nueva hoja de estilos de tu theme hijo.
/* Theme Name: A Theme Hijo Theme URI: http://loquesea.es Version: 4.0 Description: Tema hijo de A theme Author: Tu Author URI: http://loquesea.es Template: A-Theme */ /*----------------- Cambios a partir de aquí -------------------------------*/
Partes importantes que debes editar.
- Theme name: el nombre de tu theme hijo
- Template: el nombre exacto de la carpeta del theme padre
El nombre del template es muy importante porque dará a tu child theme el mismo aspecto que tiene el theme padre.
Los demás datos son sólo informativos y puedes poner lo que quieras.
#3 Crear archivo functions.php e importar estilos del tema padre
Anteriormente se solía importar el archivo style.css del tema padre utilizando @import pero según el codex de WordPress, esto ya no es la mejor práctica (aunque sigue funcionando).
Para hacerlo con el mejor rendimiento posible, debes crear un archivo llamado functions.php dentro de la carpeta de tu child theme y escribir las siguientes líneas.
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // Estos son los estilos del tema padre recogidos por el tema hijo.
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', 'my_theme_enqueue_styles' );
?>
Y ya está. Ve al menú de Apariencia > Temas de tu web y verás tu nuevo y reluciente child theme (aunque sin imagen destacada. Revisa el punto 5 de este tutorial para añadirla).
#4 Añadir estilos en el theme hijo
Ahora puedes añadir estilos a tu child theme. Los estilos se heredan del tema padre pero si escribimos clases personalizadas en el child theme se cargarán antes que las del padre.
Vamos a ver un ejemplo cambiando el color de los links a naranja.
/*
Theme Name: A Theme Hijo
Theme URI: http://loquesea.es
Version: 4.0
Description: Tema hijo de A theme
Author: Tu
Author URI: http://loquesea.es
Template: A-Theme
*/
/*----------------- Cambios a partir de aquí -------------------------------*/
/* Poner los links en naranja */
a { text-decoration: none; color: #EFB871; }
a:hover { text-decoration: underline; }
Con ese código lo único que hacemos es poner los links de nuestra web en naranja. El resto de estilos se seguirán heredando del tema padre.
#4 Añadir funciones en el child theme
WordPress da prioridad al archivo functions.php del tema hijo y después carga las funciones del tema padre.
No tienes más que añadir las funciones que no quieras que se pierdan con una actualización del theme padre.
Vamos a ver un ejemplo con una función muy típica: crear un widget.
<?php
/* Código para crear un widget */
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Sidebar Widgets',
'id' => 'sidebar-widgets',
'description' => 'These are widgets for the sidebar.',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
));
}
De esta forma, WordPress cargará esta función del theme hijo y el resto de funciones del theme padre.
#5 Paso extra: añade una imagen destacada a tu theme hijo
Para que tu child theme tenga una imagen destacada cuando vayas al menú de Apariencia > Temas en tu panel de administración de WordPress sólo tienes que arrastrarla a la carpeta de tu child theme.
Lo único que debes tener en cuenta es que el nombre de la imagen debe ser screenshot.png
Si quieres puedes copiar y pegar la imagen que viene en la carpeta del theme padre.
Crear un tema hijo de forma automática
Ahora aprenderás a crear un child theme de tu tema de forma automática. O, mejor dicho, utilizando un plugin. Sólo tienes que seguir estos pasos.
#1 Instala y activa el plugin Child Theme Configurator
Ve al menú Plugins, dale a añadir nuevo y busca “child theme configurator”. Instala y activa el plugin.
Una vez activo, aparecerá un nuevo submenú llamado Child Themes dentro del menú Herramientas.
#2 Analizar el tema padre
Si es la primera vez que instalas el plugin, sólo tendrás una opción en el paso 1, “CREATE a new Child Theme”. Con esa pestaña marcada, tienes que ir al paso dos y seleccionar el theme del que quieras hacer el tema hijo.
Una vez lo hayas hecho, haz click en el botón Analyze.
Ahora te aparecerán una serie de pasos más. En el caso de que te aparezca algún tipo de aviso, obvialo por el momento.
#3 Rellenar los datos de tu child theme
Puedes dejar los pasos del 4 al 6 tal y como están. Por lo general, no hay cambiar nada de esas opciones.
En el paso 7, como ves en la imagen de aquí arriba, puedes rellenar los datos de tu Child Theme. Nombre, descripción, página web… También puedes dejarlos tal y como están y cogerán la información del tema padre.
La opción del paso 8 dependerá de si ya has hecho modificaciones a tu theme o lo acabas de instalar.
Si ya llevas usando el theme padre un tiempo y has hecho modificaciones en los menús, widgets o el personalizanador, entonces marca la casilla. En caso contrario, no es necesario.
#4 Crear child theme
Y, por último, haz click en el gran botón azul para crear tu child theme.
#5 Comprobar que el child funciona antes de activarlo
Ve al menú Apariencia > Temas para comprobar que tu child theme está ahí. Tendrá la misma imagen destacada que el theme padre.