¡Muy buenas lector! Mi nombre es Eduardo Turiño, soy programador web especializado en WordPress, llevo más de 15 años y más de 80 proyectos a mis espaldas 😅, aunque también me dedico al Posicionamiento Web en Buscadores en Bilbao como evolución natural de un proyecto web. Siempre motivado a aprender más de SEO, Analytics, Google Ads y visibilidad online en general.

Gran parte del éxito de WordPress se debe a su flexibilidad y facilidad de extender sus funcionalidades utilizando Plugins o Themes. La conocida plataforma es líder indiscutible en el ecosistema de gestores de contenido, puedes tener el control total de tu web, y es relativamente fácil personalizarlo a tu gusto.

Si tienes algunos conocimientos básicos de HTML, CSS y/o PHP, no hay nada que no puedas cambiar.

Si no eres programador/a, mi recomendación es que contactes con algún experto WordPress o alguien con conocimientos para que te eche un cable, así no tienes que entrar en el complejo mundo del código. 😋

Pero si aún así te animas a tocar código, aquí te dejo una completa guía de cómo crear un tema hijo de WordPress:

TABLA DE CONTENIDOS:

1. ¿Qué son los temas padre y temas hijo?

2. ¿Por qué usar (o no) un Child Theme?

3. Child Theme: Ventajas

4. Child Theme: Desventajas

5. ¿Cuándo usar un Child Theme?

6. Creando un Child Theme para WordPress

7. Orden de los archivos de estilo de Child y Parent Theme

8. Llamadas a las plantillas del Child Theme y Parent Theme

9. Creando un Child Theme con Plugins

10. Un Child Theme NO es una DEMO

11. Internacionalización y Child Themes de WordPress

¿Qué son los Temas Padre (Parent Themes) y Temas Hijo (Child Themes) en WordPress?

En la customización de una web, los desarrolladores nos encontramos muchas veces que la plantilla principal ha sido modificada directamente. Según las recomendaciones de los creadores de WordPress no es la mejor práctica, principalmente porque si el desarrollador del Theme lanza una nueva versión con funcionalidades adicionales, corrección de agujeros de seguridad o mejoras en el rendimiento, todas las modificaciones hechas se perderían.

El escenario ideal para personalizar el aspecto de nuestra web, es la utilización de Child Themes o Temas Hijos.

La estructura de plantillas de WordPress introduce este concepto de Child Theme o tema hijo, que aporta una serie de ventajas que veremos a continuación. La principal de ellas, te permite hacer modificaciones sin tocar los archivos del Theme original (o plantilla padre).

Te invito a leer esta completa guía de cómo crear un tema hijo y aprender a utilizarlo de la forma correcta.

¿Por qué utilizar (o no) un Child Theme?

Antes de hablar de Child Themes, debemos hablar del padre, porque sin padre no hay hijo ¿no? 😉

Un Theme se convierte en padre cuando alguien desarrolla o crea un tema hijo para él. Es así de sencillo, no es necesario que una plantilla tenga una característica especial para que sea padre.

Sólo debe tener una estructura idónea con los archivos necesarios de acuerdo a la jerarquía de archivos en un Theme de WordPress, para la correcta visualización de la web.

Entonces, ¿qué es un Tema Hijo?

Desde el punto de vista de funcionalidad, un tema hijo no difiere del tema padre, los temas hijos se pueden encontrar en el menú Apariencia/Temas, la diferencia consiste en que los temas hijos dependen completamente de su tema padre para que funcione. Sin su padre, un tema hijo no puede ser activado.

Esto es porque el Child Theme no es una plantilla por sí sola, sino que hereda, añade o modifica las funcionalidades del padre, utiliza todo lo que está presente en el Parent Theme y sólo modifica lo que explícitamente se haya indicado en el hijo.

En el tema hijo, se pueden modificar estilos, funciones, distribución de elementos, plantillas de página, y mucho más. Puedes lograr que el hijo no se parezca en nada al padre, pero lo necesita para funcionar.

Child Themes: ventajas

Además de las mencionadas anteriormente, los Child Themes tienen estas ventajas:

