¿QUÉ ES y para qué sirve ,

Cualquier parecido o similitud con otras entradas de este tipo es mera casualidad. Te lo aseguro.

Un «tema hijo» en WordPress ? Es un tema que hereda la funcionalidad de otro tema, llamado «tema padre». Los temas hijos permiten modificar o añadir las funcionalidades del tema padre.

Un tema hijo es la forma más segura y fácil de modificar un tema existente, tanto si se quiere hacer pequeños cambios como otros más amplios. En lugar de modificar los archivos del tema directamente, es posible crear un tema hijo y hacerlo prevalecer sobre el tema padre.

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!

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

• Crea una carpeta en tu carpeta de temas para albergar el tema hijo. La carpeta de temas está en wp-content/themes. Debes nombrar la carpeta sin ningún espacio como parte del nombre, y es habitual usar el nombre del tema padre seguido de «-hijo» (o «-child» en inglés) adjunto a él. Por ejemplo, si estás haciendo un hijo del tema twentyfourteen, el nombre de tu carpeta debería ser twentyfourteen-hijo (o bien, twentyfourteen-child).
• En la carpeta del tema hijo, crea un archivo que se llame style.css. Este es el único archivo requerido para hacer un tema hijo. La hoja de estilos debe empezar con las siguientes líneas:

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/
/* =Aquí empieza la personalización de tu tema
-------------------------------------------------------------- */

Puedes cambiar cada una de estas líneas para customizar tu Theme. Las líneas que sólo requieren cambios son el nombre del Theme, la Plantilla.

La Plantilla es el nombre del directorio del Theme principal. En este caso, el Theme de los Parents (Padres) es el Theme Twenty Fourteen, por lo que la Plantilla es twentyfourteen, que es el nombre del directorio donde se encuentra el tema Twenty Fourteen. Si quieres hacer que un Child de un Theme con el nombre del directorio ejemplo-theme-nombre, entonces deberías usar Plantilla: ejemplo-theme-nombre.

@import no debe utilizarse para importar la hoja de estilos de los Parents en el Theme de los Child. El método correcto es utilizar wp_enqueue_style () para poner en cola la hoja de estilos de los Parents, el uso de este código en «functions.php» a su Child de Theme. Tendrás que crear un archivo functions.php en la carpeta raíz de su Child el Theme (Se trata de los dos únicos archivos necesarios para crear un Theme Child). Justo al comienzo, en la primera línea, se debe añadir una etiqueta de apertura de PHP. Todo otro código estará después de esta etiqueta de apertura de PHP.

ARCHIVOS DE PLANTILLA

Si quieres cambiar algo más que la hoja de estilos, tu tema hijo puede sobrescribir cualquier archivo del tema padre: simplemente incluye un archivo del mismo nombre en la carpeta del tema hijo y sobrescribirá el archivo equivalente en la carpeta del tema padre. Por ejemplo, si quieres cambiar el código PHP para la cabecera (header), puedes incluir un header.php en la carpeta de tu tema hijo. De este modo, este archivo se usará en lugar del header.php del tema padre.

También puedes incluir en el tema hijo archivos que no estén incluidos en el tema padre. Por ejemplo, puede que quieras crear una plantilla más específica que la que se encuentra en el tema padre, como una plantilla para una página específica o categoría de archivo. Echa un vistazo a Template Hierarchy para más información sobre cómo WordPress decide qué plantilla usar.

USO DE FUNCTIONS.PHP

A diferencia de style.css, el functions.php de un tema hijo no sobrescribe el tema padre. En lugar de eso, se carga en adición a functions.php del tema padre (especificamente, se carga justo antes del tema padre).

En este sentido, el functions.php de un tema hijo proporciona un método inteligente y libre de problemas para modificar la funcionalidad del tema padre. Digamos que quieres agregar una función PHP a tu tema. La forma más rápida podría ser abrir su archivo functions.php y poner la función ahí. Pero no es lo más inteligente: la próxima vez que tu tema se actualice, esa función desaparecerá. Pero hay una forma alternativa que es la forma inteligente: puedes crear un tema hijo, añadir un archivo functions.php en él y añadir la función en ese archivo. La función hará exactamente el mismo trabajo desde ahí, con la ventaja de que no será afectada por próximas actualizaciones del tema padre. No copies todo el contenido de functions.php del tema padre en functions.php del tema hijo.

