Cómo crear un tema hijo en Wordpress

El post que dejo hoy aquí está disperso por muchas webs en internet, pero es algo que creo que merece la pena tenerlo a mano por lo que pueda surgir, ya que más de una vez me ha valido de mucho (y tener que buscarlo por ahí (aun que aparece muy bien explicado en la web de codex) me da bastante pereza). Se trata de crear temas hijo en Wordpress. Alguna gente me ha preguntado por cosas así, por lo que aquí queda para todo el que guste consultarlo …

Un «tema hijo» en WordPress es un tema que hereda la funcionalidad de otro tema al que se le conoce como «tema padre«. Los temas hijos permiten modificar o añadir las funcionalidades del tema padre sin tener que modificar este último. En lugar de modificar los archivos del tema directamente, es posible crear un tema hijo y hacerlo prevalecer sobre el 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.

¿Por qué usar un tema hijo?

Ahí van unas cuantas ventajas:

• Si modificas un tema existente y se actualiza, los cambios realizados se irán al traste. Con un tema hijo, puedes actualizar el tema padre (que puede ser importante por cuestiones de seguridad o funcionalidad) y seguir manteniendo los cambios.
• Puede acelerar el tiempo de desarrollo al heredar el código de otro tema ya que no hay que escribirlo todo desde cero. Aun que esto es más bien algo bueno para los más perezosos.
• Es una buena forma de empezar si se está empezando a hacer cosillas sobre el desarrollo de temas WordPress.
• Recibe actualizaciones del tema sin que afecten a los cambios que has implementado en el.

Estas creo que son las mayores ventajas, pero como es evidente, todo punto tiene su contrapunto …

Desventajas de los child-temes

Como digo, no todo el monte iba a ser orégano … así que antes de lanzarnos a crear un tema hijo habrá que sopesar como mínimo alguna de estas cosas …

1. Un buen child theme requiere un desarrollador con una visión global de todos los archivos implicados y sus dependencias ya que cargarse el aspecto de una web creando un child theme que, en lugar de mejorar, destroce el sitio es demasiado fácil si no andamos con cuidado. No digamos a la hora de modificar funciones o hooks, ya que puedes terminar sin saber dónde debes colocar el query_posts, por ejemplo.
2. Como un child theme realiza una llamada a otro tema, el superior, que es de donde obtiene la mayoría de su código, esto puede afectar al rendimiento de tu web ralentizándola notablemente en algunos casos.
3. Los frameworks que requieren que hagas un tema hijo por narices a veces tienen tantas funciones y posibilidades que complican demasiado la integración de child themes, pues tienes que hacerte con todas sus peculiaridades especiales antes de abordar el desarrollo de tu plantilla hija.

Puede parecer que los child themes tienen más ventajas que inconvenientes, pero humildemente desde mi «ignorancia» prefiero no usarlos, me parece más sencillo y controlado realizar las modificaciones directamente en el tema, documentándolas bien (esto es imprescindible), y si hay actualizaciones simplemente volver a aplicarlas. Esto se hace fácilmente llevando un pequeño listado de modificaciones realizadas.

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 (es más fácil de lo que parecía…). La hoja de estilos debe empezar con las siguientes líneas:

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://about.me/sapoclay
 Description:  Twenty Fourteen Child Theme
 Author:       Sapo Clay
 Author URI:   http://about.me/sapoclay
 Template:     twentyfourteen
 Version:      1.0.1
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/
@import url("../twentyfourteen/style.css");

/* =Aquí empieza la personalización de tu tema
-------------------------------------------------------------- */

Puedes cambiar cada una de estas líneas para «customizar» tu Theme.

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 tu Child deTheme. 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 ThemeChild). Justo al comienzo, en la primera línea, se debe añadir una etiqueta de apertura de PHP y cualquier 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 sobreescribirá el archivo equivalente en la carpeta del tema padre. Por ejemplo, si quieres cambiar el código PHP para la cabecera (header.php), puedes inlcuir un header.php en la carpeta de tu tema hijo. De este modo, este archivo se usará en lugar del archivo de cabecera del tema padre.

También puedes incluir archivos en el tema hijo que no esté incluido en el tema padre. Por ejemplo, puede que quieras crear una plantilla más específica que se encuentre en 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 al tema padre. En lugar de eso, se carga en añadiéndose al 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. 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 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 carga 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 (). Porque la plantilla style.css padre se sustituye por style.css su tema hijo y su style.css reside en la raíz del subdirectorio de tema su hijo, get_stylesheet_directory () apunta al directorio de su hijo del tema (no el directorio del tema de los padres).

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 directorio de su hijo de tema.

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

Otra información útil

Usando formatos de post

A child theme inherits post formats as defined by the parent theme. But, when creating child themes, be aware that usingadd_theme_support(‘post-formats’) will override the formats as defined by the parent theme, not add to it.

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.