¬ŅC√≥mo crear un tema hijo en WordPress?

Si utilizas wordpress como CMS estarás familiarizado con la creación de temas hijo, también denominados child themes. Si no has instalado nunca un wordpress o no conoces cómo funciona este gestor de contenidos, seguramente esta información te sonará a chino, pues se trata de algo bastante específico a la hora de montar una web con WordPress.

¬ŅPor qu√© crear un tema hijo o theme child en WordPress?

Básicamente porque podrás realizar personalizaciones en estructura o estilo sin que se pierdan los cambios tras una actualización del tema padre.

Pasos para crear un tema child en Worpdress

1. A trav√©s del ftp de la web, crea una carpeta dentro de wp-content/themes que se llame exactamente igual que el tema padre a√Īadiendo -child o -hijo (recomendaci√≥n de WordPress). Por ejemplo, si tu tema se llama ¬ętwentyfifteen¬Ľ la carpeta deber√° llamarse ¬ętwentyfifteen-child¬Ľ

2. Ahora, crea e incluye en la carpeta un archivo css: ¬ęstyle.css¬Ľ que contendr√° los cambios de la hoja de estilo. Es el √ļnico requisito para crear tu tema hijo.

Puedes copiar y pegar la cabecera del style.css del tema padre y cambiar lo que quieras (Theme Name, Author, …). Los √ļnicos requisitos son:

Incluir en la l√≠nea: Template, el nombre del tema padre (si no lo haces, te aparecer√° como tema da√Īado). En el caso del ejemplo, el c√≥digo a a√Īadir ser√≠a:

—————————————————-

/*

Template: twentyfifteen
*/

—————————————————-

Adem√°s de la cabecera, lo que debe llevar este archivo de manera impepinable es la ruta donde se encuentra la hoja de estilos del tema padre, tal que as√≠:¬†@import url(¬ę../nombredeltemapadre.style.css)

siguiendo con el ejemplo quedaría:

—————————————————-

@import url(¬ę../twentyfifteen/style.css¬Ľ);

—————————————————-

Código cabecera Style CSS en tema hijo WordPress

3. Una vez hecho esto, ya se puede activar el tema hijo en wordpress desde APARIENCIA > TEMAS

Ahora todos los cambios que quieras hacer en el css, los podr√°s a√Īadir en este archivo creado, sin miedo a que se eliminen cuando el tema padre se actualice.

Cambios en arhivos php

Si además de tocar los estilos, quieres hacer cambios en otros archivos, como el header.php o el footer.php, simplemente copia el archivo a la carpeta del template-child y modifícalo. Este fichero sobreescribirá al que se encuentre en el tema padre.

El √ļnico requisito es que se siga la estructura de carpetas donde se encuentre el archivo origen. Por ejemplo, si tenemos el archivo en el temapadre/includes/functions, en el tema hijo deber√°s crear las mismas carpetas e incluir ah√≠ el archivo.

A√Īadidos en functions.php

Si además quieres modificar el código de functions.php, crea un nuevo archivo con este nombre. A diferencia del resto de archivos php hay que partir de un archivo en blanco con las etiquetas PHP de inicio y cierre. Primero se cargará el código que pongas en él y luego el archivo origen. Debido a que no lo sobreescribe, como ocurre en el resto de casos, no copies el archivo functions.php desde el tema padre.

Poniendo el ejemplo que aparece en Codex, si se quiere a√Īadir un favicon, el c√≥digo del archivo ser√≠a algo como:

—————————————————-

<?php //Etiqueta PHP de inicio, sin ning√ļn tipo de espacio antes de esta l√≠nea

// Funcion que queramos a√Īadir
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
—————————————————-

Si queremos modificar una función que ya existe, lo que se debe hacer es incluir el condicional dentro del PHP para sustituirla. El código a incluir sería:

—————————————————-
if ( ! function_exists( ‘tema-padre’ ) ) {
function tema-padre() {
// Nueva función modificada.
}
}
—————————————————-

Para más información relativa a la creación de temas hijo, entra en la página oficial de Codex de WordPress.

Deja un comentario