• En vez de tener que crear un Theme desde cero, puedes construir tu plantilla sobre una que ya existe, acelerando el tiempo de desarrollo.
• Puedes beneficiarte de implementaciones sofisticadas de los temas padre y personalizar sólo aquellas partes que te interesan.
• Puedes actualizar el tema padre sin perder los cambios en el código.
• Si no estás conforme con la personalización, puedes volver atrás, activando el tema padre.
• Algunas modificaciones no se pueden hacer con el Personalizador de temas que viene de serie con WordPress ni con las opciones del tema que implementan muchas plantillas, por lo que la única solución sería un Child Theme.

Un tema hijo puede contener imágenes, archivos javascript, CSS, archivos individuales de plantillas, etc. o simplemente una declaración de que un tema es hijo de otro. Es decir, tú decides el nivel de personalización que quieres.

De hecho, para crear un tema hijo, sólo necesitas una carpeta donde guardar los archivos del tema, un archivo style.css propio del tema hijo y el archivo functions.php. Más adelante veremos lo que tenemos que añadir a esos archivos.

Child Themes: desventajas

• Los Themes de WordPress están desarrollados con una combinación de lenguajes PHP, HTML, CSS, Javascript, etc. por lo que necesitas estar familiarizado/a con la programación si quieres hacer cambios de envergadura. Afortunadamente para cambios sencillos hay mucha documentación en el propio Codex de WordPress y los foros de soporte. Pero la complejidad en cada caso puede hacer que necesites un programador experto.
• Si estás desarrollando el tema hijo en local, no hay problema, pero si necesitas que esté colgado en algún sitio, ya sea en la web definitiva o en un subdominio de prueba, y estás creando el tema con un editor de código, necesitas un cliente FTP para poder subir las modificaciones, esto no siempre está disponible.
• A veces las actualizaciones del Theme principal o padre introducen cambios que lo hacen incompatibles con el Child Theme. Por ejemplo si el desarrollador ha cambiado los nombres de las clases CSS o ha añadido elementos adicionales al DOM, en este caso tendrías que adaptar tus declaraciones CSS a los nuevos selectores.
• Es posible que el rendimiento de la web se vea afectado porque la llamada del Child al Parent consume tiempo, aunque hay formas de paliar esto.

¿Cuando usar un Child Theme?

Ahora bien, ¿es realmente necesario utilizar un tema hijo siempre? creo que no. Si sólo quieres hacer pequeñas modificaciones de estilos, el propio WordPress permite añadir declaraciones adicionales que no se ven afectadas por una actualización de la plantilla.

Por ejemplo, si vas a Apariencia/Personalizar, puedes encontrar muchas opciones, dependiendo de lo sofisticado que sea el Theme. En el caso de los estilos, puedes ir a la opción CSS adicional e incluir las declaraciones de estilos adicionales que quieras. Estas modificaciones no se pierden si actualizas la plantilla.

Y por supuesto, existen infinidad de plugins que alteran o redefinen la funcionalidad de las plantillas para ajustarlo a tus necesidades.

Por ejemplo el WP Add Custom CSS que te permite añadir CSS personalizado a toda la web, a una página o entrada, o a contenido personalizado como productos del e-Commerce, etc.

También, con el Site Origin CSS también puedes modificar estilos de elementos en tiempo real, proporcionándote además una vía rápida del selector del elemento a modificar.

Por el contrario, si lo que necesitas es hacer cambios significativos en el Theme, como una “reforma” integral de tu web, cambios múltiples en las distintas plantillas de página, archivos, etc. un tema hijo es la opción más adecuada.

Creando un Child Theme

Ok, ahora que sabes qué son los temas hijo y lo que pueden hacer por tí, te animo seguir este tutorial para que puedas crear el tuyo propio.

Usaremos como tema padre el popular Twenty Twelve que viene con las instalaciones de WordPress por defecto.

1.- Crear una carpeta en wp-content/themes

Como hemos mencionado anteriormente, un tema hijo necesita al menos 3 cosas: su propia carpeta donde se van a almacenar los archivos, una hoja de estilos llamada style.css y el archivo functions.php.

Ya sea online o local, crea una carpeta dentro de wp-content/themes con el nombre que quieres darle a tu tema hijo, por ejemplo twentytwelve-hijo.

