Como crear un Child Theme en WordPress

Los temas de WordPress pueden ser sorprendentes pero la gran mayoría de las veces existen muchas cosas pequeñas que queremos cambiar. Colores, tamaños de letra o tal vez un botón diferente.

El problema es que modificar un tema incluso de forma mínima hace que no puedas actualizarlo a una nueva versión, porque si lo intentarás, perderías todos tus cambios.

Los Child Themes pueden solucionar esto al permitirte usar todas las funciones de tu tema y actualizarlo sin perder los cambios que les hagas.

Como funciona un Child Theme y por que usarlos

Los child themes son temas separados que dependen de un tema padre para funcionar. Si estás usando un child theme, WordPress revisará primero tu child theme para ver si una funcionalidad específica existe. Si no existe, utilizará la del tema padre. Esto es fantástico porque te permite modificar solamente lo que necesitas.

Siempre debes de usar un child theme cuando planeas cambiar aunque sea una sola letra de tu tema. Hay dos razones importantes: actualizaciones y organización.

Actualizaciones

Si modificas un tema sin utilizar un child theme tienes dos opciones:

• Puedes elegir no actualizar tu tema en el futuro,
• o puedes actualizar y perder todos tus cambios.

La última opción técnicamente funcionaría, pero no es recomendada. Incluso si tus cambios son fáciles de copiar y pegar ¿Por qué pasar dos minutos en una tarea que puede ser causante de muchos errores y que no deberías de hacer?

No actualizar tu tema NO debe de ser una opción. La principal razón de porque los sitios web tiene problemas es el hecho de tener software desactualizado. Siempre debes de mantener WordPress, tus temas y tus plugins actualizados, sin excepción.

Organización

Cuando añades código a un tema existente lo estás añadiendo a una base de código, que puede contener miles y miles de líneas. Los desarrolladores que están trabajando en tu sitio (y tu también) tendrán muchas dificultades encontrando tus cambios. Al menos un resultado directo de esto será mayor número de horas de desarrollo.

Debido a que los child themes funcionan basándose en los temas padres, tu child theme es esencialmente un control de cambios del tema existente. Esto puede lograr muchos cambios incluso cuando el child theme tiene solo unos cuantos archivos y menos de 100 líneas de código.

Crear un Child Theme

Crear un child theme es muy simple, tanto que incluso puedes copiar y pegar el código de abajo.

Para crear un child theme para tu tema, deberás seguir los siguientes pasos:

• Crea el directorio de un tema en tu instalación de WordPress.
• Crea una hoja de estilos con información sobre tu child theme.
• Agrega los estilos de tu tema padre.

Una vez que hayas hecho lo anterior puedes activar tu child theme y tu sitio web se verá exactamente igual que antes, pero estará usando un child theme.

Entonces, vamos a ver los pasos anteriores en detalle. Para este ejemplo, estaremos creando un child theme para el tema por defecto Twenty Sixteen.

1. Primero, ve al directorio de tus temas y crea una carpeta para tu tema nueva. Puedes darle el nombre que quieras, pero para mantener claridad te sugiero que sea el nombre de tu tema y el sufijo -child. En este caso el child theme se llamará twentysixteen-child.
2. El siguiente paso es crear una hoja de estilos. Este archivo debe de llamarse styles.css. Copia y pega el siguiente código en el archivo que acabas de crear.

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://tusitioweb.com/twentyfourteen-child/
Description: Mi primer Child Theme, basado en Twenty Sixteen
Author: Jorge Castro
Author URI: http://jorgecastro.mx
Template: twentysixteen
Version: 1.0.0
Text Domain: twenty-sixteen-child
*/

