En algún proyecto realizado en Wordpress en el que partíamos de un tema ya diseñado nos hemos visto en la necesidad de modificar los estilos para adaptarlo a las necesidades de nuestro proyecto. Esto no ha resultado un problema, ya que si conoces un poco de CSS y PHP puedes modificarlo sin mucho trabajo.

El problema viene realmente cuando el tema que hemos utilizado inicialmente nos avisa que tiene una actualización. En este momento si le damos a actualizar perdemos todos los cambios que hemos realizado para adaptarlo a nuestras necesidades.

Para solucionar este problema Wordpress te da la opción de crear lo que se traduce como temas hijos. Estos temas hijos son aquellos que realizamos partiendo de un tema ya construido y que modificamos para luego convertirlo en un tema nuevo hijo del principal.

Cómo crear el tema hijo

Lo primero que tenemos que hacer es crear una carpeta dentro de wp-content/themes/ Por ejemplo si tenemos el theme padre “twenty-eleven”, crearemos una carpeta llamada “twenty-eleven-child”.

A continuación vamos a crear un archivo .css con el nombre de style.css y dentro del mismo colocaremos de forma obligada las siguientes lineas:

/*
 Theme Name:   Twenty Eleven Child
 Theme URI:    http://example.com/twenty-eleven-child/
 Description:  Tema hijo de Twenty Eleven
 Author:       Sara Alvarez
 Author URI:   http://borsaweb.es
 Template:     twentyeleven
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-eleven-child
*/
@import url("../twenty-eleven/style.css");


/* Aquí comienzan tus estilos personales */

El campo que es obligado cambiar es el Theme Name, para que luego en la zona de administración de Wordpress te aparezca tu nuevo tema hijo creado listo para seleccionar.

Theme Uri → nos pide la ruta de nuestra carpeta creada para el tema hijo
Description → Una breve descripción del tema creado
Author → El autor del tema hijo
Author Uri → url del autor
template → nombre de la carpeta donde se encuentra el tema padre
Version → Versión de nuestro tema hijo
Tags → etiquetas para búsquedas, etc
Text Domain → nombre de la carpeta creada para el tema hijo
@import → Nos permite importar los estilos del tema padre, aunque ahora veremos que es mejor hacerlo de otra forma.

La forma optima de importar los estilos del tema padre es a través del archivo functions.php que deberemos crear en la carpeta del tema hijo. En este archivo utilizaremos la función wp_encueue_style().

Haciendo esto conseguimos que los estilos del tema padre estén esperando en cola y solo se utilicen en caso de ser necesarios.

El código de functions.php sería algo así:

<?php
wp_encueue_style('style.css',”http://mi-sitio.com/wp-content/theme/twenty-eleven/style.css”);

Más opciones

Puedes cambiar más archivos de la plantilla padre. Para ello tan solo tienes que crear los archivos en la carpeta del tema hijo, por ejemplo, si queremos editar la cabecera de la plantilla, tendremos que crear el archivo header.php. Con esto sobrescribiremos el archivo equivalente de la plantilla padre.

También puedes crear archivos que no estén el tema padre, por ejemplo si queremos crear una plantilla para un sidebar especial que el padre no tiene, tan sólo tendríamos que crear un archivo sidebar-especial.php.

El cómo Wordpress decide cuando utilizar ese archivo lo veremos en otro artículo.

Algo importante que debemos saber es que el archivo functions.php no se sobre-inscribible, es decir, que tanto el functions.php del padre como el del hijo están funcionando simultaneamente. Además debes saber que se cargará antes el functions.php del tema hijo por lo que si quieres modificar alguna función del tema padre puedes hacer algo como esto:

if(!function_exists('theme_nav')){
	function theme_nav(){
		// hace lo que sea
	}
}

Multi-idioma

Al igual que la mayoría de los temas, tu tema hijo puedes prepararlo para ser traducido a otros idiomas.

Para ello puedes ver https://codex.wordpress.org/I18n_for_WordPress_Developers y profundizar en el tema, pero nosotros te mostramos los pasos básicos para dejarlo listo.

Lo primero es crear la carpeta de lenguajes. Para ello crearas una carpeta llamada languages dentro de tu carpeta de tema hijo. Dentro de esta carpeta meteremos los archivos de idiomas tales como en_EN.po o en_EN.mo dependiendo del lenguaje.

Lo siguiente es cargar el textdomain, para ello utilizamos la función load_child_theme_textdomain() dentro de functions.php. El código sería algo como esto:

/**
 * Setup textdomain de mi tema hijo.
 *
 * Declare textdomain for this child theme.
 * Translations can be filed in the /languages/ directory.
 */
function my_child_theme_setup() {
        load_child_theme_textdomain( 'twenty-eleven-child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );

Con esto esta todo listo para poder utilizar las traducciones en el tema con la función _e() que supongo que todos conocemos.

Con lo que hemos visto hasta ahora puedes crear tu tema hijo sin ningún tipo de problema y sin miedo a perder todo el trabajo realizado cada vez que el tema padre se actualice.