2.- Crear el archivo de hojas de estilo style.css

Dentro de dicha carpeta debes crear el archivo style.css que contendrá, en primer lugar, la definición del tema hijo, y también los estilos que quieras agregar. Los Themes pueden tener múltiples archivos de hoja de estilo, pero a los efectos de este tutorial nos centraremos en este archivo.

Crear el archivo es fácil, simplemente crea un nuevo archivo en tu editor de texto de preferencia y guardalo como style.css.

Lo primero que debe tener el archivo es una cabecera indicando la información del Child Theme. En principio debe quedar así:

Te explico lo que significa cada línea:

• Theme Name: El nombre que le das al tema, visible desde varios puntos del backend de WordPress.
• Theme URI: Demo del Theme online. Esta información debe estar presente que quieres subir el tema al repositorio oficial de WordPress.
• Description: Es una descripción amplia del Child Theme. Se mostrará en los detalles del tema en el menú Apariencia de WordPress.
• Author: El autor del Theme.
• Author URI: La web del autor
• Template: Este campo es fundamental, aquí se define el nombre del tema padre, más concretamente la carpeta que lo contiene. Es importante que sea exactamente igual, incluyendo mayúsculas y minúsculas, sino te generará un error.
• Version: La versión del tema hijo. Normalmente se comienza con la versión 1.0. Se sigue el estándar de versionado de software.
• License: Se indica la licencia del tema hijo. Los Themes en el repositorio suelen publicarse bajo la licencia GPL. Normalmente debes respetar la licencia bajo la cual se rige el tema padre.
• License URI: Aquí debes indicar la web donde está la licencia desarrollada. Si es GPL se suele apuntar a la web oficial de GNU.
• Tags: Se especifican las etiquetas que ayudan a encontrar el Theme en el respositorio oficial de WordPress, en el caso de que seas desarrollador de plantillas de WordPress y quieras publicarlo
• Text Domain: Este campo se utiliza para la internacionalización del Theme. Lo tienes más explicado en la sección de Internacionalizar temas.

Cuando subas tu Child Theme, aparecerá en el apartado Apariencia/Temas, e indicará que es un tema hijo de Twenty Twelve.

De todas formas, no te preocupes por tantos campos, no todos son necesarios. De momento sólo con indicar el Nombre, Description, Author, Template y Version, sería suficiente.

Luego veremos qué más podemos añadir a este archivo.

3.- Crear archivo functions.php del Child Theme

Este archivo nos permite añadir funcionalidades importantes para el tema hijo y alterar el funcionamiento del tema padre. Puede contener código PHP y llamadas a funciones nativas de WordPress (etiquetas, acciones y filtros).

¿Qué debe contener el functions.php? En principio sólo la etiqueta de apertura de código PHP, que indica que a partir de dicha línea, vamos a insertar las funciones necesarias.

Este archivo no es estrictamente necesario, pero es muy recomendable usarlo para llamar a funciones que sincronizarán algunos aspectos del tema padre con el tema hijo, como explicaremos a continuación.

4.- Heredar estilos del tema padre

En muchos casos -no en todos los temas- es necesario añadir un código que permita heredar los estilos CSS del tema padre. Hay dos formas de hacerlo.

Una vía es añadir una directiva @import en el archivo style.css del tema hijo. Quedaría así:

Pero este método es ineficiente por razones de rendimiento.

El segundo método es el recomendado, y consiste en añadir la función de WordPress wp_enqueue_style() en el archivo functions.php. En el caso que nos ocupa, hay que añadir:

5.- Bonus tip: imagen del Theme

Cuando subimos o activamos un tema, podemos añadir una imagen que lo identifique. La imagen debe ser un archivo PNG con nombre screenshot.png y debes ubicarlo en la misma carpeta del tema.

El tamaño recomendado es de 880×660 píxeles, aunque se mostrará a 360×270 píxeles, para que se muestre bien en pantallas con altas resoluciones.

En la imagen puedes poner cualquier cosa, normalmente se suele poner una captura de pantalla de cómo se ve la plantilla en funcionamiento.

