Hoy tengo la suerte de traeros a un crack que nos va a desvelar lo fácil que es crear un child theme para WordPress.
Trabajo con él desde hace un año, y es un fiera del front end, un apasionado del desarrollo multiplataforma y un gran amante del surf. Y encima una grandísima persona 😉
Se llama Arturo Grau, y ha preparado esta guía paso a paso para que os resulte más fácil personalizar vuestro CMS sin quebraderos de cabeza.
Es el típico desarrollador de aplicaciones web de culo inquieto al que le encanta investigar y probar, así que a tras el salto te dejo con él y su sabiduría 😉
Índice de contenidos
Qué es un Child Theme?
¿Cuántas veces has modificado una plantilla de WordPress y has perdido los cambios al actualizar el tema?
¿Muchas verdad?
Pues bien, un child theme o «tema hijo» en WordPress se utiliza para realizar modificaciones o añadir funcionalidades en un «tema padre» instalado sin afectar a los archivos de éste.
Se trata del mejor método para hacer modificaciones en un tema, tanto para realizar pequeños cambios como para añadir complejas funcionalidades a la plantilla.
Dicho método consiste en crear un child theme en WordPress (conocido también como tema hijo) que prevalezca sobre el padre sin necesidad de copiar todo el tema original.
Ventajas de utilizar un child theme en WordPress
En cuanto te pones a trabajar con esta metodología te das cuenta de todas las ventajas que conlleva y lo fácil que es rectificar errores y recuperar los archivos originales.
Las ventajas más importantes de utilizar un tema hijo en WordPress son las siguientes:
- Actualizaciones: Cuando realizamos modificaciones en un tema original o tema padre, cuando se actualiza dicho tema perdemos todos los cambios que hayamos realizado. Yo he llegado incluso a perder el código de seguimiento de Google Analytics pensando que “por poner esto aquí no va a pasar nada”. Error, siempre que tocamos los archivos internos de un tema padre somos carne de actualización.
- Simplicidad: Si vas a hacer pequeños cambios, no hay nada más cómodo como trabajar en un directorio en el que tengas únicamente los archivos que vas a modificar.
- Velocidad: Trabajar de esta forma es bastante sencillo y rápido. Si queremos rectificar algún cambio solo tenemos que borrar los archivos del child theme en los que se encuentra dicho cambio y todo volverá a ser como antes.
- Sencillez: Es una buena manera de empezar a desarrollar en tema de WordPress, ya que podemos controlar fácilmente cualquier error y aprendemos mucho sobre la estructura y funcionamiento del tema padre. Y la verdad es que cuando entiendes uno los entiendes todos. Exceptuando algunas monstruosidades (en el mal sentido de la palabra) que me he encontrado por ahí.
Cómo crear un child theme en WordPress
Es hora de dejar de hablar de lo bonito que es trabajar en un WordPress child theme y empezar con la parte práctica.
Para esta demostración yo voy a utilizar un IDE que facilita bastante la vida de un desarrollador web.
El susodicho se llama PhpStorm, y si eres un tío o tía con principios y la cartera ocupa demasiado espacio en tu bolsillo, una vez terminada la prueba de 30 días pagarás por él.
Si por contra perteneces a la cofradía del puño cerrado, «buscarás otras alternativas gratuitas en el mercado digital».
Para empezar copiaremos nuestra instalación de WordPress en nuestra máquina local (tu ordenador).
Para realizar esto crearemos un nuevo proyecto en PhpStorm siguiendo los siguientes pasos:
- Hacemos click en «File > News Project from Existing Files» (por suerte lo escribo mejor que lo pronuncio)
- Seleccionamos la opción «Web server is on remote host, files are accessible via FTP/SFTP/FTPS»
- Damos un nombre a nuestro proyecto y hacemos click en «Next»
- En la ventana siguiente PhpStorm nos preguntará si seleccionamos un servidor existente o creamos uno nuevo. En nuestro caso tenemos que crear uno nuevo seleccionando la opción «Add new remote server»
- A continuación rellenamos los siguientes campos y hacemos click en «Next»:
- Name: Nombre de nuestro servidor (puede ser el que tú quieras)
- FTP host: Dirección de nuestro servidor FTP (consulta el panel de administración de tu hosting para obtenerla)
- User name: Nuestro nombre de usuario FTP
- Password: Nuestra clave FTP
- Recomiendo marcar la opción «Don’t check HTTP connection to server»
- En esta ventana debemos marcar el directorio que contiene nuestra instalación de WordPress y marcarla como tal haciendo click en el botón «ProjectRoot». En caso de que estés totalmente seguro de que sólo vas a trabajar con temas, o seas nuevo en esto del desarrollo en WordPress, recomiendo que marques como directorio de proyecto la carpeta «wp-content/themes». Hacemos click en «Next».
- En la siguiente ventana hacemos click en «Finish».
- Ahora toca la interminable espera hasta que se hayan copiado todos los archivos de nuestro proyecto. Durante la espera recomiendo visualizar esta filmografía.
Una vez terminada la instalación y con algo más de cultura cinematográfica en nuestro espíritu nos ponemos manos a la obra.
Lo primero es crear un directorio para el tema hijo en la carpeta wp-content/themes.
Se recomienda que el nombre del directorio termine en “-child”. El nombre de la carpeta no debe contener espacios para evitar errores.
En nuestro ejemplo estamos trabajando sobre el tema Bionick.
La estructura de directorios quedaría de la siguiente manera:
Como se puede apreciar en la imagen, tenemos la carpeta «bionickwp-child» en la que incluiremos todos los archivos de nuestro child theme.
El siguiente paso es crear el archivo «style.css» dentro de nuestra carpeta «bionickwp-child».
Este archivo debe comenzar con el siguiente texto:
/* Theme Name: Bionick Child Theme URI: http://example.com/bionick-child/ Description: Bionick Child Theme Author: Arturo Grau Author URI: http://ridingtheblue.com Template: bionickwp Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: right-sidebar, responsive-layout Text Domain: bionick-child */
Theme Name: Pondremos el nombre que queremos dar a nuestro tema hijo.
Theme URL: Si vamos a publicar nuestro tema online incluiremos la url desde donde se puede obtener. En su defecto se puede poner la url del tema original.
Description: Supongo que queda bastante claro que aquí tenemos que poner una pequeña descripción de nuestro tema hijo.
Author: Nuestro nombre.
Author URL: Recomiendo poner la url de nuestra página personal.
Template: Este apartado es muy importante ya que con él indicamos a WordPress cuál es el directorio del tema padre. En nuestro caso es “bionickwp”.
En cuanto a los apartados «Version», «License» y «License URI» recomiendo dejarlos como en el ejemplo.
Tags: Tags que describen las características principales de nuestro tema hijo. Este apartado suelo dejarlo vacío a no ser que vaya a publicar el tema para descarga pública.
Por último, y para que quede redondo, crea una imagen de 880 x 660 que identifique la plantilla y guárdala como screenshot.png para que sirva de imagen destacada de la plantilla en el menú de Temas de WordPress. Súbela a la carpeta del child theme y listo.
Encolar hojas de estilo
El siguiente paso es encolar las hojas de estilo del tema padre y el tema hijo.
Anteriormente se utilizaba el método @import en la hoja de estilo para importar la hoja de estilo del tema padre. Actualmente esto está considerada como una mala práctica.
La forma adecuada de encolar estos archivos es añadiendo una acción “wp_enqueue_scripts” y utilizar “wp_enqueue_style()” en el archivo functions.php del tema hijo.
Procedemos de la siguiente manera:
- Creamos el archivo «functions.php» en el directorio raíz de nuestro tema hijo, en nuestro ejemplo quedaría de la siguiente manera: «bionickwp-child/functions.php»
- Este archivo debe comenzar con una etiqueta de apertura PHP «<?php»
- Tras esta etiqueta de apertura debemos encolar los archivos CSS. Si tu tema utiliza más de un archivo CSS tendrás que encolarlos todos. En nuestro caso solo tenemos el archivo «style.css» así que nuestro código quedaría de la siguiente manera:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Si nuestra hoja de estilos del tema hijo contiene estilos CSS debemos añadirla también. Para hacer esto utilizaremos el siguiente código:
<?php
function theme_enqueue_styles() {
$parent_style = 'parent-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 )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>
Si por alguna razón te diese error, con este código no deberías tener problema:
<?php
/* Encolado De Archivos
-------------------------------------------------- */
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
/* Funciones Propias
-------------------------------------------------- */
Cabe destacar que en el archivo «functions.php» no es necesario escribir una etiqueta de cierre PHP «?>».
En los códigos que he incluido más arriba si que aparece esta etiqueta pero no es necesario incluirla. Mi archivo «functions.php» ha quedado de la siguiente manera:
<?php
function theme_enqueue_styles() {
$parent_style = 'parent-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 )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
Para activar nuestro child theme debemos seguir unos sencillos pasos:
- Subimos todos los archivos que hemos creado al servidor. Para hacer esto mediante PhpStorm hacemos click derecho en el directorio del tema hijo y seleccionamos la opción «Upload to nombre de nuestro servidor».
- Accedemos al panel de administración de nuestro WordPress y navegamos hasta «Apariencia > Temas».
- En esta página podremos ver nuestro tema hijo disponible para activar. Hacemos click en el botón «Activar» de nuestro child theme.
Con esto ya tendremos activado el tema hijo.
Puede que tengamos que volver a guardar los menús (Apariencia > Menús) y las opciones del tema incluyendo las imágenes de fondo y encabezados.
Trabajar con los archivos del tema hijo
Además de poder modificar la hoja de estilo de nuestro tema hijo, también podemos modificar otros archivos que están ubicados en el tema padre.
Para poder hacer esto sin realizar cambios en el tema padre directamente, debemos copiar el archivo del padre en el tema hijo, replicando la misma jerarquía de directorios que tiene en el tema padre.
Volviendo a nuestro ejemplo, si queremos modificar el archivo «header.php», simplemente copiaremos el archivo desde el tema padre al tema hijo.
Nuestra estructura de archivos quedaría de la siguiente forma:
Una vez tenemos el archivo copiado en el directorio del child theme, hacemos las modificaciones que queramos en el archivo.
En mi caso he añadido el código de Google Analytics:
Archivo «functions.php»
En el caso del archivo «functions.php», éste no sustituye al del tema padre, sino que se combina con él.
Las funciones del tema hijo se cargan primero y después todas las funciones del archivo «functions.php» del tema padre.
Esta es toda la información que necesitas para poder crear y utilizar temas hijos.
Lo mejor es empezar poco a poco con pequeños cambios e ir observando el funcionamiento de los child themes en WordPress.
Hasta la próxima!
Imagen | Freepik
¿Necesitas Hosting para WordPress de Calidad?
Yo ya estoy migrando todo ➡️ Raiola Nework (20 % de descuento)
Muy veloces, optimizados y con un soporte incomparable (comprobado).
Hola
muchas gracias por el artículo. Lo he hecho según lo explicado, y los códigos AdSense, dejaron de verse, a que se debe esto?
debo agregar algo más?
saludos cordiales
Hola Ernest, pues en principio no tiene nada que ver, a no ser que los anuncios estén puestos directamente en la plantilla, en cuyo caso deberías copiar los archivos single.php, archive.php y page.php en la carpeta del tema hijo.
Activa el tema padre de nuevo para asegurarte de que con ese se muestran los anuncios, y si es así, es probable que tu plantilla tenga una configuración adicional que afecte a la creación del child theme (revisa su documentación o pregunta a soporte).
Un saludo!
Una consulta, cuando tengo los archivos dentro de una carpeta en el tema padre. Hay que replicar con el nombre de la carpeta tambien?
No es un archivo de worpress, sino uno que llama a funciones creadas.
padre\functions\nombre-archivo.php
lo tengo que colocar asi?
hijo\functions\nombre-archivo.php
Gracias por la duda!
Eso es, simplemente debes mantener la misma estructura de carpetas del tema padre dentro del hijo 😉
Saludos!
Muchas gracias! Bruno por la respuesta
Hola, el artículo está genial explicado pero tengo un problema porque no consigo que mi tema child priorice el style.css que tengo dentro del tema hijo. He probado este código y varias formas más, pero no consigo que el style.css predomine. Resulta que el tema que utilizo contiene un style.css en raíz y dentro de un directorio del tema contiene otra hoja robojob.css. Pues bien, mi tema carga como CSS predominante el robojob.css desde el tema padre. No consigo ni siquierea indicarle que cargue esta hoja desde el tema hijo. He incluido los directorios de la misma forma que el tema padre y no me hace caso de ninguna forma ¡!
¿Cómo debería indicarlo? Agradezco mucho la ayuda!