Aprende a crear tu propio Child Theme para cualquiera de tus webs realizadas en WordPress. ¡Es más fácil de lo que crees!

Bueeeenas a todos de nuevo, otra semanica más por aquí :). Este finde te traigo algo que es tan sencillo como útil.

¡Madremia la de veces que la habré liado por no tener un Child Theme!

Cabe decir que a mí me lo enseñó Víctor Campuzano, que por poco me pega una paliza cuando vio que yo no lo había configurado nunca… Es un agresivo de la vida y a mi me va a crecer la nariz como siga escribiendo así jajajjaja.

¿Qué es un child theme?

Un Child theme o también conocido como Plantilla Hija, es simplemente una plantilla que coge todos los estilos de la plantilla padre o theme principal. Obviamente, para que el Child Theme coja los estilos y funciones de la plantilla madre, esta plantilla madre debe de estar instalada.

De este modo, el child theme cogerá toda la estructura del Tema Padre y podrá utilizar todas las funcionalidades del mismo. Así, cuando vayamos a modificar el código del Tema Padre en vez de modificar el archivo en la carpeta del Padre, lo modificaremos en el Child para que cuando actualicemos la plantilla padre, no sobre escriba los archivos que hemos modificado y tener que hacerlos de nuevo.

Si estás un poco perdido no te preocupes, sigue leyendo que ahora con las imágenes lo vas a entender mucho mejor.

Pasos a seguir para crear nuestro child theme

Yo en mi caso crearé un Child Theme para la plantilla Divi de Elegant Themes.

Crear su carpeta en nuestro servidor

Para esto, tendremos que acceder por FTP a nuestra web e ir a la ruta:

midominio.com/wp-content/themes/

Aquí encontraremos las plantillas que tengamos instaladas. Si tienes instaladas plantillas a las que no le estás dando uso te recomiendo que las borres.

En esta sección, tenemos que crear una carpeta vacía y llamarla como queramos, yo en mi caso la llamaré Divi-child.

Creando el style.css

Bien, que sepas que ya tienes el 50% de la instalación de tu child theme. ¿Demasiado fácil? ¡Ya te lo he dicho al comienzo del post!

Ahora sólo tenemos que crear un archivo dentro de esa carpeta al que llamaremos: style.css

Esta es la parte más importante, en el archivo style.css tenemos que poner el siguiente código. Depende del theme ahora veremos que tendrás que poner unos datos u otros, pero lo explico debajo del código.

Utilices la plantilla que utilices sólo tienes que cambiar en ‘Template: Divi’ el nombre de mi plantilla por el nombre de la tuya, recuerda que sea el mismo que el del padre.

Y luego la parte más importante es el trozo de código dónde pone: @import url(“../Divi/style.css”); 

Ahí tendremos que sustituir el nombre de mi theme ‘Divi’ por el de tu plantilla. Si por ejemplo tuvieses una plantilla que se llamase Magazine, pues vas a tu FTP a la ruta /wp-content/themes/ miras como se llama la carpeta de dicha plantilla y sustituyes los datos del código que te he pasado, así que se quedaría algo como esto:

Activando nuestro child theme

Si hemos realizado bien los pasos anteriores, ahora si vamos en nuestro panel de administración del wordpress a: Apariencia > Temas. Veremos que tenemos un tema idéntico al padre con el nombre que le hemos puesto a la carpeta vía FTP.

Simplemente pinchamos sobre activar dicho theme y ya tendremos funcionando nuestro Child theme.

Funcionalidades de nuestro Tema Hijo

Aquí hay dos grandes grupos de usos distintos para darle a nuestro tema hijo, los estilos y las funciones.

Estilos

¿Cuando probablemente toquemos los estilos de nuestro child theme? Pues por ejemplo si quieres modificar el color o el tamaño de algún heading como el <h2>, si modificásemos el css en nuestro tema padre, cuando salga una actualización y lo actualicemos esta modificación se perderá ya que en la actualización se sobre-escribirá el archivo style.css entre otros muchos.

Para no tener ningún problema, iremos al style.css de nuestro child theme. Veremos que estará completamente vacío  excepción de las dos líneas de código que hemos añadido para que funcione el child theme.

No pasa nada, está todo bien. Sólo tienes que identificar la clase css que quieres modificar, en este caso sería la clase ‘.h2’.

Por lo que si por ejemplo quiero poner todos mis h2 en color blanco, sólo tendría que añadir en este style.css algo como:

.h2 {

color:#fff;

}

Y así con cualquier estilo de cualquier clase, piensa que este ejemplo ha sido una tontería pero a esto se le puede sacar mucha chicha sin que luego la liemos parda como hacía yo…

Funciones

Esta me gusta tanto o más que la opción de modificar los estilos. Por ejemplo, cuando instalas Divi (la plantilla que utilizo en este site), por defecto viene el footer con la firma de Elegant themes.

Esta firma, a mi gusto queda mal y quiero poner algo personalizado con mi marca, por lo que tengo que modificar el archivo footer.php que es donde está ese trozo de código.

Pues en vez de modificar el footer.php de mi tema padre, lo que hago es copiar el archivo footer.php, subirlo por FTP a la carpeta de mi child theme y una vez subido, me voy de nuevo al panel de administración de wordpress a Apariencia > Editor dónde veré en la columna derecha el nuevo archivo footer.php. Este es el que tenemos que modificar sin miedo, una vez modificado ya veremos correctamente nuestra firma del footer y no tenemos que tenerle miedo a que se pierda con la próxima actualización.

Lo mismo que hemos hecho con este archivo podemos hacerlo con cualquiera. Otro archivo muy utilizado en estos casos es el functions.php.

Sólo tenemos que tener claro que no tenemos que modificar el del padre principal, si no que tenemos que hacer una copia y subirlo a la carpeta de nuestro child theme. Una vez allí ya podremos modificarlo desde el panel de administración del mismo WordPress.

¡Y eso es todo! Ya has aprendido a crear tu propio child theme y modificar tanto estilos como funciones sin perder dichas modificaciones en la próxima actualización :).

¿Te ha gustado el artículo de esta semana? ¿Tienes alguna duda? ¡Escríbelo en los comentarios para que todos podamos aprender!