¡Y eso es todo! ya tienes un tema hijo funcionando 😎 Sólo te falta activarlo, seleccionando el botón “Activar” de la imagen anterior.

6.- Sobrescribir estilos en el tema hijo

A partir de aquí ya depende de los estilos que quieras aplicar. Los cambios han de ser añadidos en el archivo style.css. Se requieren conocimientos de programación HTML / CSS. Pero a modo de ejemplo te explico cómo cambiar el color del titular.

La herramienta para desarrolladores de Google Chrome te será muy útil para identificar el elemento dentro de la estructura HTML de la página.

Los pasos son sencillos:

1. En Chrome, hacer clic derecho sobre el titular y seleccionar “Inspeccionar elemento”
2. Vemos que tenemos que cambiarle el color al elemento identificado por la ruta css .site-header h1 a
3. Ir a Apariencia/Editor y añadir al final de la cabecera del archivo style.css la siguiente línea CSS:
   .site-header h1 a { color: blue; }
4. Voilá, el titular se cambia a color azul.

Orden de ejecución de archivos de plantilla

Es importante tener en cuenta que cualquier archivo que añadas al tema hijo, sustituirá al archivo de su mismo nombre del tema padre.

Por tanto, si no te gusta algo sobre la cabecera, el pie, la página de categorías del blog o cualquier otro elemento, sólo tienes que copiarlo del tema padre al hijo y hacer las modificaciones correspondientes.

Esta regla tiene una excepción, que el archivo functions.php, que se ejecutará primero el del tema hijo.

Para aclararlo de manera visual, te muestro la representación de qué archivo se ejecuta en el ejemplo que estamos desarrollando.

* primero el functions.php del hijo, luego el del padre.
** primero el style.css del padre, luego el del hijo. Si se siguen las instrucciones sobre el punto 4 anterior.

Plantillas de página: unión de las fuerzas padre+hijo 💪

Hemos aprendido que podemos sobrescribir cualquier archivo que esté en el tema padre, haciendo una copia del mismo en el hijo y modificándolo. Sin embargo, usar archivos de plantilla que sólo existen en el tema hijo también es posible. A través de los archivos de plantilla de página.

Esto nos permite disponer de ambas versiones (la original del padre, más la modificada en el hijo). Por ejemplo si el tema padre no permite una página con barra lateral, podemos hacer una copia del archivo page.php al tema hijo, y para que no anule su versión en el padre, lo renombramos como page-barra-lateral.php.

Luego tenemos que indicar al principio del archivo, el nombre de la plantilla:

Teniendo ambas versiones, ya podemos ir al editor de página y el la sección plantilla, seleccionar qué plantilla queremos que utilice:

Llamadas a archivos de plantilla en el tema hijo y padre

Anteriormente vimos cómo cargar el archivo de estilos del tema padre, usando la función wp_enqueue_style(). Dentro de ella habrás visto la llamada a esta función get_template_directory_uri() que permite obtener la URL de los estilos del padre.

La mayoría de plantillas WordPress tienen “deslgosados” los archivos para una mejor organización del código, podemos crear varias versiones del header.php o varios tipos de layouts para cada contenido, asignándole a cada uno un archivo distinto (por ejemplo: header-2.php, header-3.php, entrada-2-columnas.php, entrada-3-columnas.php, etc.)

Pues bien, función get_template_directory_uri() es parte de una familia de funciones que permiten cargar archivos externos, desde otro archivo de plantilla o como recurso externo del front (archivos css, js, imágenes, etc.)

Explicamos cada una de ellas y cuando se deben usar, para cargar los archivos adecuados:

Por tanto es importante saber llamar con la función correcta a los archivos de plantilla adicionales que tengamos:

Creando un Child Theme con Plugins

Si no quieres correr riesgos ;) aún puedes utilizar un último recurso para crear un Child Theme, es la utilización de un plugin que genera un tema hijo de manera fácil. Veamos algunos de los más populares:

Child Theme Configurator

El Child Theme Configurator va más allá de crear un tema hijo. Creado para usuarios WordPress que quieren personalizar las hojas de estilo directamente, este plugin te permite identificar y sobrescribir los atributos CSS exactos que necesitas.