Los dos elementos necesarios del código de arriba son las líneas que empiezan con “Theme Name"y “Template.” El theme name le dice a WordPress cual es el nombre del tema y este se muestra en el selector de temas. El template le dice a WordPress que tema debe de considerar como tema padre. Las demás etiquetas son relativamente simples de entender con la excepción del text-domain. El text domain es utilizado para las traducciones. Este debe de ser único para tu tema y lo debes de usar siempre que tengas una cadena que quieras traducir. Ve I18n para Desarrolladores de WordPress para más información.

3. En este punto tu child theme debe de trabajar bien. Si lo activas y recargas la página todo tu contenido estará ahí, pero no tendrá ningún estilo. Antes mencionamos que WordPress primero busca la funcionalidad en el child theme y si no está presente va al tema padre.

En este caso tenemos una hoja de estilo, por lo que WordPress decide no buscar la hoja de estilo del tema padre. Para asegurarnos cargar esa hoja de estilo deberemos agregarla. Esto lo podemos hacer en el archivo functions.php , por lo tanto, hay que crearlo. En este archivo copia y pega este código:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Si no tienes idea de PHP y solo quieres cambiar algunos estilos, no te preocupes por como funciona esto. Ve a tu hoja de estilo y comienza con ellos.

Mecánica de un Child Theme

Entonces ¿Cómo funciona un Child Theme? Los child themes funcionan a nivel de archivo. Cuando un archivo es usado por un proceso, WordPress revisa el child theme para ver si lo encuentro. Si lo logra, el contenido de ese archivo es usado. Si no, se utiliza el mismo archivo en el tema padre.

Hay una excepción a esta regla, los archivos functions.php  del tema padre e hijo se cargan.

El flujo de trabajo para modificar la funcionalidad es la siguiente. Si quieres hacer cambios al header, copia y pega el archivo header.php del tema padre en tu child theme. Edita el archivo hasta lograr lo que quieres, guarda y ve los frutos de tu trabajo.

Algunas notas para los desarrolladores de temas

Si tu haces tus propios temas hay algunas guías que querrás seguir para hacer de la creación de un child theme algo más fácil. Las dos más importantes son:

1. Aprender la diferencia entre get_stylesheet_directory() y get_template_directory().
2. Crear funciones modificables.

El directorio correcto

Cuando vinculas elementos usando las funciones mencionadas siempre debes de cuidar que la familia de funciones de get_template_ siempre apuntarán al directorio del tema padre. Mientras que la familia de funciones get_stylesheet_ family of apuntarán al directorio del tema hijo.

<a href="http://twitter.com/jorgecastro91"><img src="<?php echo get_template_directory_uri() ?>/images/twitter.png" alt='Twitter Logo'>Follow Me</a>
<a href="http://github.com/jcastro91"><img src="<?php echo get_stylesheet_directory_uri() ?>/images/github.png" alt='Github Logo'>On Github</a>

En el ejemplo de arriba el primer link toma su imagen del tema padre, el segundo del tema hijo. No hay una respuesta correcta sobre cual deberías de usar, tu decides.

La ventaja de utilizar get_stylesheet_directory_uri() hs que los desarrolladores del child theme pueden utilizar su propia imagen simplemente creándola en el lugar correcto. Al mismo tiempo, si la imagen no existe en el child theme no se mostrará.

La razón de esto es que si un child theme esta activo la función get_stylesheet_directory_uri() no revisa (y no sabe) que archivo estás intentando cargar por lo que no revisará si existe, siempre regresará la URI del child theme.

Funciones modificables

El otro método que debes de usar es lo que WordPress llama como funciones modificables. Esto hace posible que los autores de child themes puedan sobreescribir las funciones que definas en el tema padre. Esto involucra encerrar tus funciones en la función function_exists().

Digamos que has creado una función llamada my_meta() . No hay manera de que un child theme pueda modificar esta función porque no puede estar definida dos veces. La solución es solo crear está función si no se ha definido (recuerda, el functions.php del child theme se carga primero):

<?php
if ( !function_exists( 'my_meta' ) ) {
 function my_meta() {
  // code for postmeta here
 }
}

Fuente: WPMUDEV