| Suscribir mediante RSS

Cómo crear Child Themes en WordPress

20 octubre 2011 Diseño web

Child themesEn WordPress un Child Theme (tema hijo) es aquel que hereda las características de otro theme llamado parent theme (tema padre). Cuando WordPress detecta que un theme dispone de un tema hijo utiliza los archivos de éste en vez de los del tema padre. Esto permite hacer modificaciones o añadir nuevo código en el tema hijo sin alterar el tema padre original.

De esta forma se puede actualizar un theme sin correr el riesgo de perder las modificaciones que hayamos realizado al sobreescribir los archivos. Usar temas hijos es la manera recomendada de hacer modificaciones en un theme.

Para realizar un tema hijo creamos un directorio en el directorio themes, con el nombre que querramos, como si de otro theme se tratase y añadimos un archivo style.css válido. El contenido del archivo style.css del tema hijo debe ser el siguiente:

/*
Theme Name: Mi Theme Child
Theme URI: http: //ejemplo.com/
Description: Tema hijo de Mi Theme 
Author: Tu nombre
Author URI: http: //ejemplo.com/acercade/
Template: temapadre
Version: 0.1.0
*/

Lo único diferente a un style.css habitual es la existencia de la línea Template: temapadre. En este caso indica a WordPress que es un tema hijo de temapadre, que es la carpeta o directorio del tema padre. Lógicamente debes sustituirlo por el nombre del directorio de tu theme. Sólo es necesario este archivo para crear un tema hijo aunque lo habitual es poder ampliar las posibilidades del tema padre con otros archivos.

Las demás líneas del archivo style.css son opcionales, sólo son obligatorias Theme Name y Template

El nombre del directorio después de Template: es sensible a minúsculas y mayúsculas, es decir debe escribirse tal como figura el directorio.

Hay que tener en cuenta que el archivo style.css del tema hijo “sobreescribe” el style.css del tema padre. Si quieres conservar los mismos estilos que el tema padre tienes dos opciones:
1 – Usar una copia del style.css del tema padre, recordando que tienes que añadir la línea Template: temapadre
2 – Usar la regla @import para cargar la hoja de estilos del tema padre, tal como sigue:

/*
Theme Name: Mi Theme Child
Template: temapadre
Version: 0.1.0
*/

@import url("../temapadre/style.css");

A partir de esta línea puedes poner tus propios estilos para el tema hijo.

Después de las últimas actualizaciones de WordPress, esta forma de añadir los estilos del Tema padre con @import ha dejado de ser la mejor práctica porque incrementaba la cantidad de tiempo que se destinaba a cargar los estilos. El método correcto es usando wp_enqueue_scripts y wp_enqueue_style en el archivo functions.php del tema hijo. Tal como se indica a continuación.

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

El resto de archivos tienen un funcionamiento diferente a style.css. Si no existe algún archivo en el tema hijo WordPress usará el archivo correspondiente en el tema padre. Ejemplo, si el tema hijo no posee un archivo llamado category.php WordPress utilizará el archivo category.php del tema padre. Esto significa que cada vez que modifiques un archivo debes guardarlo en el directorio del tema hijo si quieres que se utilice en su lugar.

Para el archivo functions.php del tema hijo debes tener en cuenta un par de detalles. Puesto que tienen preferencia los archivos del tema hijo sobre los del tema padre las funciones que uses debes tenerlas en el archivo functions.php del tema hijo, de esta manera no perderás los cambios cuando actualices el theme. Así mismo puedes “reescribir” con tu propio código las funciones del tema padre declarándolas otra vez en el archivo functions.php del tema hijo. Especial cuidado con reescribir funciones del tipo add_theme_support('post-formats') declaradas en el tema padre.

Por último, cuando incluyas archivos desde functions.php del tema hijo, necesitarás usar STYLESHEETPATH en vez de TEMPLATEPATH.

Ejemplo,
require_once( STYLESHEETPATH . '/trayecto/al/archivo/en/tema/hijo.php' );

Fuente: Codex WordPress

Otros artículos de Diseño web

Cómo mantener WordPress seguro
Entradas “pegajosas” Sticky Post
WordPress para Joomla
Formatos de Video para la Web
Guia de WordPress