El analizador interno escanea la plantilla renderizada y automáticamente configura tu tema hijo. Además tiene un módulo «preview» para mostrar cómo van a quedar los cambios visuales que hayas hecho, antes de publicar.

Algunas de sus características:

• Automáticamente determina la forma correcta de crear un Child Theme basado en el tema principal.
• Puedes encontrar los selectores CSS exactos que utiliza el tema padre, y puedes cambiar las propiedades.
• Puedes localizar, copiar y editar los archivos de plantilla directamente desde el plugin
• Copia los widgets, menús y opciones del personalizador existentes al tema hijo
• Llamadas <link> de estilos en vez de @import
• Personalización de los @media queries para el diseño responsivo
• Selector de colores en el editor
• Exporta y descarga el tema hijo generado como zip
• Previsualización de los cambios antes de guardarlos

Aquí te dejo un vídeo donde el desarrollador explica las funcionalidades del plugin.

Child Themify

Este plugin es de los más sencillos; seleccionas el tema padre, los datos para el tema hijo y los archivos que quieres copiar, además del style.css y functions.php.

Un punto en contra de este plugin, es que utiliza la directiva @import para llamar el archivo de estilos del tema padre, como hemos dicho antes, se desaconseja.

One-Click Child Theme

El plugin One-Click Child Theme te permite en sólo dos pasos generar un tema hijo. Indicamos aquí el procedimiento:

1. Ir a Apariencia/Temas y seleccionar el tema “padre” al que le queremos hacer un hijo :p
2. Pulsar en el botón “Tema hijo” o en la opción del menú del mismo nombre que aparece después de activar el plugin.

   

3. Indicar el nombre del tema hijo, descripción y autor.

   

4. Automáticamente creará una carpeta para el tema hijo, un archivo de estilos con la cabecera correspondiente y el archivo functions.php con la llamada a los estilos padre como hemos explicado anteriormente, con la función wp_enqueue_style().

Sobre este plugin es importante destacar varias cosas:

• Aunque en nuestras pruebas no ha dado ningún error, este plugin no se actualiza desde hace 3 versiones de WordPress, siempre se recomienda utilizar una versión actualizada y compatible con la última versión de WordPress, para evitar errores e incompatibilidades.
• El plugin activa automáticamente el Child Theme creado, por lo que ya se pueden hacer los ajustes necesarios.
• Otras funciones útiles del plugin que (a través de la opción Apariencia/Tema hijo):
  • Copia directamente plantillas del tema principal al secundario. Te ahorra tener que estar copiando vía FTP o a través del panel de hosting.
  • Crea automáticamente una captura de pantalla personalizada para ser usada como imagen del tema (screenshot.png) utilizando el servicio mShot de wordpress.com
  • Repara el tema hijo si éste ha utilizado referencias al padre de la forma antigua y utiza las funciones get_template_directory_uri(), etc.

Child Theme Check

Las actualizaciones de Themes se hacen para mejorar el rendimiento y corregir agujeros de seguridad, optimizar el código o añadir nuevas características. El hecho de tener una copia de un archivo de plantilla en el tema hijo, es útil para la personalización, pero tiene la desventaja que los archivos en el hijo se quedan sin actualizar.

Aquí es donde el child theme check tiene un papel fundamental, porque te ayuda a llevar un seguimiento de esos cambios.

Para un uso óptimo el tema padre debe tener el número de versión declarado en la cabecera de cada archivo, por ejemplo @version 1.1.0. En este caso el plugin te mostrará una advertencia de diferencias de versiones.

Por otro lado te permite comparar ambas versiones para detectar los cambios que hay en el código fuente. Las líneas modificadas (en rojo) y las añadidas (en verde):

Child Themes de plantillas populares

Divi

Divi es uno de los temas más populares por su versatilidad y el constructor visual incorporado que te permite construir tu web con un editor directamente en el “frontend” es decir, podrás añadir bloques de contenido y verás directamente cómo va a quedar la web.

Crear un tema hijo de Divi es sencillo, sólo tienes que seguir cualquiera de los pasos explicados anteriormente, sólo debes poner en el archivo style.css, Template: Divi.

Aquí te dejo algunas webs que venden Temas Hijos para Divi:

