fbpx

Child theme o tema hijo en WordPress: Qué es, para qué sirve y cómo crearlo

Si llevas tiempo trabajando con WordPress, probablemente habrás escuchado hablar del tema hijo o child theme. Estoy segura de que te gusta la plantilla que estás utilizando en tu web (y por eso trabajas con ella) pero quizá no cumple al 100% todas tus necesidades. Es normal, los temas premium y gratuitos cubren los requisitos generales de los usuarios, pero en muchas ocasiones el webmaster exige algo más.

Si tú eres uno de esos usuarios y quieres ampliar y extender las funcionalidades de tu theme sin perder los cambios con cada actualización, estás en el post adecuado. Voy a enseñarte qué es un tema hijo, para qué sirve, cómo se instala y cómo se crea. ¡Sigue leyendo!

 

Qué es un child theme o tema hijo en WordPress

Un child theme o tema hijo es un tema que hereda las funcionalidades básicas de un tema principal o tema padre (parent theme) y permite mejorarlas, modificarlas y ampliarlas. Con “funcionalidades” me refiero, por ejemplo, a: agregar miniaturas a publicaciones, agregar tamaños adicionales a la miniaturas, añadir widgets, cambiar el texto que aparece después del extracto de un post, añadir estilos nuevos… Existen muchos tweaks para WordPress que puedes utilizar.  

 

Por qué crear un tema hijo en WordPress y para qué sirve

Como te comentaba en la introducción de este artículo, a veces necesitas personalizar un poco más tu theme y no perder los cambios con cada actualización. Para explicarme mejor, voy a ponerte un ejemplo de un caso muy común.

Imagina que quieres añadir en el header de tu WordPress el código de Google Analytics. Además, no vas a utilizar ningún plugin solo para eso porque quieres ahorrarte lo máximo posible el consumo de recursos de tu hosting web. Lo vas a insertar directamente en la cabecera.

Abres header.php y lo pegas entre las etiquetas correspondientes o lo añades con una función desde el functions.php del tema que está activo. Durante un tiempo, no ocurre nada. El tema se actualiza y tú sigues trabajando con normalidad. Un tiempo después, entras al panel de Google Analytics y ves que faltan estadísticas de varios días. ¿Qué ha pasado?

Muy simple: cuando un tema principal se actualiza, se sobreescriben sus archivos. Todas las modificaciones que realizas, se borran. Podrías crear un documento guía con todos los cambios y añadir el código en cada archivo después de cada actualización del theme, pero es engorroso, pierdes tiempo y no es viable. Para esto es para lo que se suele usar un child theme.

Un tema hijo no se actualiza, no se sobrescribe. Sólo hereda las funcionalidades del tema padre. Puedes realizar 20.000 cambios y nunca los perderás. Es la solución idónea para estos casos.

Mi recomendación es que crees un tema hijo desde el primer momento en que empieces a trabajar con tu web. Si en tu caso ya tienes un WordPress pero no lo has creado un tema hijo, ¡ahora es ese momento! Sigue leyendo porque te voy a enseñar cómo crear un tema hijo de varias maneras diferentes.

 

Cómo crear un tema hijo en WordPress

Ahora que ya sabes qué es un child theme y para qué sirve, el siguiente paso es crearlo. Es importante que tengas acceso FTP a los archivos de tu sitio para poder hacerlo. Hay varias formas de crear un child theme: desde cero o con un plugin.

 

Cómo crear un tema hijo en WordPress desde cero

Cómo crear un tema hijo desde cero: este es el método que se utiliza normalmente. Accede por FTP o a través del administrador de archivos a tu web. En la estructura de archivos de WordPress verás que hay una carpeta que se llama wp-content. Ahí dentro se guardan los temas que tienes instalados (estén o no activados). Decide para qué theme quieres crear un tema hijo. Lo normal es que sea del tema que tienes activo en este momento.

En mi caso, voy a crear un tema hijo de Twenty Seventeen. Localiza la carpeta del tema dentro de wp-content/themes. Ahora, crea una carpeta nueva (que es donde vas a meter los archivos) y nómbrala de la siguiente forma: nombretheme-child, donde “nombretheme” es el nombre de la carpeta del tema del que quieres crear el child theme

El nombre de la carpeta de mi theme es “twentyseventeen”, por lo que la carpeta que tengo que crear para el tema hijo será: twentyseventeen-child. Pero ¡ojo! no añadas ningún espacio en blanco en el nombre.

Carpeta del tema hijo

Sitúate dentro de la carpeta que acabas de generar y crea un archivo nuevo que se llame style.css. Más adelante te contaré qué hace y para qué sirve style.css. Ahora me voy a centrar simplemente en indicarte cómo lo tienes que rellenar para que funcione tu child theme. style.css debe contener una cabecera especial, así que edítalo y añade el siguiente código:

 

Ahora sustituye los datos de cada línea por los que correspondan en tu caso. Si no sabes cómo, no te preocupes: voy a explicarte uno a uno qué significan y qué debes poner en cada línea.

  • Theme name: Aquí escribirás el nombre de tu theme con la coletilla Child Theme. ¿Es obligatorio poner la coletilla? La verdad es que no. Pero te recomiendo que lo hagas o, en su defecto, que le pongas un nombre que lo identifique como tema hijo para no confundirte o confundir a otros administradores de tu blog.

Nombre del tema hijo

  • Theme URI: La URL de la página principal del child theme.
  • Description: La descripción de tu tema hijo.
  • Author: El nombre de la persona que lo crea.
  • Author URI: La dirección de la página web del autor.
  • Template: El nombre del template del padre. Pero no el nombre del tema, sino el nombre del directorio que contiene el parent theme o tema principal.
  • Tags: Las etiquetas por las que van a encontrar tu theme. En este caso, siempre uso las mismas que tiene el tema padre.
  • Version: La versión del child theme. Como es la primera vez que lo creas, puedes poner 1.0.0. Si luego realizas modificaciones, puedes ir aumentando el número de la versión.

