Crear un tema hijo en WordPress es una tarea muy sencilla. Podemos hacerlo a mano o utilizar algún plugin.

Ya sabes que es muy aconsejable trabajar con temas hijos en lugar de trabajar directamente con el tema padre u original y si no lo sabes, te lo digo yo.

Aunque existe algún plugin que nos facilita este trabajo, en este tutorial lo vamos a hacer a mano y en otro tutorial utilizaremos un plugin.

No dejes que las prisas te dominen y utiliza siempre temas hijo.

¿Qué es un tema hijo?

No voy a extenderme mucho.

Básicamente, un tema hijo es un tema para WordPress que se basa en otro tema (tema padre) y hereda sus funcionalidades, etc..

Para que nos entendamos. Si el tema padre tiene x características, el hijo las heredará sin necesidad de tenerlas implementadas el mismo.

El tema hijo puede extender las funcionalidades del tema padre e incluso sobreescribirlas.

Ejemplo:

Pongamos que el tema padre tiene un título grande en la home de color azul. Pues bien, el tema hijo, a parte de otras cosas, podría añadir el código necesario para modificar el color de ese texto y que sea verde.

Es sólo un ejemplo. Pero a medida que vayamos trabajando con temas hijo, ya te irás acostumbrando.

Vamos a empezar por el principio.

Crear un directorio para el tema hijo

En primer lugar, a parte de tener instalado el tema padre, claro, vamos a crear un directorio con el nombre el tema dentro del directorio «themes» de nuestro WordPress.

Como ya digo, el directorio llevará el nombre de nuestro tema.

Para este ejemplo voy a utilizar «dinapyme«. Si no os parece mal.

Entonces, con lo que acabamos de comentar, si lo hacemos tendríamos algo como lo siguiente:

Ahí tenemos la capeta o directorio «dinapyme«.

Crear el fichero de estilos

El siguiente paso que vamos a dar es crear el fichero «style.css» dentro del directorio de nuestro tema hijo.

A continuación pongo una serie de lineas que, aunque no son todas obligatorias si que es aconsejable:

/*
 Theme Name:   Dinapyme
 Theme URI:    https://dinapyme.com/tema-dinapyme
 Description:  Tema hijo de Twenty Sixteen
 Author:       Oscar Abad Folgueira
 Author URI:   https://dinapyme.com
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

Hay muchas más opciones que podemos indicar pero por ahora nos vale con esto.

Creo que está bastante claro aunque me gustaría comentar la línea siguiente:

Template:     twentysixteen

Mediante la línea anterior le indicamos quién es el padre de nuestro tema. En este caso el padre de nuestro tema será Twenty Sisteen (twentysixteen).

Así sin más, lo guardamos en el directorio de nuestro tema y podemos verlo ya en el apartado de temas de nuestro WordPress. Bien es cierto que nos falta alguna cosilla todavía.

Ahí lo tenemos.

Todavía faltan algunas cosas pero ahí está.

Si abrimos la página web veremos lo siguiente:

Ah! Sorpresa!

No te lo esperabas así, ¿verdad?

No te preocupes, no pasa nada, nos falta una cosa.

Importar los estilos del tema padre

Eso es, en la imagen anterior vemos que no los estilos del tema padre y esto tenemos que indicárselo también.

Hay varias formas de hacerlo pero yo te voy a indicar una de ellas.

Dentro del fichero style.css de nuestro tema hijo, el que hemos creado hace un momento, añadiremos una línea como esta pero sustituyendo el nombre del directorio del tema padre por el que sea tu caso.

Como en mi caso es «twentysixteen«, añadiría esto después de los comentarios:

@import url(‘../twentysixteen/style.css’);

Con lo que el fichero style.css quedaría así:

/*
 Theme Name: Dinapyme
 Theme URI: https://dinapyme.com/tema-dinapyme
 Description: Tema hijo de Twenty Sixteen
 Author: Oscar Abad Folgueira
 Author URI: https://dinapyme.com
 Template: twentysixteen
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url('../twentysixteen/style.css');

Guardamos y volvemos a probar:

Ahora si, esto ya es otra cosa.

Ahora mismo, el tema hijo es igual que el tema padre.

Imagen screenshot

Pero antes de terminar quiero decirte cómo cambiar la imagen del tema que aparece en el apartado temas del escritorio de WordPress y que ahora mismo tenemos vacía, sin imagen.

Establecer screenshot del tema

A esta imagen se le llama screenshot.

Si miramos en cualquier tema que tengamos a mano, veremos que incluye un fichero de imagen llamado «screenshot.png» como es el caso del tema Twenty Sixteen:

Pues bien, podemos copiar ese fichero y pegarlo en el directorio de nuestro tema. De esta forma la imagen sería la misma en ambos temas.

Pero así no se distingue mucho cual es el padre y cual es el hijo a parte del nombre del tema.

Y como nosotros/as somos muy profesionales, lo que hacemos es crear una imagen screenshot.png personalizada para que se diferencien bien:

Así se ve mejor.

Bueno, ya tenemos nuestro tema hijo listo, instalado y activado.

El Video Tutorial

A continuación os dejo un video tutorial sobre esto:

Conclusiones

El uso de temas hijos es una buena práctica y yo casi diría que obligatorio.

Para crear un tema hijo tenemos que crear un directorio dentro del directorio themes de nuestro WordPress con el nombre del tema.

Crearemos también un fichero style.css dentro de este nuevo directorio y añadiremos los datos del mismo.

Ponemos especial atención en la línea en que indicamos cual es el tema padre.

En el fichero style.css también añadimos un @import para importar el fichero de estilos del tema padre.

Por último hemos añadido una imagen screenshot.png para que se vea en el apartado Temas de escritorio de WordPress.

Esto es sólo el comienzo, a partir de aquí, modificaríamos el tema hijo cuando fuese necesario.

Espero que este tutorial os sea de ayuda.

Más adelante haré otro en el que usaremos un plugin para hacer esto sin tener que tocar código.

Si tenéis cualquier duda, consulta, etc.. sobre este tutorial o cualquier otro tema relacionado con WordPress, me podéis enviar un mensaje a través del formulario de contacto de esta web.

Hasta la próxima!

Saludos.