Varias veces he hablado aquí de la conveniencia de utilizar un child theme o tema hijo en lugar de hacer modificaciones directamente en la plantilla que estás utilizando: si no lo haces así, cuando tu tema se actualice perderás todos los cambios y personalizaciones que le hayas hecho.
Así que, para hacer las cosas bien (ya sabes que es mucho mejor siempre a medio y largo plazo), vamos a ver en este corto vídeo cómo puedes crear un tema hijo o child theme de una forma muy sencilla, además de la demostración empírica de lo que ocurre cuando no utilizas uno. ¡Dentro vídeo!
Tabla de contenidos
Vídeo: crear un child theme de forma muy sencilla
Por qué utilizar un child theme o tema hijo
Has tenido ocasión de verlo en el vídeo, ¿verdad? Imagina que, después de días (o semanas) adaptando tu plantilla a tus gustos y a tus necesidades (y las de tu negocio), cuando ya parece que está todo donde debe estar, tu plantilla se actualiza y ¡zas!: lo has perdido todo.
Eso incluye todo: desde cambios de estilos, traducciones que hayas hecho directamente sobre la plantilla (lo correcto es hacerlo como explico aquí) o cualquier función que hayas puesto en el archivo functions.php (deberías, en lugar de eso, hacerlo como explico en este otro artículo).
Pues esa es la razón por la que se debe usar un child theme. Así puedes realizar todos los cambios que necesites en la plantilla sobre el tema hijo, y no perderás nada cuando el tema padre se actualice.
Child Theme Configurator
Hay más de una forma de crear un child theme, pero he prometido que lo podría fácil y, desde luego, más fácil que con este plugin gratuito no puede ser.
Se trata de Child Theme Configurator, un plugin que, al activarlo, te crea una nueva opción en Herramientas → Child Themes con un asistente muy sencillo con el que podrás tener creado tu tema hijo en dos clicks.
Una vez creado el child theme, el plugin lo puedes desactivar e incluso borrarlo, no hace falta que lo mantengas ahí. Luego sólo te queda activar el tema hijo que acabas de crear y ya está. Ahora sí puedes configurar, añadir, quitar o cambiar en él lo que te dé la gana, que no lo vas a perder por una actualización.
Modificando el tema hijo
Al crearlo tu tema hijo contiene dos archivos:
- style.css, la hoja de estilos
- functions.php, el archivos de funciones
En realidad contiene alguno más, como el screenshot (la imagen utilizada para mostrar el tema en Apariencia → Temas) y otro CSS necesario para su correcto funcionamiento, pero los dos que te menciono son los que nos interesan. En el primero puedes añadir tus estilos CSS y en el segundo tus funciones personalizadas.
A partir de ahora cualquier archivo que necesites modificar (header.php, single.php, footer.php…) sólo tienes que cogerlo del tema padre, copiarlo en el directorio del tema hijo y modificar lo que quieras. ¡Así de fácil!
Espero que te haya sido útil. Como siempre, cualquier duda que tengas sobre WordPress o sobre WooCommerce me la puedes consultar. Para ello tienes a tu disposición tanto los comentarios como el formulario de contacto.
Hola Enrique.
My bueno tu tutorial y ademas sencillo. Pero tengo una consulta. Yo ya tengo un tema hijo sin embargo cuando accedo al .css del tema hijo, aparace vacio de modificaciones (modificaciones de color, fondos etc… que realice a traves del area de diseño de wordpress y no tocando codigo). Sabes lo que estoy haciendo mal?
Lo mismo sucede cuando coloco widgets en un side-bar por ejemplo… al actualizar el tema padre, éstos desaparecen! Soy novata en wordpress e intento entender algunos conceptos pero se me escapan! Gracias de antemano.
Hola L@la.
El CSS del tema hijo continuará vacío a no ser que tú escribas ahí directamente. No es algo que se actualice con los cambios que tú hagas en la configuración. Al revés, te permite realizar cambios en los estilos escribiéndolos ahí directamente, sin que se pierdan cuando el tema padre se actualice.
En cuanto a los widgets, éstos no deberían desaparecer nunca al actualizar un tema. Sí pueden desaparecer cuando cambies tú la plantilla en Apariencia > Temas ya que no todas las plantillas tienen las mismas widget areas (en ese caso se irían al apartado de Widgets inactivos), pero no ante actualizaciones automáticas.
Un saludo.
Muchas gracias Enrique. Nuevamente has sido muy claro en tu explicacion. Soy nueva en wordpress. Seguire tus posteos muy cerca. Saludos!!
Hola Enrique!
Buen tema y explicación. A ver si entendi, Un tema hijo se crea en el momento que ya se tenga bien afinada la web es decir en cualquier momento; Cuando ya se crea el tema child se le activa y se actualiza el tema ya no se pierde el trabajo hecho anteriormente en el tema Padre. De esto me surge otra pregunta porque los temas sobre todo de pago traen incluidos el tema Child y en ese caso en que momento se le instala este tema Child?
Hola Manu. No, en realidad el tema hijo debería activarse desde el primer momento, para poder realizar cualquier cambio necesario sin que después se pierdan, cuando el tema se actualice.
De la misma forma, en los themes que ya vienen con su tema hijo creado es éste es el que debe utilizarse siempre
Un saludo
Hola Enrique, antes de anda desearte que todo esté bien.
Estoy desesperada porque soy muy novata en todo esto y no sé como solucionar mi problema. Empecé trabajando con un Generatepress Pro y cuando me enteré de que tenía que trabajar con un hijo cambié a un CHILD THEME. Resulta que después de varias semanas fuí incapaz de corregir los fallos que me daba ya que me salía duplicada la cabecera y el menú de navegación. Finalmente , la solución la encontré volviendo al tema padre, con el que estoy terminando ya casi mi web.
Mis problemas son (debido a mis pocos conocimientos):
– Ya con mi web casi terminada, si ahora cambio del padre al hijo, entiendo que perderé todo lo que he trabajado con la plantilla padre?
– Si esto se puede hacer en cualquier momento conservando todo lo trabajado. ¿cómo lo hago?
– Si me vuelve a salir duplicada la cabecera y pié de página ¿cómo elimino la que no quiero?
Millones de gracias por tu ayuda!!!!
Un abrazo
Hola Alejandra
Perderás cualquier cambio que hayas hecho sobre el tema padre, y los ajustes del tema que hayas guardado. En cuanto a duplicarse la cabecera y el footer, solicita soporte al autor del tema.
Un saludo
Hola Enrique,
Primero, excelentes tutoriales muy bien explicados.
Quiero comentarte mi experiencia, uso el tema https://goo.gl/HMueLa y tengo un cambio realizado en el archivo: template-tags.php el cual se borra cuando actualizo el tema, es algo simple tengo un DIV comentado, nada adicional ni fragmento de código agregado.
Entonces, he seguido tus indicaciones para crear el tema hijo y de momento se ha creado con ayuda del plugin. Fantástico!
Una vez creado el tema hijo, he ido a copiar la carpeta original a la ubicación de mi tema Padre: (inc/template-tags.php) y la he llevado al tema hijo, he realizado el mismo cambio que tenia en el tema Padre, para que no se vuelvan a perder los cambios en la actualización, pero este no funciona. Es importante aclarar que el tema lo he activado previamente, he rectificado varias veces.
Además, probe desistalando el plugin, volviendo hacer el proceso y mil cosas pero no logro ver que el tema hijo funcione.
Estoy un poco aburrido al encontrar esta excelente herramienta y explicación, pero no dejo de pensar porqué no funciona, Porqué, Porqué, Porqué…
Tienes algún consejo para solucionar esta eventualidad, siento que estoy muy cerca, pero se que sucede…
Un fuerte abrazo!
Hola Luigi. Puede ser un problema de caché, ¿la has vaciado? Ten también en cuenta la caché del navegador.
Un saludo.
hola , no entiendo que estoy haciendo mal pero no logro obtener la vista previa de mi child theme y cuando intento activarlo me sale error 505 y el sitio deja de funcionar . A que se deberá?
Excelente plugin, más fácil no puede ser. Se agradece el aporte.
Gracias Erickson por tu comentario, me alegra que te haya sido útil 🙂
¡Hola Enrique! Antes de nada, darte la enhorabuena por el excelente trabajo que haces y lo mucho que aportas a la comunidad de usuarios de WordPress, sobre todo a los más ignorantes, como yo.
La cuestión que me inquieta es la siguiente, a ver si me podéis echar una mano:
He dedicado dos meses a desarrollar mi e-commerce en Storefront, poco a poco he ido implementando plugins y/o extensiones que han ido configurando el aspecto de mi página a «algo parecido» a lo que quiero…
Y de repente, me entero de que todo este trabajo lo debía haber realizado sobre un «child theme». Pero no, no cree un tema hijo desde el principio, no sabía lo importante que es y no tuve la información a tiempo.
Ahora ¿qué hago? ¿Se puede migrar todo el trabajo a un tema hijo? Si creo un tema hijo siguiendo vuestra excelente guía, ¿cómo hago para que conserve al máximo lo que ya tengo hecho? ¿Corro mucho riesgo si sigo trabajando sobre StoreFront directamente?…
Me está causando bastante desasosiego esta cuestión y, de momento no encuentro ninguna directriz clara al respecto.
¿Qué hacer?
Muchas gracias por anticipado. Saludos!!!
Hola Vicente
Si no has hecho cambios en los archivos (revisa el functions.php) sólo perderás la configuración de personalización (Apariencia > Personalizar). En ningún caso perderás nada implementado mediante un plugin. De hecho, por eso no se deben confiar funcionalidades a una plantilla (como portfolio, slider, etc, incluidos en muchos themes) y hay siempre que usar plugins para ello, si no se perderían al cambiar ésta.
Un saludo.
Buenas tardes Enrique, he implementado bastantes cosas(plugins,shortcodes, productos, etc)sobre un Storefront padre. ¿Cómo hago para exportarlo todo a un tema hijo? Gracias anticipadas. Saludos.
Hola Isabel
En principio sólo tendrás que tener en cuenta los cambios que hayas hecho sobre los archivos del theme y los ajustes de personalización del mismo (lo que tengas configurado en Apariencia > Personalizar). El resto de datos son independientes de la plantilla y no cambiarán al cambiar de tema (aunque sea a un tema hijo).
Un saludo.
Buenas tardes,
Gracias por el post y por contestar a las dudas que tenemos algunos que no tenemos mucha idea sobre estas cuestiones. Yo estoy trabajando una web en localhost y al modificar la plantilla hijo, no se modifica nada. Los cambios se reflejan en la plantilla padre. Pero no es que cambie la plantilla es que duplica el contenido! POr ejemplo, si añado un menu en la plantilla hijo, en esta no modifica nada, pero en la original, lo añade y aparecen dos menus! Una cosa muy rara y no encuentro casos parecidos.
Gracias por tu página y tu trabajo.
Saludos
Hola María
Elimina ambos, tanto plantilla como child theme, y después vuelve a instalar la plantilla y a crear el tema hijo.
Un saludo
Hola Enrique, muchas gracias por tu trabajo, es excelente.
Te escribo por si puedes solucionarme una duda,he instalado child theme configurator pero a la hora de crear mi tema hijo, en el desplegable de temas padres (punto 2 en el proceso de creación de tema hijo), no me aparece el tema que tengo activo (tema Highlight) por lo que no puedo crearlo sobre el tema que tengo activo.
Un saludo y muchas gracias!!
Hola, muy buen post!
Mi duda es la siguiente, he colocado el codigo de analytics en el header del padre. Claramente cuando se actualizó se borró.
Ahora lo que hice fue copiar el header.php del padre y lo puse en el child, y ahi en el le metí la etiqueta de analytics y volvió a verse reflejado el tráfico.
Mi consulta sería, no tendria que poner algún código en el header del child que indique que tome lo que está en el padre, cuando este se actualice. O está bien dejarlo así. Muchas gracias, espero tu ayuda!
Hola Silvina
Lo mejor es añadir el código a la cabecera mediante un hook o, mejor aún, usar para ello algún plugin, ya que esto te permitirá que, por ejemplo, no se registren las visitas del administrador. Echa un vistazo a esta entrada, te resultará de ayuda.
Un saludo