Descripción de la página de detalles del tema hijo

  • License: El tipo de licencia bajo la que está sujeta el child theme. Existen muchas: Creative Commons, GPL, BSD, AGPL… En este caso, puedes usar la misma que la del tema padre.
  • License URI: La URL de la licencia que has seleccionado.
  • Text Domain: El text domain se usa para hacer un tema traducible, por lo que necesitas asignarle un nombre identificativo. Por ejemplo, el nombre del tema separado por guiones.

Guarda el archivo y ¡listo! Esto es lo MÍNIMO que necesita un tema hijo para activarse. Pero no es suficiente, ya que necesitas más archivos para que funcione correctamente.

Si recargas los temas de tu dashboard, verás algo como esto:

Listar temas hijo

Ahora abre tu editor de código favorito y crea un segundo archivo que se va a llamar: functions.php. Al igual que style.css debes guardarlo en el directorio raíz del child theme. Rellénalo con el siguiente contenido:

<?

php ?>

¿No tiene nada? De momento, no: solo estás creando un child theme nuevo. Más adelante, te contaré todo lo que necesitas saber sobre este archivo.

Para acabar (aunque no es obligatorio), tienes que importar los estilos CSS del tema principal. Si no lo haces, el child theme funcionará pero “sin apariencia”. En muchos post sobre cómo crearlo te encontrarás con cosas como: “Después de la cabecera que has añadido en el fichero style.css del tema hijo, inserta el siguiente código: @import (../nombre-plantilla/style.css);”. ¡No!

En WordPress, no debes importar los estilos CSS de un tema padre a un tema hijo con la regla “import”. El método correcto es wp_enqueue_style.

Edita el archivo functions.php que acabas de crear. Añade el siguiente código y sustituye [URL_CSS_PARENT] por la url del archivo CSS del tema padre que quieres insertar:

De esta manera, añades el CSS al sistema de dependencias de WordPress. Primero, creas una función que registra el archivo y luego lo pones en cola con la acción wp_enqueue_script. Como podrás ver en la documentación oficial de la comunidad de WordPress, esta es la manera correcta y recomendada de hacerlo.

Para finalizar, tienes que activar el tema. De lo contrario, todo lo que has hecho no serviría para nada. Evidentemente, se puede personalizar el tema hijo y añadir muchas funciones nuevas o extender las existentes, pero eso lo veremos más adelante. ¡Continúa leyendo!

 

Child Theme Configurator: Cómo crear un tema hijo con un plugin

Si lo que necesitas es hacer algo más rápido, automático y menos lioso, que sepas que existen plugins en WordPress que te permiten automatizar esta tarea. El que voy a utilizar en este tutorial es: Child Theme Configurator.

He escogido este plugin por diferentes motivos: es sencillo, se actualiza periódicamente y te deja personalizar tu child theme. ¿Necesitas algo más?

Lo primero que vas a hacer es instalar el plugin. Está disponible en el repositorio de WordPress, pero si quieres descargarlo en tu ordenador puedes hacerlo desde aquí: Child Theme Configurator.

Una vez que lo tengas instalado y activado, dirígete al panel de WordPress > Herramientas > Child Themes > Parent / Child. Como puedes ver en la siguiente imagen, Child Theme Configurator tiene un asistente paso a paso para hacértelo más fácil, además de muchas opciones que estarán disponibles una vez que crees el tema hijo:

Panel de control de Child Theme Configurator

El primer paso es fácil: Select an action > CREATE a new Child Theme.

Paso 1 de Child Theme Configurator

Además, como todavía no has creado ninguno, evidentemente las otras opciones (configurar, resetear y duplicar) no tiene sentido seleccionarlas. A continuación, escoge el theme para el que quieres crear el tema hijo.

Paso 2 de Child Theme Configurator

Por último, pulsa en el botón Analyze. Child Theme Configurator va a comprobar que el tema que has seleccionado está en perfectas condiciones, es decir, si hay algún problema con el tema principal o si le faltan archivos. Si todo va bien, verás que ahora tienes 6 pasos más que configurar antes de crear el child theme. Ya falta poco.

Paso 3 de Child Theme Configurator

Aunque podrías crear el tema hijo con las opciones que trae por defecto, quiero que veas que es lo que Child Theme Configurator te pide en cada paso. El siguiente paso, “Name the new theme directory”, o el nombre del directorio que el plugin le va a asignar a este nuevo tema, déjalo tal cual está. El nombre del directorio tiene que tener el siguiente formato: nombretheme-child, como te expliqué en el apartado anterior.

Paso 4 de Child Theme Configurator

Luego tienes que escoger dónde quieres que se guarden los nuevos estilos CSS (lo que le da forma al aspecto de tu web). Marca la casilla Primary Stylesheet.

Paso 5 de Child Theme Configurator

En este paso, tienes que seleccionar cómo quieres añadir los estilos del tema padre en tu child theme. Si quieres incorporar los estilos CSS, marca “Use the WordPress style queue”. Como te expliqué en el apartado anterior, esta es la manera correcta. Si no quieres añadir los estilos del tema padre, simplemente marca “Ignore parent theme stylesheets”.

Paso 6 de Child Theme Configurator

Si pulsas en el botón “Show/Hide Child Theme Attributes” aparecerá el siguiente desplegable:

Paso 7 de Child Theme Configurator

Ahora rellena los datos básicos o deja los que están por defecto (son totalmente válidos). En el apartado anterior te expliqué como hacer la cabecera manualmente en style.css y que significaba cada campo. Esta información es la que corresponde a esa cabecera.

Para acabar pulsa en “Create New Child Theme.

Paso 8 y 9 de Child Theme Configurator

¡Listo! Ahora el plugin te permite modificar y personalizar tu child theme como quieras, pero eso es algo que no atañe a este tutorial. Aun así, te recomiendo que le eches un ojo a todas las opciones de configuración que te trae el plugin. Merece la pena. Además, no te olvides de activar el tema hijo cuando acabes de personalizarlo.

 

Instalar un tema hijo