La estructura de functions.php es simple: una etiqueta PHP de inicio, una etiqueta PHP de cerrar al final y, entre ellas, tus bits de PHP. En él puedes poner tantas o tan pocas funciones como desees. El ejemplo de abajo muestra un archivo elemental functions.php que hace una simple cosa: añade un enlace de favicon al elemento head (cabecera) de las páginas HTML.

<?php //Etiqueta PHP de inicio

// Funcion a nuestro gusto que queramos incluir
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

?> //Etiqueta PHP de cierre

CONSEJO A DESARROLLADORES DE TEMAS. El hecho de que el functions.php del tema hijo se cargue primero significa que puedes convertir las funciones de tu tema en conectables —es decir, sustituirlas por el tema hijo— anunciándolas condicionalmente. Por ejemplo:

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Hacer algo.
    }
}

En este sentido, un tema hijo puede sustituir una función PHP del padre simplemente llamándola de antemano.

REFERENCIANDO / INCLUYENDO ARCHIVOS EN TU TEMA HIJO

Cuando necesites incluir archivos que residen dentro de la estructura de directorios de tu tema hijo, se utilizará get_stylesheet_directory (). Al ser sustituido el style.css del tema padre por el style.css de tu tema hijo y residir tu style.css en la raíz del subdirectorio de tu tema hijo, get_stylesheet_directory () apunta al directorio de tu tema hijo (no al directorio del tema padre).

He aquí un ejemplo, utilizando require_once, que muestra cómo se puede utilizar get_stylesheet_directory al hacer referencia a un archivo almacenado dentro de la estructura de directorios de tu tema hijo.

require_once( get_stylesheet_directory() . '/my_included_file.php' );

OTRA INFORMACIÓN ÚTIL

USANDO FORMATOS DE POST

Un tema hijo hereda post formats definidos por el tema padre. Pero cuando se crean temas hijos, tenga cuidado al usar add_theme_support(‘post-formats’) el cual sobreescribirá los formatos definidos por el tema padre, no los adicionará.

SOPORTE RTL

Para agregar soporte a lenguajes RTL (Right-to-left, de derecha a izquierda), incluye el archivo rtl.css en tu tema hijo:

/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/

@import url("../twentyfourteen/rtl.css");

WordPress sólo carga el archivo rtl.css si is_rtl() es verdadero.

Es recomendable agregar el archivo rtl.css a tu tema hijo, incluso si el tema padre no lo tiene.

INTERNACIONALIZACIÓN

Temas Child, al igual que otras extensiones, se pueden preparar para ser traducido a otros idiomas mediante el uso de funciones de gettext. For an overview, please see I18n for WordPress Developers. This section will address special considerations regarding internationalization of child themes.

• Start by adding a languages directory. Something like my-theme/languages/ works rather well.
• Remember that your filenames have to be fr_FR.po & fr_FR.mo (depending on your language) and not domain-fr_FR.xx like the plugins do.
• Next, a textdomain needs to be loaded. load_child_theme_textdomain() can be used in functions.php during the after_setup_theme action. The following should illustrate:

<?php
/**
 * Setup My Child Theme's textdomain.
 *
 * Declare textdomain for this child theme.
 * Translations can be filed in the /languages/ directory.
 */
function my_child_theme_setup() {
	load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>

At this point, hardcoded strings in the child theme are ready to be prepared to be translated. Here is a simple example of echoing the phrase «Code is Poetry»:

<?php
_e( 'Code is Poetry', 'my-child-theme' );
?>

The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme. In the event that a template file from the parent has been included, the textdomain should be changed from the one defined in the parent to the one defined by the child.

OTRO EJEMPLO

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.

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: /* Theme Name: Twenty Seventeen Child Theme URI: http://raiolanetworks.es Description: Twenty Seventeen Child Theme Author: Angela Author URI: http://raiolanetworks.es Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready Text Domain: twenty-seventeen-child */

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.

• 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.

• 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:

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: function mis_estilos() { wp_enqueue_style( ‘child-theme-css’, ‘[URL_CSS_PARENT]’ ); } add_action( ‘wp_enqueue_scripts’, ‘mis_estilos’ );

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:

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

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.

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.

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.

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.

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”.

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

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”.

¡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:

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

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:

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: if(!function_exists(‘nombre_function_padre’ )) { function nombre_function_padre() { //Lo que hace esta funcion } }

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!

¿Y vosotros, qué opináis?

¿Te has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.