139 | Cómo hacer tuyo un child theme de Genesis

En el episodio 139 de WordPress semanal te hablo de cómo coger cualquier child theme de Genesis ya existente para hacer lo tuyo. Vamos allá. Hola, hola, Soy Gonzalo, de GonzaloNavarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mayor satisfacción ni mejor inversión que la de crear y gestionar tu propia web con WordPress. Y este episodio está enfocado para aquellos que queréis dar ese saltito, queréis ir un paso más allá y queréis transformar un child theme ya existente en uno vuestro. Y lo he enfocado a Genesis porque pienso que dentro de los que me escucháis, dentro de mi audiencia, muchos de los que seguís una aproximación un poquito más técnica, más enfocada a ir aprendiendo código y a ir modificando vosotros mismos, pues vuestros teams. En este caso, pues muchos sois de perfil Genesis, pero realmente gran parte de este episodio puede ser muy aprovechable para aquellos que no uséis Genesis, porque realmente lo que estoy hablando es cómo coger un child theme que ya existe y poder hacerlo vuestro, ponerle el nombre que queráis y sentar las bases, digamos, para un proceso de modificación de ese theme original o de ese child theme original. Bueno, básicamente entonces vamos a hablar de eso. Os digo rápidamente. Primero voy a hacer un repaso sobre los frameworks, los temas padre, los child themes, para que estemos todos en la misma línea. Después os voy a explicar el proceso en sí. Me voy a meter en qué tenéis que hacer técnicamente para convertir un child theme de Genesis, uno que ya existe, que compráis en StudioPress, en SEO Themes. Bueno, en estas hay muchos sitios, cada vez más, donde comprar child themes de Genesis. Entonces voy a decir básicamente tres, cuatro puntos clave que tenéis que seguir para hacer lo vuestro, digamos. Os voy a hablar de si esto está bien o está mal, de si tienes que sentirte mal por hacer esto, por coger algo que ya existe y. Y hacerlo tuyo, digamos. También te quiero hablar un poco en el caso de que esto lo estés haciendo para un cliente, cómo haría yo, o qué te aconsejo hacer. Y luego te quiero hablar también, cómo va enfocado a Genesis este episodio, pues de algunas ventajas de modificar un thing desde el punto de vista de hacerlo con Genesis, a diferencia de no hacerlo con Genesis, así como unos consejillos finales si te quieres adentrar en esto de dar un paso más allá y adentrarte en el desarrollo. Bueno, todo eso en un segundo. Pero antes, como siempre, vamos con las novedades de mi web. ¿Qué está pasando en Gonzalo Navarro ES? Bien, como cada semana, ya sabéis, tenéis un vídeo de la zona código. En este caso voy un poco en la línea de los últimos vídeos de la zona código y sigo explicándote cosas sobre, pues yo diría optimización, un poco de mantenimiento, cosas que vienen bien en general para tu web. Y en este caso el vídeo es cómo vaciar la papelera de WordPress automáticamente. No sé si lo sabéis, pero por defecto WordPress elimina definitivamente los post que hayas enviado a la papelera 30 días después de haber sido borrados por ti en este caso. Pero puedes cambiar ese componente comportamiento y hacer que se borren cada más o cada menos tiempo o incluso que se eliminen directamente y por completo, sin esperar ningún día, sin esperar nada, es decir, que cuando borres un post se elimine para siempre. Tienes varias opciones y es muy facilito. Por código podemos hacer dar unas instrucciones para que WordPress se comporte de una forma u otra. Esto es lo que vemos en el vídeo 90 ya de la zona código, os lo dejo en las notas del programa. Y luego como curso del mes, pues tenemos el de Iniciación a Gutenberg, que os está gustando mucho. He visto que ha habido varios que os habéis suscrito solo por este curso, así que me alegra que os esté sirviendo. No comento de nuevo las lecciones porque ya las comenté en el episodio pasado y en el anterior, pues que fue el episodio un poco de promoción de ese curso, pero por supuesto tenéis el enlace y ahí tenéis pues toda la información, todas las clases para que podáis ver si os interesa o no y si estáis apuntados, pues que os vayáis de lleno a ello, ¿Vale? Tenéis pues eso, cómo prepararos o cómo hacer pruebas antes de pasar a Gutenberg, cómo usar Gutenberg, todo lo necesario para adaptarte a WordPress 5.0 y a su gran novedad, el editor Gutenberg. Fantástico. Vamos ahora al plugin de la semana que es para incluir opciones en el personalizador de WordPress cuando desarrolles un theme. Y esto de desarrolles es importante. El plugin se llama Kirkey y te va a permitir incluir de forma más sencilla opciones dentro del personalizador de WordPress, ya sabéis que si vais a apariencia personalizar, pues vais al personalizador que es como estar en la parte frontal de tu web y ahí a la izquierda pues tienes una barra lateral con opciones y cuando uno está desarrollando un theme pues es interesante y cada vez más porque en WordPress se tiende a eso, poner ahí opciones, opciones de ajustes, opciones de diseño, antes casi todas enfocadas al diseño, ahora también las de ajustes tienden a ir a esa zona y es un plugin muy enfocado a desarrolladores que crean un thing desde cero. Debes tener nociones de PHP, de JavaScript, incluso alguna experiencia con las APIs del personalizador de WordPress, al menos así lo recomienda el creador o los creadores de este plugin de nuevo que se llama Kirk y si estás en ese punto, si ese es tu caso, pues es un plugin que puede ahorrarte mucho tiempo en el desarrollo. Este ya es un poco más avanzado. Bueno tenéis el enlace, las notas del programa, recordad este es el episodio 139. Y ahora ya sí vamos con el tema central del programa, cómo hacer tuyo un child theme de Génesis. Y como os decía, quiero hacer primero un repaso sobre qué son los frameworks, los temas padre, los child themes, seguramente lo tengas claro, pero un repasito rápido. Primero un thin framework según WordPress. Org, según la página donde En Core WordPress. Org ahí tiene una definición y básicamente nos dicen es un conjunto de funcionalidades y características que facilitan el desarrollo de tus propios themes. Eso es un framework, es digamos un marco de trabajo que te va a ayudar o te va a dar unas herramientas para que puedas aprovecharlas en el desarrollo o en la modificación de un theme. Y esto puede venir empaquetado de distintas formas, digamos ese framework o o ese conjunto de opciones, pero en el caso específico de Genesis se trata de un tema padre, tú instalas Genesis Framework como si fuese un thing cualquiera, pero luego vas a tener que utilizar un tema hijo para que se aproveche, para que herede las posibilidades que te da ese framework, en este caso Genesis. La gracia de esto es que no tienes que tocar el tema padre, en este caso el framework para absolutamente nada y todas las modificaciones que hagas serán en el tema hijo. En realidad la mecánica es la misma que esta hiper recomendación que te va a hacer todo el mundo que te explique cómo hacer una web con WordPress. Todo el mundo te va a decir cuando instales un tema, después haz un tema hijo para poder hacer las modificaciones en el hijo y poder actualizar el tema padre sin problemas. En este caso no es difícil comprender cómo funciona Genesis Framework, porque el proceso es el mismo, lo que pasa que te trae ya en sí ese tema padre, te trae pues como digo, una serie de herramientas, una serie de características que te van a facilitar, una vez te acostumbres a utilizarlas, el desarrollo o la modificación del funcionamiento y del aspecto de tu web. ¿Sí? Bien, y luego si estás empezando en esto de la creación de child themes, lo que te recomiendo es que cojas uno que ya exista, como te decía al principio, pues uno de StudioPress, de Zig Zag Press, de donde sea, y que lo modifiques para hacer lo tuyo. ¿Y qué quiere decir esto de hacer lo tuyo? ¿Que te llevo diciendo desde el principio del episodio? Pues básicamente es una serie de puntos que te voy a comentar a continuación. Primer paso para hacer un Child Thing de Genesis tuyo. Pues lo primero que tienes que hacer es renombrar la carpeta del child theme y meterla en la carpeta de themes de WordPress. ¿Esto cómo se hace? Bien, cuando tú compras o te descargas un child theme de Genesis de la web que sea lo que pues te va a venir un archivo zip, como cada vez que descargas un thing, un plugin, lo que sea, te viene comprimido en un archivo zip. Bien, descomprime ese archivo en tu ordenador, descomprime el child theme original y en esa carpeta que vas a tener descomprimida, pues con el nombre original del child theme, simplemente cámbiaselo al nombre que tú le vayas a dar a ese child theme. Por ejemplo, si te has descargado Genesis Sample theme, pues ese es el nombre que vendrá en la carpeta, vendrá sample theme, pues edita el nombre de la carpeta y ponle mi theme, por ejemplo. ¿Qué haces después? Pues te vas por FTP a tu web o por el administrador de archivos, te vas a la carpeta de themes de tu instalación de WordPress, wp content themes y ahí metes la carpeta ya descomprimida de tu child theme, del nombre que tú le has cambiado si quieres, para poder ir comparándolo, también te lo recomiendo, yo metería el child theme original con el nombre original del child theme y y por supuesto también descomprimido. Así tienes los dos, pero los tienes bien diferenciados porque uno tiene tu nombre, el nombre que le hayas dado a tu theme y el otro pues el original, ¿De acuerdo? Bien, ya tenemos nuestros themes dentro de la carpeta de themes. Ahora, si tú fueses en tu web, en tu WordPress, en la parte de administración, si fueses apariencia temas, pues tendrías el theme que has subido, pero hay que seguir haciendo modificaciones para que ese theme realmente tenga otro nombre y realmente se considere uno diferente. ¿Cuál es el siguiente paso? Cambiar el nombre del child theme en el style CSS. Ya sabéis que esto es el archivo con el que gobernamos el aspecto de nuestra web, aquí metemos css básicamente, y eso cambia el aspecto de nuestra web y es el que viene con el child theme. Y ahí hay una parte con información al principio, entre la que se encuentra el nombre del theme, hay una línea que pone theme name y el nombre del theme, pues eso, tendrá el original y. Y debes cambiarlo por el tuyo, el que le hayas puesto a la carpeta del child theme que vas a hacer tuyo y te darás cuenta que en ese bloque de información también hay otros puntos que podrías modificar. Esto te va a permitir sobre todo recordarte a ti mismo en el futuro y a otros desarrolladores los cambios que estás haciendo, sobre todo una parte que pone description, que ahí pone una descripción de qué es este child theme, de cómo está hecho, del original, pues yo te recomiendo modificarlo y poner por ejemplo, esto es un child theme basado en. Y pones el child theme original. ¿Esto qué te va a permitir? Pues si, como digo, después ese child theme lo va a coger otro desarrollador o tú en el futuro, pues yo que sé, estás trabajando, es una web de un cliente y en el futuro vas a volver a modificar y no te acuerdas, pues toda esa información te va a venir muy bien porque por ejemplo, vas a poder utilizar la documentación de ese child theme para seguir haciendo modificaciones en este theme que estás haciendo tuyo. Cuanta más información pongas mejor de los pasos que estás dando, porque aunque ahora mismo pienses que lo tienes todo controlado, créeme que después se te va a olvidar, si no todo, muchas cosas. Y otra parte, además de description que puedes modificar es la de autor. Este theme ya ahora lo estás modificando tú y puedes poner tranquilamente tu nombre, ¿Vale? Autor, dos puntos, tu nombre o el de tu empresa o el de lo que quieras y en la URI, digamos en la dirección del autor puedes poner la página con la que ofrezcas tus servicios, en este caso si es pues un thing que estás haciendo para alguien o que estás modificando en este caso para alguien, pues pon la dirección donde ofrezcas tus servicios, si es para ti da un poco más igual. Con esto ya tenemos un montón avanzado, ya si te vas a apariencia temas verás que efectivamente ya tu thing tiene el nombre que le habías dado, pero falta una cosa, te darás cuenta que la imagen destacada es la misma que la del thing original, yo te recomendaría cambiarla. Este es el siguiente El tercer y último paso que te recomiendo para hacer el child theme tuyo, no es necesario, pero como digo lo recomiendo porque así puedes diferenciar uno de otro muy fácilmente. ¿Qué tienes que hacer? Bien, entre los archivos del theme que estás haciendo tuyo verás uno que se llama screenshot png, pues simplemente tienes que sustituir esa imagen por otra con el mismo nombre, con la imagen que quieras, por ejemplo, yo que sé, crea un archivo en Photoshop, en Canva, donde sea, y ponle pues de momento si quieres ponle el nombre de tu child theme con un fondo del color que sea, simplemente para diferenciarlo. Luego más adelante si haces modificaciones en tu child theme, pues sí que puedes hacer una captura de tu child theme y utilizarla como imagen destacada, digamos del theme, pero el caso es que de momento la cambies para no equivocarte y diferenciar bien un child theme de otro. De nuevo, esta imagen como digo la ves en apariencia temas, ahí ves la imagen destacada del thin y con esto ya tienes tu propio child theme de Genesis. Realmente no hemos hecho nada más que cambiarle el nombre y ya está. Lógicamente de aquí en adelante pues tú irás haciendo las modificaciones que necesites, irás cambiando una cosita a otra dependiendo de tu nivel, lo mismo te queda un Shel thin prácticamente igual al original, pero si tienes más nivel pues podrás seguir haciendo más cambios o menos. ¿De acuerdo, siguiente punto que quiero introducir, desde ya debes sentirte mal por hacer esto? No, rotundamente no, y aquí va el porqué. La intención de esto no es engañar a nadie, sino es diferenciar entre un child theme que ya existe y otro donde presumiblemente vas a hacer modificaciones. A ver, piensa que WordPress es código abierto, la gracia de esto es que puedes usar código de otros como punto de partida y y hacer cambios en temas y plugins para conseguir los objetivos que tengas. Puede ser que sea cambiar muchísimo ese child theme o puede ser que no, pero esto es totalmente legal y no debes sentirte mal por hacerlo. Lo que sí, por supuesto, esto ya si hay copyright de imágenes o de cosas específicas que ese thing tenga, eso debes respetarlo. El código en sí del CIM es abierto, con licencia GPL y así deberá seguir siendo. Si tú coges algo que tiene una licencia determinada, aunque le hagas modificaciones, lo conviertas totalmente tuyo, eso va a seguir teniendo la misma licencia. ¿Otra persona puede coger ese theme, hacer las modificaciones que quiera, cambiar lo que quiera, vale? Así es como funciona esto. ¿Luego, un punto interesante, si estás haciendo este theme o estás modificando ese theme para un cliente, aquí sé honesto, vale? No tiene sentido decirle que este theme lo has creado tú desde cero ni nada. Si estás haciendo modificaciones a un theme existente, se lo dices a tu cliente así y ya está. Además es que el coste de hacer una cosa y otra no es lo mismo. No es lo mismo crear un theme o un child thin desde cero, que basarte en algo ya existente. ¿Así que seguramente a la hora de darle presupuesto en esto se ha tenido en cuenta, vale? No pasa nada, es una práctica súper habitual coger un tema existente, un tema hijo existente y modificarlo según las necesidades del cliente. No pasa nada, es totalmente normal y es de lo que va este episodio, pero hay que decirlo, vale, o yo te recomiendo decirlo. Fantástico. Con esto tenemos ya la base, ya hemos hecho un theme nuestro, digamos, desde el punto de vista pues cosmético, si quieres simplemente cambiarle el nombre. Ahora, para que te animes a ir más allá, te voy a decir algunas ventajas de modificar un child theme con Genesis Framework. Primero, con Genesis, a diferencia del desarrollo típico en WordPress, se usan filtros y acciones en lugar de crear o modificar plantillas para cambiar el comportamiento de un thing o para añadirle funcionalidades nuevas. Y con esto no digo que WordPress no tenga sus propios filtros, los tiene, pero no tan potentes como los de Genesis Framework. Es una forma de trabajar diferente y con el siguiente ejemplo lo vas a ver muy claro. Si tú quieres modificar, imagínate el footer de tu web, lo que harías con cualquier thing de WordPress normal sería crear una copia del footer PHP del tema padre, llevártela al tema hijo y modificarla a tu antojo para que así esa copia que tú has hecho sustituya la del tema padre. Esto de hecho lo vemos en el curso de desarrollo de Child Themes para WordPress. Sin embargo, si lo haces con Genesis, lo que harás será usar una de las muchísimas opciones de hooks y filtros que tienes dedicadas al footer, sin necesidad de crear ninguna plantilla, de duplicar la existente, ni nada. Simplemente puedes desactivar el footer por completo y crear uno nuevo o filtrar contenido ya existente de ese footer para cambiarlo a lo que quieras, ¿Vale? Así que si estás acostumbrado a desarrollar o hacer cambios un poquito más avanzados en un theme de la forma tradicional, el cambio a Genesis va a requerir que te acostumbres. Al principio te va a parecer raro porque sobre todo si ya llevas mucha práctica, hay que cambiar la mentalidad, es otro cambio. Pero si estás empezando, pues no te va a costar nada, simplemente aprendes a hacerlo así desde el principio y. Y ya está, ¿Vale? Simplemente que sepas que es diferente y que una vez le coges el tranquillo, vas a ver que puedes hacer mucho en muy poco tiempo. Y sobre todo si haces más de una web, es decir, si te dedicas a esto, te puede hacer que ganes bastante en productividad, ¿Vale? Bien, tampoco me quiero meter demasiado en detalle con esto, pero sí que quiero darte unos consejos para adentrarte en el desarrollo en WordPress. Primero, yo que tú empezaría a desarrollar en local. Es más fácil, más rápido trabajar, lo tienes ahí en tu ordenador y lo puedes hacer cuando quieras, sin conexión a Internet, sin nada. Tienes un curso de cómo trabajar en local, incluso de cómo pasar todo eso de local después a una web, si es que quieres hacerlo así. Más consejos. Como estás modificando un child theme que existe para hacer lo tuyo, te recomiendo que elimines todo lo que. Sobre todo el CSS. Seguro que va a haber muchísimo CSS que no vas a necesitar utilizar y es muy común que se vaya acumulando, acumulando, acumulando y que te quede un archivo CSS enorme. ¿Cuál es mi consejo? Que elimines todo lo que no es necesario. Te va a llevar un tiempo hacerlo, pero hazlo porque lo vas a agradecer en el futuro, o quien vaya a coger la web en el futuro te lo agradecerá allá donde esté esa persona, ¿Vale? Más consejos. Te recomiendo que te acostumbres también desde el principio, además de borrar todo lo que no es necesario, dejarlo ordenado, ¿Vale? Ten to style CSS ordenado. Incluso puedes crear una tabla de contenidos al principio, diciendo, digamos, los puntos clave que estás editando de esa web. Esto lo tienes tan fácil como fijarte en los style CSS de los child themes de Genesis, ya vienen muy bien ordenaditos, tú puedes seguir esa línea, si después ves que te sientes más cómodo, pues no sé, de otra forma, pues hazlo de otra forma, pero tenerlo ordenado. Y último consejo, documenta tu código. Es un error súper típico pensar que te vas a acordar en el futuro de para qué sirve el código que estás usando en ese momento, porque estás súper metido en él, porque llevas semanas, días, lo que sea metido y te lo sabes de pe a pa, pero créeme, se te va a olvidar segurísimo, seguro, seguro que se te va a olvidar porque son muchas cosas y aunque en ese momento estés súper empapado de ello, pues puede que en el futuro no lo estés, que estés haciendo otras cosas diferentes y demás. Entonces siempre documenta todo, aunque te parezca una tontería, aunque tú leyendo esa línea de código la entiendas perfectamente, documentalo para ti, para tu persona futura y para otros desarrolladores que puedan coger ese theme, ¿Vale? Acostúmbrate, aunque lo que estés modificando sea para ti, no sea para un cliente, es una muy buena práctica y te recomiendo hacerlo. Sim, a ver, te voy a dejar cursos muy relacionados con esto para que puedas coger esto que te he explicado en este episodio e ir avanzando a partir de ahí, ¿Vale? Para modificar tus propios theme o un child theme existente, incluso animarte después a crear uno. Te dejo por supuesto los cursos de Genesis y de Genesis Extender, que es un plugin que también te va a ayudar mucho a entender cómo funciona el desarrollo en Genesis, cómo funcionan los filtros, los hooks, y además te ayuda mucho en el proceso porque no necesitas saber código cuando estás empezando con este plugin y a la vez vas aprendiendo porque vas como generando el código con un panel que te ayuda a hacerlo y luego tú ves el código. Si no, te dejo el enlace y puedes ver un vídeo de presentación sobre un poco lo que va ese curso. Y luego también va muy en la línea de este episodio, el curso de desarrollo de child themes de WordPress es básicamente iniciación al desarrollo de child themes. Lo que hacemos es coger un child theme que está muy bien en cuanto a accesibilidad, que es muy lean, trae muy poquitas cositas, y lo modificamos muchísimo para que tenga otro aspecto totalmente distinto, le añadimos funcionalidades. Pero esto ya sería el desarrollo normal en WordPress, el típico, el tradicional. Es un poco distinto a cómo sería en Genesis, aunque muchas cosas por supuesto se solapan, todo es WordPress al final, así que estos cursos creo que te vendrían muy bien. También te recomiendo, aunque veo que no lo he puesto en las otras del programa, el curso de cómo trabajar en local, o cómo trabajar en pruebas, digamos, y todo lo que ello conlleva, cómo después llevar esa web en local, llevar la producción, es decir, a que ya esté disponible para todo el mundo. Vemos un montón de opciones interesantes a este respecto, que si estás pensando en ir haciendo pruebas, en ir creando webs para clientes y demás, te va a venir muy muy bien. Y al final decirte que vas a ver distintas formas de trabajar, vas a ver que unos recomiendan, que otros desarrolladores recomiendan otras, porque cada maestrío tiene su librillo, pero al final lo que te recomiendo es que te fijes en cómo estructuran sus themes otros desarrolladores. Como digo, vas a ver diferencias, pero te va a venir muy bien, te va a ayudar y con el tiempo irás encontrando la forma más cómoda de trabajar para ti. Pero como no nacemos sabiendo, como no sabemos nada, fíjate en alguien que sepa de esto, fíjate en themes buenos ya existentes y sigue esa metodología, sigue esa estructura, ya irás viendo lo que es más fácil para ti, ya irás viendo cómo estar tú más cómodo, pero hay que empezar por algún lugar. Así que ese es mi último consejo. Pero no me voy sin antes recordarte como siempre, que si te ha gustado el episodio de hoy y quieres ayudarme a que siga creciendo, a que siga creando episodios como éste, puedes aportar tu granito de arena dejándome una valoración en iTunes. Como siempre digo, no se tarda nada y de verdad que yo te lo agradezco muchísimo. Simplemente vas a tu aplicación de podcast, buscas WordPress semanal y le das a reseñas y ahí pues dejas la reseña que consideres. Que No estás en iTunes, no pasa nada si estás en Ivoox, si estás en Stitcher, Si estás en Spotify, haz lo que puedas o lo que quieras, ¿Vale? Si quieres un me gusta, un comentario, lo que sea, también os lo agradezco muchísimo. Así que nada más por este episodio. Nos seguimos escuchando. Adiós.