Ya has visto cómo crear un tema hijo de manera correcta pero… igual no es tu caso. Tal vez usas una plantilla como Divi o Avada y tienes el tema hijo en un archivo comprimido .zip listo para instalar. Muchas plantillas te ofrecen la posibilidad de descargar directamente el child theme y ahorrarte el trabajo de crearlo.

Instalar un theme hijo no tiene complicación, se hace exactamente igual que instalar un tema principal. Te lo enseño. Puedes probar por ejemplo con Generate Press. Está en el repositorio de WordPress, es gratuito y te permite descargar el tema hijo de su documentación oficial: child theme de Generate Press.

Ahora, tienes que ir al panel de control de WordPress > Apariencia > Temas > Añadir nuevo. Ahora pulsa en Subir tema y selecciona el archivo que te acabas de bajar:

Abrir el tema hijo de Generate Press

Cuando finalice la instalación verás algo como esto:

Activar Child Theme Generate Press

Pulsa en activar y ¡se acabó! Ya tienes tu child theme de Generate Press instalado y activado.

 

Personaliza el tema hijo y conoce sus archivos

¡Es la hora de personalizar tu child theme y de conocer más a fondo sus archivos principales!

 

screenshot.png: Imagen de perfil del child theme

Lo primero que te vas a aprender es a añadir una imagen de perfil al tema hijo. Es muy fácil. Crea una imagen de 1200×900 en formato PNG y nómbrala con “screenshot.png”. Vete al raíz de la carpeta de tu child theme y mueve ahí tu nueva imagen. Si recargas los temas de tu dashboard verás algo como esto:

Imagen de perfil de un tema hijo

 

style.css: Hoja de estilos del child theme

Antes te enseñé cómo rellenar este archivo, pero no para qué se usa. style.css es la hoja de estilos por defecto que requieren las plantillas en WordPress. Controla el aspecto y la presentación de las páginas de tu web. En este caso, es la hoja de estilos de tu tema hijo, pero ¡ojo! sobrescribe el del tema padre. Por lo tanto, si quieres usar los estilos del padre, lo mejor es que importes el CSS del padre correctamente como te mostré antes, añadiéndolo al sistema de dependencias de WordPress.

 

functions.php: Funciones del child theme

El archivo functions.php es un archivo que te permite insertar funciones personalizadas para mejorar, añadir o cambiar el comportamiento en tu WordPress. En este caso, se va a usar para ampliar las funcionalidades del tema principal. A diferencia de style.css, NO SOBREESCRIBE el archivo functions.php del tema padre, sino que lo complementa.

Si eres desarrollador, te contaré algo que te puede interesar. El archivo functions.php del tema hijo carga antes que el archivo functions.php del tema padre. Esto es una ventaja para ti porque, si quieres sustituir una función del tema padre para cambiar su comportamiento, lo puedes hacer de la siguiente manera:

 

Cuando te hablé sobre “para qué sirve un child theme”, te puse ejemplos de varias cosas que se pueden añadir a este archivo. Si quieres conocer diferentes funciones personalizadas, te recomiendo que visites nuestro post sobre snippets para WordPress.

Conclusión

Además de todo lo que hemos comentado en este post, un tema hijo se puede preparar para que se traduzca a otros idiomas (al igual que un tema principal) y tiene soporte para RTL. Si te interesa saber más sobre esto pregúntame, estaré encantada de responderte.

Como te dije antes y para acabar con este artículo, mi recomendación personal es: si trabajas con WordPress, lo mejor es que crees un tema hijo. Ganarás tiempo, no perderás las modificaciones que le hagas en la plantilla y mejorarás la funcionalidad de tu web. ¿Quieres saber algo más sobre los temas hijo? ¡Comenta!

Share on twitter
Compartir en Twitter
Share on facebook
Compartir en Facebook
Share on pinterest
Compartir en Pinterest

¿Te gusta el blog?

Apúntate al boletín y te enviaremos los mejores artículos una vez al mes.

¿Te ayudamos?

Escríbenos si tienes dudas o necesitas una solución específica. Nuestros expertos te ayudarán en todo lo posible.

Sé el primero en enterarte de ofertas, sorteos y novedades.

Tenemos 67 comentarios en

"Child theme o tema hijo en WordPress: Qué es, para qué sirve y cómo crearlo"