• Divi.Space
• Elegant Marketplace
• Divi Theme Store
• Divi Cake

Genesis

Genesis es un Theme particular, se clasifica en los denominados Frameworks, que son unos tipos de plantillas que albergan una librería propia de funciones, para que el desarrollo de temas hijos se aún más abierto.

Es más complejo desarrollar un Child Theme a partir de un Framework, pero el propósito es acelerar el proceso de desarrollo en aquellos proyectos que por su complejidad, crear un Child Theme es insuficiente.

Pero bueno no es propósito de este artículo hablar de los Theme Frameworks, lo dejaremos para más adelante. Te dejo algunos recursos donde puedes encontrar Child Themes de Genesis:

• StudioPress
• AsiThemes
• ZigzagPress
• SEOThemes
• Creative Market

Avada

En el caso de la plantilla para WordPress Avada, tampoco tiene demasiada complejidad crear un Theme para ella. Se pueden seguir los pasos que te he explicado antes. Pero aquí merece mención una observación:

Avada proporciona su propia colección de Action Hooks para modificar los elementos que aparecen en la plantilla, a modo de ejemplo estos de aquí, con su funcionalidad:

• avada_before_header_wrapper
• avada_header
• avada_after_header_wrapper
• avada_before_body_content
• avada_logo_prepend
• avada_after_content
• avada_after_main_content

Como sus nombres indican, se puede utilizar para insertar contenido u otro elemento en el punto donde indica cada uno (header_wrapper = contenedor de la cabecera, after_content = después del contenido, etc.)

¿Cómo se deben utilizar los Hooks de Avada?

Puedes añadir en el archivo functions.php este código:

En este sentido tiene cierta similitud con el Framework de Genesis, que permite a traves de ganchos modificar el comportamiento de la plantilla.

Enfold

Este es otro tema muy popular por la facilidad de uso de su constructor visual y porque hacen mucho hincapié en la velocidad de carga de la web.

También pasa un poco como Avada y Genesis, tiene su propia librería de Hooks y filtros, para facilitar su personalización.

Twenty Seventeen

Aquí tienes un tutorial específico sobre cómo crear un tema hijo para Twenty Seventeen.

Este tema viene por defecto en las instalaciones de WordPress y aporta algunas novedades, como vídeos e imágen de cabecera.

Los Child Themes NO son Demos

Es importante destacar que los demos que vienen en la mayoría de Themes premium como Avada y ENFOLD, no son temas hijos.

Esas demos se instalan a través del panel de configuración de los temas y lo que hacen es generar páginas demo y copiar las imágenes que se utilizan en esos ejemplos, así como establecer una configuración de estilos preestablecida en cada caso.

Internacionalización en Child Themes

Los temas hijos, como el resto de temas y los plugins se pueden internacionalizar utilizando las funciones nativas de WordPress gettext(). Como vimos en la definición de la cabecera del tema hijo, hay un atributo que tiene un papel importante en el tema de idiomas, y es el Text Domain.

Para preparar un tema para que sea traducible, debes seguir los siguientes pasos:

1. Indicar al atributo textdomain en la cabecera del Theme, en style.css. En el caso de ejemplo sería
   Text Domain: twenty-twelve-hijo
2. Añadir una subcarpeta para los archivos de idioma, por ejemplo en wp-content/themes/twentytwelve-hijo/languages
3. Añadir archivos de idioma. Normalmente tienen el formato it_IT.po, es_CA.po, etc.
4. Invocar la función load_child_theme_textdomain() en functions.php antes de la carga del Theme. Esto se logra a través de un Hook. El código debe quedar así:

Luego en el código fuente del tema, puedes utilizar las funciones gettext:

Aquí tienes la documentación oficial de WordPress sobre cómo internacionalizar un Theme.

Resumiendo

Como has podido ver,  en términos generales construir un tema hijo en WordPress no es demasiado complejo, pero hay que mirar, porque el tema hijo debe adaptarse a las particularidades del tema padre.

Y tú, has tenido experiencia creando Child Themes? ¿Tienes algo que añadir? ¿Algo que harías distinto? Por favor compártelo en los comentarios.