Seguro que estás harto de oír hablar de los temas hijos y nunca nadie te ha contado como usarlos. Un problema que hemos tenido todos en algún momento, ya que se ha centrado durante mucho tiempo todo el esfuerzo en el desarrollo y existe todavía muy poca documentación al respecto.
Hoy vamos a intentar aprender a utilizar un tema hijo. ¿Te apuntas?
¿Qué es un tema hijo?
Como hemos contado en alguna otra ocasión, es un tema que hereda funciones de un tema padre. Es decir, lee toda la información de un tema existente y modifica ciertas acciones.
¿Por qué usamos temas hijos?
Es sobre todo un tema funcional. Utilizar un tema hijo facilita mucho el trabajo porque hace más simples las actualizaciones. Para entenderlo, vamos a poner un ejemplo.
Imaginemos que tenemos el nuevo tema por defecto de WordPress, Twenty Ten, y queremos hacer modificaciones. Twenty Ten es un tema vivo, es decir, que se actualiza cada vez que actualizamos nuestro WordPress, lo que tiene ventajas e inconvenientes. La ventaja principal es que, al ser un tema vivo, está siempre actualizado con los últimos cambios que se hayan realizado en el core (el núcleo de WordPress). La desventaja, que cualquier cambio que hayamos realizado sobre él se perderá en la actualización.
El tema hijo nos resultará útil como un contenedor para nuestros cambios separado del tema principal, de forma que cuando éste se actualice no perdamos nuestros cambios.
No es necesario que padre e hijo se parezcan 
. El tema hijo puede construirse a partir de cualquier tema ya existente. Una vez hecho, tenemos la seguridad de que será compatible con todas las futuras versiones de WordPress. Empresas como la nuestra son capaces de hacerlo sin mucha dificultad. (Consúltanos si estás interesado).
¿Cómo se utiliza un tema hijo?
Crear un tema hijo es más sencillo de lo que parece. Sólo hay que:
- Crear un directorio nuevo en la carpeta wp-content/themes.
- Crear dentro de él un archivo style.css.
- En el style.css, indicar que es un tema hijo y quién es su padre.
Con esto ya tenemos nuestro tema hijo. Fácil, ¿eh? Vamos a seguir los pasos y a hacer unas pequeñas modificaciones para ver su efecto. Lo primero es indicar que el tema es hijo de su padre.
/*
Theme Name: Tema hijo
Theme URI: http://temahijo.com/
Description: Tema hijo de Twenty Ten para WordPress
Author: Mecus
Author URI: http://mecus.es/
Template: twentyten
Version: 0.1.0
*/
Nótese que template tiene que coincidir con el nombre del directorio del tema padre.
Con este código todo lo que escribamos en el style.css sustituirá a lo indicado en el tema padre.
Probando el tema hijo
Para probar que el tema hijo funciona lo más fácil es cambiar algún color, para ver de forma visual qué está ocurriendo. Lo primero que tendremos que hacer es añadir la plantilla del tema padre. Para eso utilizaremos el siguiente código:
@import url('../twentyten/style.css');
Y ahora escribiremos las directivas que queramos modificar. Hay que tener en cuenta aquí, de nuevo, que cualquier cambio sustituirá a las líneas que haya escritas en el tema padre. En nuestro ejemplo modificaremos cómo se muestran los asides (artículos cortos) en Twenty Ten.
Extendiendo el tema hijo
Como hemos visto, un tema hijo necesita únicamente un archivo style.css para funcionar, pero puede utilizar más archivos. El que nos será más útil, sin duda será el functions.php.
El archivo functions.php, a diferencia del archivo style.css, añade funcionalidades al functions.php existente. El sistema utilizará el functions.php de forma automática, por lo que únicamente tendremos que añadir nuestras funciones al archivo.
Sin duda la función más interesante para añadir en nuestro archivo functions.php es el reconocimiento del favicon, del que carece el tema padre.
Para eso, crearemos nuestro archivo functions.php y añadiremos el siguiente código:
<?php
function favicon_link() {
$favicon = get_bloginfo('template_url').'/images/favicon.ico';
echo '<link rel="shortcut icon" type="image/x-icon" href="'.$favicon.'" />' . "\n";
}
add_action('wp_head', 'favicon_link');
?>
En nuestro caso hemos alojado el favicon en el directorio /images/ del tema, por lo que lo buscaremos ahí.
Extendiendo (aún más) el tema hijo
¿Eres de los que quieres control total? ¡Estupendo! Sólo tienes que crearte tus propias páginas en el directorio de tu tema hijo y éstas sustituirán a las páginas originales del tema padre. Puedes modificar hasta el index.php y crear páginas que no existan en el tema padre (como tag.php para las etiquetas, caso de que no existiera).
Ya tienes las claves. Ahora toca experimentar 
Para desarrolladores
Recordad el uso de add_action y add_filter en vuestros temas hijos. Twenty Ten tiene 150 filtros y 60 acciones, así que ¡úsalas!
** Información extraída del archivo Child Themes del Codex de WordPress – Autor: Demetris.
el 1 de julio de 2010 a las 8:14
No consigo que me salga el favicon… He sustituido “template_url” en functions.php por mi url y he metido el favicon.ico dentro de la carpeta /images (supongo que la carpeta /images del tema padre? o del tema hijo? de cualquiera de las dos formas no me aparece… ¿Puede ser por algo de permisos?
el 9 de julio de 2010 a las 9:05
Ya me ha salido! Qué tonta! había sustituido “template_url” por mi url pero no había que hacer eso! jeje.
el 16 de agosto de 2010 a las 10:36
[...] Lo descubrí trabajando con mis grandísimos amigos de Mecus. En una de las entradas de su web, explican a la perfección el funcionamiento y las tremendas ventajas de trabajar de esta manera cuando diseñamos para [...]
el 23 de septiembre de 2010 a las 5:04
Como tutorial introductorio genial! He seguido vuestros pasos y ya tengo un tema hijo sobre el que experimentar, a veces cuesta encontrar tutoriales en castellano sobre estos temas. Hasta me ha servido el comentario de Lidia sobre el favicon porque me pasaba lo mismo… ^^
el 1 de noviembre de 2010 a las 11:45
Excelente información por más que buscaba no había dado con ella, ahora solo queda experimentar como has dicho, saludos!
el 18 de noviembre de 2010 a las 5:37
Creo que lo del favicon ya no funciona. Hace algún tiempo lo conseguí, pero ahora estoy haciéndolo y no me funciona. La ruta de las imágenes en la que busca es la del tema padre. A mí me ha funcionando de la siguiente forma:
function childtheme_favicon() { ?>
<link rel="shortcut icon" href="/images/favicon.ico”>
<?php }
add_action('wp_head', 'childtheme_favicon');
Ha cambiado algo o estoy haciendo yo algo mal? Como os digo, hace tiempo recuerdo que sí me funcionó…
el 23 de noviembre de 2010 a las 8:01
Buenas. El problema aquí es que estás utilizando una ruta incompleta.
Tienes que utilizar:
<link rel="shortcut icon" href="<?php bloginfo(‘stylesheet_directory’); ?>/images/favicon.ico”>
el 23 de noviembre de 2010 a las 5:42
Sí, me di cuenta. Sustituí lo que ponéis de:
$favicon = get_bloginfo(‘template_url’).’/images/favicon.ico’;
por:
$favicon = get_bloginfo(‘stylesheet_directory’).’/images/favicon.ico’;
Lo que me extraña es que hace tiempo sí que me funcionó así, supongo que metería el favicon en la carpeta images del twentyten en vez de en el tema hijo!
Ya voy entendiendo bien cómo se hace! Gracias!
el 23 de noviembre de 2010 a las 7:08
La cosa es que antes se podían utilizar indistintamente, y desde 3.0 hay que utilizar stylesheet_directory, que además sería el más correcto.
Me apunto actualizar el artículo.
Un saludo
el 25 de mayo de 2011 a las 12:43
Tengo problemas al crear temas hijo. Una vez hechos todos los pasos del tutorial, en la sección de gestión de temas de WP no sale el tema hijo. En su lugar tengo una nota que me comenta:
Temes estropeados:
Los temas siguientes estan instalados pero estan incompletos. Los temas deben tener, como mínimo, una hoja de estilos y una plantilla.
El tema padre no existe.
Alguien sabria decirme la razón de este error i como proceder para solucionarlo?
Muchas gracias
lluc
el 27 de mayo de 2011 a las 10:54
Buenas. Pásate por los foros de WordPress en Español y te ayudamos ahí
http://es.forums.wordpress.org
el 6 de octubre de 2011 a las 8:04
[...] que es complicado modificarlo? Es mucho más sencillo de lo que crees. Puedes ver los pasos a dar para crear temas hijos en este tutorial y una guía para cambiar la [...]
el 14 de octubre de 2011 a las 10:28
[...] Creando temas hijos. [...]