¿Por qué usar un child theme?

¿Necesitas tocar las tripas de tu wordpress pero tienes miedo de romper tu tema? Los child theme no son necesarios para todos los casos, pero si te dedicas a personalizar los temas que usas en tus webs un poco más que el resto (tocando código) no te gustara ver como pierdes todos esos cambios que has hecho después de la actualización de un tema de wordpress. Básicamente un child theme te permite crear css, javascrypt y código php para tu tema sin que este contenido nuevo se borre tras las actualizaciones del tema padre.

¿Cómo creo un child theme?

Esto de los “child themes” o “temas hijo”, aunque suena un poco complicado, realmente no es difícil. En wordpress tenemos el plugin “Child Theme Configurator” que nos ayudará con esto. Este plugin nos ayudará a crear la base para nuestro theme, y luego podremos añadirle las funcionalidades que queramos.

En la imagen anterior podéis ver la interfaz del plugin, y aunque podríamos explicaros cómo crearlo paso a paso realmente es elegir un nombre para tu tema, la imagen principal de este (formato ideal 880px x 660px) y elegir el tema padre que vamos a usar (en nuestro caso “Divi”, aunque ya veremos que esto no importa mucho a priori). Una vez tengáis estos parámetros rellenos os dejará descargar en vuestro ordenador un archivo comprimido en formato .zip que será vuestro preciado child-theme (desde la pestaña files de vuestro plugin).

Ya lo tengo creado, pero ahora… ¿Cómo creo el código para mi child theme?

Bueno, aunque el plugin sirve para crear la base para nuestro tema, realmente desde el mono del código para editar los temas lo hacemos descomprimiendo el archivo que te has descargado, editándolo y luego volviéndolo a comprimir en formato .zip (importante, ya que el formato .rar no lo detecta bien wordpress y no te dejará instalar el tema). Una vez descargado tendrá que quedar algo similar a esto:

Un “function.php“, el cual tendrá la lógica de nuestro tema. El código que veáis dentro de este archivo sirve para enlazar el css de nuestro child theme. Nosotros simplemente añadiremos nuestro código debajo de la linea “//END ENQUEUE PARENT ACTION”.

El archivo “style.css” contiene información sobre nuestro tema en la cabecera, como nombre del tema, versión de este o creador y su página web. Si queréis podéis dejar todo por defecto, lo único que tenéis que saber es que si queréis usar vuestro child theme como otro tema distinto al que habéis puesto en la configuración de plugin “Child Theme Configurator” es cambiar el campo de “Template”, ya que este campo indica a nuestro tema cuál es el tema padre.

Y por último pero no menos importante tenemos la imagen de nuestro tema. En caso de querer cambiarla quitad la imagen que hay y poned otra cualquiera, pero poniendo de nombre de imagen “screenshot.png”, en nuestro caso hemos puesto de imagen nuestro querido logo.

¿Cómo crear un nuevo módulo para mi tema de wordpress?

Aunque hay muchas formas nosotros vamos a contaros cómo hemos creado un módulo para mostrar una lista de páginas en un menú formato tarjetas flex. Aunque no se entienda mucho, es el menú que podéis ver en esta foto.

En resumen, es un shortcode que nos permite crear esta estructura de manera muy sencilla y nos sirve para cualquier web que hagamos en la que usemos divi (os explicamos más adelante cómo hacerlo con cualquier tema), de modo que tenemos un recurso más para crear nuestras web que es solamente nuestro, nadie más dispone de él, quedando algo único y tuyo. Y lo que es más importante aún: 100% configurable.

Si queréis crear vuestros propios shortcodes mirad este otro artículo en el que hablamos en profundidad sobre la creación de shortcodes para wordpress.

Cambiar el CSS de mi child theme

El archivo “style.css” como hemos dicho antes nos sirve para poner el css de nuestro tema. Este archivo se carga después del archivo style.css del tema padre, de modo que se aplican todos los estilos del tema padre y luego se aplican los tuyos, modificando lo que ya existiese. Por ejemplo, si en el tema padre indicas que el texto de los H1 no deben llevar negrita y en el tema hijo le indicas que los H1 van en negrita, se sobrescribe el tema del padre a la hora de visualizar la web y se aplican los estilos de nuestro CSS sobre los del padre, pero conservando todos los estilos del tema padre que no modifiquemos.

¿Y qué más hay que hacer?

Pues esta es la mejor parte, sólo nos queda comprimir la carpeta (¡EN FORMATO ZIP!) que contiene todos nuestros archivos y subirlo a nuestro wordpress, quedando algo tal que así:

Orbital es nuestro tema usado (ya os contaremos un poquito más sobre el por qué de este tema en otro post) y el mono del código es nuestro nuevo child theme con todas nuestras funcionalidades.

¡Anímate a hacer un poco el mono con los child themes!