Qué es y cómo implementar un child theme en WordPress

Un Child Theme es una especie de «tema falso» o «extensión de otro tema» (eso de tema hijo no suena pa’ na en castellano) que te permite realizar modificaciones en el tema «base» (digo base porque eso de padre tampoco suena pa’ na en castellano y se usa más en las iglesias 😀 ), que tiene como gracia que si se actualiza el tema «base» (parent), no pierdes tus cambios, y así se evita modificar el tema original.

Cosas que hay que tener MUY claras:

  1. Las hojas de estilo se REEMPLAZAN por las del child-theme
  2. El archivo functions.php «extiende» el functions.php del tema base, no lo reemplaza.
  3. Cualquier archivo de plantilla que agregues en la carpeta del child-theme REEMPLAZA  al archivo que existe en la carpeta del tema parent.

Manos a la obra: en este caso utilizaré el tema por defecto en WordPress 4.2.2 que es el Twenty Fifteen primer tema digno a mi gusto creado por «el equipo WordPress»

Estructura y configuración del child-theme

Básicamente es la misma estructura de un tema completo (incluyendo obligatoriamente sólo el archivo style.css y el functions.php), al que debemos indicarle que se trata de un child-theme, esto lo hacemos en el archivo style.css agregando la siguiente línea en los comentarios que definen el tema:

Template: twentyfifteen

Por lo tanto, debemos crear una carpeta con el nombre de tu child-theme en wp-content/themes/ que contenga los siguientes archivos:

  • style.css
  • functions.php

El archivos style.css debe contener los comentarios que requiere WordPress para «identificar» tu tema y así poder verlo en el menú apariencia de tu administrador para ser activado posteriormente.

En mi caso, mi archivo style.css quedó de la siguiente manera:

/*
 Theme Name:   Manuel Briones C. Blog
 Theme URI:    http://www.manuelbriones.cl
 Description:  Blog basado en twentyfifteen
 Author:       Manuel Briones Cortes
 Author URI:   http://www.manuelbriones.cl
 Template:     twentyfifteen
 Version:      1.0
 Text Domain:  mbrionesc-child
*/

Como indiqué anteriormente, el archivo style.css reemplaza el archivo style.css del tema original, es decir, no carga el original y por ende ninguno de los estilos originales del template; para «solucionar» esto puedes hacer varias cosas:

  • Copiar los estilos del style.css original en tu «nuevo» style.css
  • Usar una regla @import de css para cargar el css del tema parent
  • Cargar el style.css del tema original vía functions.php (esta es la manera recomendada por WordPress)

Para hacerlo de la manera «recomendada», edita tu archivo functions.php (que ahora está en blanco) y agrega lo siguiente:

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

}

Con esto WordPress automáticamente cargará el estilo del tema parent dentro del tag head del sitio web.

Una vez hechos todos estos cambios, ya puedes activar el child-theme a través del menú Apariencia del Administrador de WordPress y realizar todas las modificaciones que quieras tanto en el style.css, functions.php o en cualquier archivo de plantilla, los cuales serán totalmente reemplazados por los que agregues en tu child-theme.

Publicado por

mbrionesc

Desarrollador por esencia, creador de aplicaciones y soluciones basadas "en la nube", luego de años trabajando para terceros tras bambalinas, trabajo mis ideas y proyectos a través de BPL.cl