67 respuestas

  1. Hola Angela, una consulta sobre los child themes: si yo hago blogs en wordpress y utilizo elementor y hago pequeños cambios del css que guardo en “apariencia/css adicional” tambien me recomiendas crear un tema hijo ?
    A veces cuando actualizo elementor se deja de ver la web. Tengo que desactualizar elementor y se vuelve a ver bien. Por qué ?
    Has puesto “Soy graduada en Ingienería ”
    Gracias !!

    1. Hola, Jose:

      te recomendamos usar temas hijos siempre, al margen de lo que hagas, porque es un buen hábito y mejor cogerlo cuanto antes, aunque si solo usas el editor de “Apariencia → CSS adicional” no es estrictamente necesario.

      Respecto a la web: no sabría decirte sin más detalles. ¿El problema es que te da un error 500 o se muestra en blanco sin más?

      Dejamos corregido el error tipográfico; ¡gracias por reportarlo!

      Un saludo.

    2. Excelente explicación te felicito.
      Me gustaría consultarte algo y es lo siguiente: teniendo el tema padre y el tema hijo intalado, solo uno se activará y es el tema hijo cierto? Y si el tema padre está activo se desactivara automáticamente una vez se active el tema hijo?
      Gracias espero respuesta

  2. Tengo otra pregunta : hay alguna manera de tener un diseño totalmente libre como en html al crear una pagina en wordpress ?
    Muchas gracias !!

    1. Hola, Jose:

      Siempre puedes crear tu propio tema para hacerlo.

      Alternativamente, si necesitas crear una landing en concreto dentro de tu WordPress que sea distinta al resto, puedes crearla como “template” dentro de tu theme y asignarla a la plantilla que quieras. Un template es básicamente un fichero PHP que será ejecutado para esa única página, pero claro, tendrás que poner todo el código necesario para que se muestre el contenido de la página, además de cualquier tarea de personalización que quieras llevar a cabo.

      Cualquier cosa nos dices.

      ¡Un saludo!

      1. Hola Hector !
        Esto no lo he entendido: “crearla como “template” dentro de tu theme y asignarla a la plantilla que quieras”
        Como se crea ? Con elementor ? Usando una plantilla de pagina hecha de las que tiene ?
        Muchas gracias !

        1. Hola:

          dentro de tu tema puedes crear archivos de template. P.ej.: “home.php”, “category.php”, “archive.php”, “test.php”, etc.

          Esos ficheros, además de usarse para secciones concretas de tu WordPress (p.ej.: “category.php” se usa para la páginas de categorías) te permiten crear templates personalizadas. Si creas un archivo ahí después podrás asignárselo individualmente a cada página eligiéndola en el desplegable “template” dentro de la propia edición de la página.

          Si tienes curiosidad, la documentación de la jerarquía de templates está en este enlace.

          Cualquier cosa nos dices.

          ¡Un saludo!

          1. Muchas gracias ! Lo malo es que no se nada de php. Puedo utilizar una plantilla de las que trae elementor y no tocar codigo ?

            1. Hola, Jose:

              me temo que en ese caso, no, no podrías. Esto que comento ya requiere tocar código, claro.

              ¡Un saludo!

    2. Hola, muy buena explicación. Una duda: si creo desde el plugin el tema hijo, si ya he agregado los códigos de google y facebook al header del tema padre, ¿automáticamente se copia todo al tema hijo?

  3. Hola! Gran post! Tengo una pregunta: Si ya tengo una web construida completamente y deseo crear un child, cuando activo el child obviamente se pierden los cambios hechos previamente ¿Hay que volver a maquetar todo desde cero o hay alguna manera de minimizar el trabajo?

    Saludos!

    1. Hola, Jorge:

      no debería desmaquetarse nada. Si es así, es porque tu programación tiene alguna ruta absoluta que hace referencia a un archivo que no existe en el tema hijo.

      Recuerda copiar todos los archivos que hayas personalizado al hijo, de lo contrario, puede que ésta problemática persista.

      ¡Un saludo!

  4. Estoy iniciando una web nueva, para ello me descargue el template: Albar, sólo he colocado una entada y siguiendo tus recomendaciones, antes de seguir construyendo la web quiero hacerlo con un hijo de ese tema.
    Utilicé el plugin Child Theme Configurator siguiendo los pasos que mencionas en el post, luego de activarlo, miro el sitio esta completamente en blanco, se perdió todo lo que trae el template por defecto.
    Debo hacer algún paso adicional?, copiar otros archivos?

    1. Hola, Nairoby:

      algunos temas tienen sus propios requisitos para el tema hijo y por lo general te lo proporcionan los propios desarrolladores. Creo que es el caso de albar. Confirma con los desarrolladores que es el caso, porque de ser así, te facilitarán los datos.

      Además, como dices, es posible que haya datos que se guarden a nivel de base de datos y no se transfieran al hijo. En ese caso la opción sería reconfigurarlo de nuevo. Algunos temas tienen la opción de exportar/importar configuración, que no se si es el caso con Albar. Confírmalo con ellos y listo.

      Un saludo.

  5. Hola he buscado mucha información pero es que de verdad no doy con la respuesta, estoy editando una plantilla hija de un tema padre, la pagina de portada la tengo como pagina estática es la pagina principal la pagina de inicio, cuando intento modificarla con Elementor me dice que: “-No se encontro el contenido en su pagina / debes llamar la funcion the_content en la plantilla actual para que elementor pueda editarla” dicen que agregando a la page.php pero creo que no funciono no se si la inserte bien

    1. Hola, Daniell:

      Verifica que todo esto coincida:

      – El nombre fichero que estás editando.
      – El nombre del “template” asignado a la página estática que te sirve de portada.

      Si sigues con problemas, por favor, indícame el nombre del tema y los dos datos que comentaba ahí arriba.

      Un saludo.

  6. Buenos dias, estoy intentando crear un tema hijo sobre mi tema padre TWENTYSEVENTEEN pero me he quedado atascada en el paso: “Edita el archivo functions.php que acabas de crear. Añade el siguiente código y sustituye [URL_CSS_PARENT] por la url del archivo CSS del tema padre que quieres insertar”

    He creado el archivo “functions.php” pero no consigo encontrar “LA URL DEL ARCHIVO CSS DEL TEMA PADRE”
    ¿Dónde puedo encontrarlo?

    Entiendo que una vez sustituya eso, solo tengo que activar/instalar el tema ¿es correcto?

    Entiendo además, que tras esta creación debo saltarme el paso que pone “CREA UN TEMA HIJO CON PLUGIN” porque ya lo habré instalado de la forma anterior y pasar directamente a la activación del tema.

    Gracias!

    1. Hola:

      sustituye ‘[URL_CSS_PARENT]’ (comillas incluídas) por “get_template_directory_uri() .’/style.css’);” (sin las comillas).

      Por norma general el archivo “style.css” es el que hay que encolar. Si tu tema tiene otro cámbialo por el que sea.

      Con eso el tema estaría listo y bastaría con activarlo; si no lo has instalado previamente, déjalo en la carpeta “wp-content/themes/” con el nombre que quieras.

      La parte de “crea un tema hijo con plugin” te la puedes saltar, ya que es el mismo proceso que estás haciendo ahora manualmente, pero con un plugin para ayudarte. Si ves que tras mis indicaciones sigues con problemas quizás puedas probar esta forma de hacerlo, que es más sencilla.

      Un saludo.

  7. Hola! Muchas gracias por el artículo y la explicación. Yo también tengo un problema con [URL_CSS_PARENT]. En mi caso he introducido el siguiente código:

    “function mis_estilos()
    {
    wp_enqueue_style( ‘child-theme-css’, get_template_directory_uri() .’/style.css’);
    }
    add_action( ‘wp_enqueue_scripts’, ‘mis_estilos’ );

    Al activar el tema, este mismo código (el propio texto) es visible en la web, sale al cargarse tanto la página principal como todas la demás en la parte superior de la misma. De hecho, es lo primero que sale al actualizar la página. También la apariencia de child theme, sale algo cambiada, quizás porque los estilos de parent theme no se han quedado asociados.

    He seguido todos los pasos, pero parece ser que algo falla. ¿Me podéis ayudar? El uso de plugin – no es una opción para mi. Muchas gracias de antemano.

    1. Hola:

      ¿en qué fichero has metido ese código?

      Ten en cuenta que es código PHP y por ende:

      – Tiene que estar en un archivo .php (p.ej.: “functions.php”).
      – Ha de estar situado entre la etiqueta de apertura de PHP (“”).

      Un saludo.

  8. ¡Hola Ángela!
    Genial este post… Felicitaciones.
    Decidí hacer el child usando el plugin; estoy trabajando en local. Ensayo primero todo acá y luego lo subo, y tengo mi sitio en etapa de diseño, así que puedo ensayar muchas cosas.
    Me llama la atención que creó una nueva carpeta dentro del directorio Theme y no un subdirectorio dentro de GeneratePress, con el que trabajo.
    Me queda la inquietud… ¿Cuando haga alguna actualización del tema padre (que por ahora parece que fuera hermano), habrá algún beneficio para este hijo creado?
    Un abrazo desde Venezuela.

    1. Hola, Francisco:

      la carpeta del hijo no es una “subcarpeta” dentro del padre, es correcto.

      Es así precisamente para que cuando el tema padre se actualice las modificaciones del tema hijo no se pierdan.

      Cuando hagas una actualización del padre lo que va a pasar es que el hijo, automáticamente, va a heredar todos los estilos y cambios que incluya este sin perder los tuyos.

      No obstante, en función de cuán drásticas sean las diferencias entre las versiones de tu tema padre puede ser necesario que revises tu configuración de tema hijo o no.

      Cualquier cosa nos dices.

      ¡Un saludo!

  9. Hola. Gran artículo, como siempre. Tengo unas dudas:

    Yo he creado el tema hijo añadiendo el archivo css y el functions, pero ahora quiero añadir Google Tag Manager, para lo que tengo que añadir script en el head y en el body del header. Entonces, ¿cuál es la forma correcta de añadirlo? ¿Debería copiar el archivo header.php al tema hijo, y añadir ahí el tag manager? ¿O puedo añadirlo directamente en el header del tema padre y ya está? O sea, si hay una actualización del padre, ¿se pierde todo lo que hayas tocado (incluido HTML), o solo los estilos?

    Y una segunda cuestión: si ya tengo un tema totalmente diseñado, pero padre, y quiero ahora crear el hijo, ¿qué sería lo mejor? ¿Pasar todos los archivos del tema padre al hijo, y empezar a trabajar sobre el hijo?

    Gracias, un saludo,

    1. Hola, Adrián:

      Puedes añadirlo en el header, como dices, o la funcionalidad de añadir Javascript a la cabeza de la página si tu tema lo permite (suele encontrarse en la sección “Apariencia → Personalizar”.

      Para añadirlo en el header, cópialo al tema hijo y cámbialo ahí. No es buena idea cambiar nada en el padre precisamente porque lo que se busca con el tema hijo es no hacerlo para evitar que las actualizaciones puedan sobreescribir tus cambios.

      Respecto a tu segunda pregunta: el artículo explica cómo crear el tema hijo, no tienes que hacer nada raro. Sigue los pasos y lo crearás tal cual ha de estar. Recuerda, no obstante, que el tema padre ha de estar “impoluto” (sin ningún cambio tuyo) y éstos han de hacerse en el hijo.

      Si alguno de tus cambios está en un fichero del padre lo que tienes que hacer es copiarlo al hijo. En el caso de que en el hijo no exista algún archivo, éste será heredado desde el padre.

      Si tienes cualquier duda nos dices.

      Un saludo.

  10. Hola,
    Además de lo que han explicado de lo positivo que es hacer un tema child:
    1.-Esto tiene algo que ver con que pueda (o no) activar el google analytics o instalarlo depende del tema que se elija (he leído por ahí que dependiendo de la plantilla puedes hacer unas y otras cosas no.
    2. Y aprovehando si puedieras responderme lo siguiente: El wordpress tiene que estar instalado en mi pc? porque yo lo instalé a traves del servicio hosting y accedo a mi web online. Es eso correcto?
    Recién he empezado hace una semana con el wordpress y tengo desconocimiento de muchas cosas.
    Gracias por lo que enseñan
    Saludos

    1. Hola DISENO N,
      Te respondo a tus dudas:
      1. El hecho de crear o no un tema hijo es independiente de que puedas activar e instalar Google Analytics.
      2. Si ya tienes un WordPress instalado en tu hosting no tienes que instalar nada en tu ordenador personal.
      Un saludo.

  11. Muchas gracias por tan completo artículo!!
    Yo me he quedado atascada en el paso de editar el archivo functions.php. ¿Dónde puedo encontrar la url del archivo CSS del tema padre por el que debo sustituir [URL_CSS_PARENT]? Mi tema padre es Ashe.
    ¡Gracias!

    1. Hola Cristina.
      WordPress almacena todos los temas que tengas instalados en la carpeta: tunombrededominio/wp-content/themes/

      Si ahora descargas el archivo .zip con el theme Ashe y lo descomprimes, verás que su archivo style.css está en la carpeta principal del theme. Por lo tanto, si lo tienes instalado ya en tu WordPress la ruta que deberás sustituir en el código es:
      tunombrededominio/wp-content/themes/ashe/style.css

      Un saludo

  12. Hola. Gracias por el post.
    creo que he seguido todos los pasos, pero algo debo de haber hecho mal, ya que cuando activo mi tema hijo me no me guarda muchisimas configuraciones que había hecho en la plantilla padre… ni el logo, ni el orden del menú, ni fuentes, ni colores, ni visual en las categorías…. en fin, que solo me conserva las fotos que he subido.
    ¿Cómo arrego esto?
    Gracias de antemano

    1. Hola Isa,
      Con la información que aportas y sin capturas de pantalla no puedo ayudarte. Puedes abrir un ticket a nuestro soporte técnico con toda la información y ellos te ayudarán.
      Si no consigues hacerlo a mano, utiliza el plugin del que hablo en el artículo: Child Theme Configurator. Es muy fácil de usar y tendrás tu tema hijo listo en unos pocos clicks.
      Gracias por tu comentario.
      Un saludo.

      1. Hola Ángela,
        gracias por tu respuesta.
        no estaba haciendo nada mal, lo que me pasaba es que al montar un tema hijo sobre un padre ya personalizado, todos los cambios y personalizaciones que había hecho se me reseteaban y tenía que volver a personalizar todo de nuevo.
        Finalmente no he hecho un tema hijo, porque tardo menos en cambiar las líneas de código (ya que son pocas) en el tema padre, que volver a personalizar todo en el tema hijo.

        De todos modos, gracias por tu interés y muy buen artículo
        Saludos

  13. Hola Angela, gracias por el post me fue muy útil para entender los child themes aunque el tema que instalé ya tenía un ZIP con los archivos a incluir en su child.

    Soy programador PHP y la consulta que quería hacerte es la siguiente:

    Los archivos .php que coloque en mi carpeta child creada y activada y con alguna modificación se van a ejecutar en algún momento? primero se ejecutan los php del padre y luegos los del hijo o al revés?, por ejemplo, si modifico 404.php y footer.php y solo estos 2 archivos los ubico en mi carpeta child, cuando se requiera la ejecucion de esos archivos se van a ejecutar los de mi carpeta child?

    Nuevamente gracias por tu post.

    PD: Tienes algún desarrollo en videojuegos?

    1. Hola Fabian,

      Cuando se ejecuta tu web, lo primero que se carga son los archivos del child theme. Por lo tanto y siguiendo el ejemplo que comentas, primero se cargaría el archivo 404.php del tema hijo y luego WordPress “rellena” lo que falte (si es necesario) con partes del tema padre. Es decir, cuando salte el error 404 en tu web se ejecutará el 404.php del child theme automáticamente.

      En cuanto a lo de “desarrollo en videojuegos” no es una temática que trabajemos en el blog de Raiola.

      Gracias por tu comentario.

  14. Hola, he creado una web y después de leer este articulo he decidido crear el tema hijo, más bien el tema ya viene con la opción de descargárselo. Cuando lo he activado he visto que faltan muchas configuraciones, que tendría que hacer para que quedara igual que el tema padre.

    1. Hola Santos,

      El tema hijo hereda las funcionalidades del padre. Por lo general (y en base a mi experiencia) cuando lo activas , trabajas con el como “si fuera el tema padre”. Tendría que ver que sucede en tu caso.

      Gracias por comentar

  15. Hola, me dice en el dashboard de WordPress que no encuentra la hoja de estilo de mi tema hijo. Qué hago o qué paso he debido hacer mal? Gracias

    1. Hola Patricia,

      Siento decirte que sin ver el código no puedo encontrar el error. En Raiola tenemos un servicio de aplicaciones. Si abres un ticket a este departamento mis compañeros te podrán ayudar. Gracias por comentar.

  16. Si ya realicé todos los cambios, mejor dicho, ya terminé de hacer a web sin hacer un tema hijo, hay alguna de pasar TODOS estos cambios ahí para que en una futura actualización se borren las moficaciones. Por otro lado, estos modificaciones te refieres a cuando son por código? no sabía que,por ejemplo, pasaba lo que describes con el goole analytics. Agradecería tus comentarios, tengo que presentar la web dos semanas. T_T

    1. Hola Roy,

      Tendría que ver tu código para indicarte que partes deberías pasar al tema hijo, pero básicamente es todo el código que añades a mayores al theme principal. Me explico:
      Si tu creas una función nueva para añadir un texto a todos los title de la web en el functions.php del padre, o modificas el aspecto de la cabecera header.php del padre, en el momento que hay un update del theme, esos archivos se sustituyen por los nuevos. Literalmente, desaparecen los viejos y se descargan los nuevos. Por eso es importante crear un tema hijo si tienes intención de hacer modificaciones en un theme.

      Siguiendo un poco el ejemplo que te comento:
      – Para la función que añade un title: tendrías que cortar y pegar esa función en el functions.php del tema hijo.
      – Para la modificación del archivo header.php: Copias el header.php de tu theme principal en el theme secundario.

      Espero que te sea de ayuda. Gracias por comentar 🙂

  17. Hola, cree un chil para el tema shopical con el plugin recomendado en la nota pero al activar el tema child me da error 503 y no le encuentro la vuelta, alguna idea ??

    1. Hola Alejandro,

      Tendría que ver porqué te da ese error 503 y sin más información no te puedo contestar correctamente. Si es por causa del plugin y si Shopical no te proporciona un zip con el child theme, entonces te recomiendo que lo hagas a mano siguiendo el tutorial.

      Un saludo 🙂

  18. Hola Angela!
    Primero muchas gracias por tu post! Me ha sido de gran ayuda y está super bien explicado 🙂
    Y en segundo lugar, te hago la misma pregunta que te han hecho por aquí arriba.
    Ya tengo creada y publicada mi web pero en su momento no hice tema hijo.
    Lo hice todo directamente sobre el tema padre usando Generate Press y Elementor.
    ¿Se puede hacer el tema hijo a posteriori para que esa web que tengo ya creada no tenga ningún problema en el futuro?
    ¿Qué pasos tendría que seguir?

    GRACIAS!

    1. Hola Juan Pablo, claro que puedes hacerlo, pero vas a tener que pasar esas modificaciones que has hecho en el theme principal, al tema hijo que crees ahora.

  19. Buenas tardes

    Tengo en LOCAL un archivo soluciones.css y está en XAMPP en C:\xampp\htdocs\SolucionesEspeciales\wp-content\recursos\soluciones.css
    y lo vengo usando MAL, cargándolo con una instrucción css = @import
    ahora quiero llevarlo a la functions.php con la instrucción
    wp_enqueue_style(‘child-theme-css’,'[/solucionesespeciales/wp-content/recursos/soluciones.css]’);},
    pero desconozco la sintaxis a usar en el path, pues no logro que se apliquen esos estilos
    Me puede ayudar, por favor…

    Perdón, vengo del ASP, no tengo experiencia en PHP, estoy aprendiendo

    Muy profesional este blog de raiolanetworks.es! y muy buena la info

    Gracias

    1. Hola Ernesto,

      Entiendo que tu archivo soluciones.css es donde almacenas todo el css del theme. No sé como tienes distribuido el código y tendría que verlo para darte una solución más acertada. Pero por lo que comentas, si copias el código al style.css del child theme, WordPress trabajaría con el. Seguramente tengas que adaptar algunas rutas entre otras cosas, pero por lo que cuentas, es probable que no necesites encolarlo como me enseñas en tu comentario. De todas maneras, si quieres hacerlo, nuestro artículo sobre: https://raiolanetworks.es/blog/hooks-wordpress/ te va a ser de ayuda.

      Gracias por tu comentario.

  20. hola, tengo un incoveniente, cuando voy a personalizar el theme en los widgets dice que tengo 5 areas y solo me deja colocar 2, me dice “Tu tema tiene 3 áreas de widget más, pero esta página en concreto no las muestra.

    Puedes navegar a otras páginas de tu sitio mientras estás usando el personalizador para ver y modificar los widgets mostrados en esas páginas.”

    1. Hola Cellxzs,

      Para poder responderte tendría que ver tu caso personalmente para ver que ocurre. Si sigues teniendo problemas, te recomiendo que abras un ticket a nuestro soporte de aplicaciones para que podáis trabajar en una solución.

      Gracias por tu comentario.

  21. hola, tengo un tema hijo e echo una modificacion en un php y no me sale la modificacion, en cambio lo hago en el padre y ahi si sale lo modificado, e copiado todos los archivos del tema a ver si habia algo que se me habia pasado por copiar y nada

    1. Hola Cristian,

      Desde aquí, sin poder ver los archivos no puedo localizar el problema. Si no lo solucionas puedes acceder a nuestro servicio de aplicaciones desde ticket. Allí te ayudarán con tu consulta.

  22. Hola!! Angela.

    ¿Como hago en el tema hijo para meter la carpeta “header” del tema padre? A través de cpanel se puede? Ya que ahí es donde meto las etiquetas de afiliados. Gracias.

    1. Hola Manu,

      El tema hijo hereda las funcionalidades del padre por lo que no necesitarías hacerlo en un principio. Si lo que quieres es añadir contenido al header de tu theme, puedes hacerlo con un hook: wp_head. En nuestro artículo de: https://raiolanetworks.es/blog/hooks-wordpress/ tienes más información.

      Si lo que quieres es modificar más cosas del header (el aspecto por ejemplo) de tu theme entonces copia el archivo correspondiente al tema hijo. Normalmente sería: header.php (depende de la plantilla que utilices).

      Sobre tu duda acerca de si puedes hacerlo a través de cPanel: sí. Desde el administrador de archivos de tu cPanel. De todas maneras, para añadir código adicional a la cabecera, te recomiendo añadir el hook wp_head() al archivo functions.php de tu child theme.

      Gracias por tu comentario Manu 🙂

  23. ¡Hola Angela!
    He creado tema hijo manualmente, sin plugin.
    El tema hijo solo hereda los archivos nativos de wordpress como el header, footer, etc. ¿Como hago para modificar archivos en subcarpetas?
    Por ejemplo en mi tema en el header con do_action(); llama a una subcarpeta “includes” >>hooks.php

  24. Hola, como están?

    Cree el tema hijo según sus indicaciones en una sitio que ya tenía desde antes donde utilizo el tema “Hello Elementor. En el tema principal había agregado ciertos códigos como Google Analytics, Klavillo. Además había modificado para que no se mostrara el logo en la parte superior.

    Al activar el tema hijo ¿estas modificaciones se pierden? y/o donde debería agregar esta información? pues al editar el tema hijo no logro ver por ejemplo el header.php

    Como lo debería hacer?

    Muchas gracias por su ayuda.

  25. Hola.
    Muchas gracias por la explicación.
    Al activar el tema hijo me dice que el tema ha sido activado y un link para visitar el sitio pero no aparece como tal y el padre es el que sigue activado.
    ¿Es así como debe funcionar o la he liado y tengo que hacerlo otra vez?
    PD lo hice con el plugin y en el paso ocho active la casilla.
    Desde ya muchas gracias.

    1. Hola Alex, pues no te lo puedo garantizar, pero creo que no te esta funcionando porque le falta algo a la estructura… aunque nunca he visto un caso como el tuyo.

  26. Hola
    Tengo un par de dudas esto del tema hijo me está volviendo loco.
    Veamos, lo que yo quiero saber es lo siguiente :
    Yo compro un tema Pro, que ya trae de por sí un zip tambien con el child theme de dicho tema. Ok
    Yo instalo el theme principal , o sea el que será » el padre «. Bien.
    – A continuación instalo los plugins que se necesita ( elementor, etc etc , x etc )
    Una vez tengo ya todo , y aún no he empezado a crear contenidos, instalo el Tema Hijo. Y lo activo, por lo tanto ya me olvido del tema
    oficial, llámese Padre. Ok
    Y como lo activo – el hijo – , siempre estoy y voy a estar trabajando con el hijo . Del padre nos olvidamos, no ?
    Porque esto es lo que yo quiero saber.
    Ahora mi pregunta :
    Cuando toca actualizar ( porque toca actualizar y además cada dos por tres ) el tema Oficial , o sea el padre….
    ¿ Yo no debo hacer absolutamente nada con el tema hijo ?
    Me explico: Si al principio el tema padre era la versión 0.1 y por tanto el tema hijo tambien es version del padre 0.1, y ahora actualizo el padre a la 0.2…
    ¿ que pasa con el hijo ? se queda en 0.1 ?. Tengo que hacer yo algo ? ¿ se actualiza el hijo a la vez que el padre por arte de magia o de modo invisible ?
    Me toca copiar códigos del padre y pegarlos en el hijo ? y esto en cada actualización ? o no debo preocuparme de ello ? Lo hace solo ?
    Y sobre todo : Si dicen que el tema Padre no sobreescribe archivos en el hijo…entonces al actualizarse el Padre, el hijo se queda obsoleto y por tanto estaremos trabajando con una versión antigua del tema ??? Y si además no debemos actualizar el hijo y tampoco recoge las actualizaciones y novedades del padre … al final estaremos trabajando con una versión super antigua ???
    No entiendo

    Esto me trae de cabeza y por eso no me atrevo a incluir el tema hijo, pero a la vez me da pánico llegar a perder todo algún dia.

    Segunda pregunta :

    Supongamos que por catástrofe sea de la naturaleza que sea, se me rompe el tema hijo – que es con el que trabajamos, no ?- ok tengo el padre. ¿ Y ?
    El tema padre se supone que está vacío de contenidos ya que todo estaba en el hijo.
    Entonces ¿ para qué me sirve realmente el tema hijo ? si se destruye el hijo y el padre está blanquito y vacío de contenido me da igual tener hijo que no .
    Es decir, capto que el hjj no hace función de copia de seguridad, sino que sirve para modificar Css y otras cosas como php sin que afecte al padre.
    Pero precisamente por eso sigo sin entender la utilidad real del hijo , pues si el padre se mantiene siempre intacto, en caso de destruirse mi web, se destruye el hijo y no el padre, y de nada me sirve tener el padre si está en blanco.
    O sea, tendría que construir desde cero otra vez tooooda mi web sobre el padre o sobre un nuevo hijo ? es que no entiendo nada .
    Por otro lado, como uso un theme Premium siempre tengo a mi disposición otra copia nueva y original – y por tanto también vacía de contenidos – del tema padre.

    En resumen , ¿ qué se debe hacer exactamente una vez instalado el padre y el hijo ? ¿cómo interactúan los dos ? ¿ debemos de hacer algo en plan mantenimiento para que ambos – y no solo el hijo – sepa el contenido que hay ?

    Busco estas respuestas en todas partes pero no las encuentro. Solo encuentro los pasos a dar para crear temas hijos, perno no se como funcionan las cosas o qué hay que hacer después de ya tener el tema hijo.

    ¿ Me pueden ayudar con esto ?

    Un saludo y excelente página y post !

    1. Vamos a empezar por el principio con las preguntas.

      – Efectivamente, activas el tema hijo y a partir de ahi actualizas el padre sin problema y todas las modificaciones las haces siempre en el hijo, el tema hijo NUNCA lo actualices o te cargaras tus modificaciones. Un theme hijo hecho como dios manda no tiene NADA que actualizar, solo lo que tu le metas manualmente….es decir, solo tiene tus modificaciones.

      – El tema hijo esta hecho para que las modificaciones de codigo que tu hagas en el theme no se borren en las actualizaciones, precisamente porque el theme hijo NO necesita actualizaciones y el padre si. Lo que si es cierto, que las opciones propias del theme se tienen en cuenta como diferentes para el padre y el hijo en la mayoría de las ocasiones.

      Te lo voy a resumir, el theme lo actualizas, el hijo no, porque sino perderás el código que metas en los archivos del theme hijo, y todo funcionara, es simple.

      1. Hola, muchas gracias pro responder !

        Entiendo.

        Pero sigo con esta duda : Yo trabajaré con el tema hijo, haciendo las modificaciones que yo quiera, ok, y el tema padre no lo toco.

        La cuestión : El tema padre se actualiza cada dos por tres , tanto minor updates como Major updates.

        Si no actualizo el hijo….acabaré trabajando con una versión arcaica ? ¿ o el hijo adquiere las actualizaciones del padre sin que yo haga nada ?

        Es decir, cuando actualizo el Padre ( sí o sí ) … el tema padre se encarga de actualizar al hijo por sí mismo o debo hacer yo algo ?

        La duda me surge porque el propio tema que uso, Premium, lo actualizan cada 15 días mas o menos, y en cada descarga me trae tanto padre como el zip hijo con nueva versión.

        Por eso necesito saber si el hijo, sin que yo lo actualice manualmente, se actualiza o no él solito, digamos que heredando de forma automatizada las updates que le entren al padre o algo así. ??¿

        Gracias y un cordial saludo!

        1. Es que…como te vuelvo a repetir, el theme hijo NO necesita actualizaciones porque NO tiene código, todas sus funciones las hereda del padre. El hijo todo el código que tiene es el que tu le metas. Un buen theme hijo no tiene versión, es el theme hijo y punto.

          ¿Puede venir un theme hijo con código? Si claro, pero entonces la culpa es del desarrollador por hacerlo y te recomiendo que huyas de ese theme… el theme hijo es para que tu le metas código, no el desarrollador.

  27. Mucas gracias por la información.
    He usado estas instrucciones para crear mi tema CHILD manualmente. El tema padre es uno de los que venían inicialmente con wordpress (CLEAN RETINA).

    Uno de los motivos de hacer este CHILD era poder modificar el footer de la web. Para ello veo que este tema usa un fichero llamado footer-extensions.php dentro de una carpeta llamada ‘library’ que está dentro de la carpeta del tema.
    He copiado ese y otros ficheros que tiene que ver con footer en la carpeta del tema hijo respetando la misma estructura. SIn embargo, si modifico el fichero footer-extensions.php del tema hijo no produce ningún cambio. SIn embargo si lo hago en el del tema padre sí.

    ¿En qué puedo estar fallando?Gracias de antemano

    1. Hola Alejandro, pues la verdad es que no se decirte, ya que ese fichero es especifico del theme que nos comentas. Vas a tener que contactar con el desarrollador o revisar la documentación del theme.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *