Como crear un tema hijo en WordPress

child theme wordpress

Ya hace tiempo que hablamos de los temas hijos o «child themes«, incluso debatimos algo sobre sus ventajas o inconvenientes, pero creo que faltaba una guía sencilla y rápida de cómo crear un tema hijo.

Así que vamos a ello, es más fácil de lo que piensas … 

1. Lo básico

Lo primero es crear una carpeta dentro de /wp-content/themes/ como si otro tema fuera. Puedes elegir el nombre que quieras aunque parecería lógica alguna referencia sobre qué es, por ejemplo:
carpetas tema hijo wordpress

Una vez creada la carpeta simplemente crea la hoja de estilos, es decir, un fichero style.css dentro. Si lo prefieres, para ahorrarte tecleo, copia la cabecera de la hoja de estilos del tema principal, del padre. En cualquier caso la estructura básica sería esta:

/*
Theme Name: MyProduct Hijo
Theme URI: http://semanticae.es
Version: 4.0
Description: Tema hijo de MyProduct para hacer cambios sin riesgo
Author: Semanticae
Author URI: http://semanticae.es
Template: MyProduct
*/

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

/*----------------- Empieza a añadir cambios aquí abajo -------------------------------*/

Las líneas importantes son estas:

  • Theme name: lógicamente diferente del nombre del tema padre, pero pon el que quieras.
  • Template: aquí no hay improvisación posible, debe ser el nombre de la carpeta del tema padre. Si la carpeta se llama wordpress-style-theme eso es lo que debes poner, sin cambio alguno o no funcionará.
  • @import url(xxxx): Usando la estructura del ejemplo, aquí es donde le decimos al tema hijo de donde heredar la hoja de estilos original, de modo que al activarlo funcione todo.

La magia empieza a partir de la última línea, pues una vez activemos el tema hijo ya podemos personalizarlo para obtener el mismo diseño del tema original (padre) pero con las modificaciones que hagamos en el tema hijo, que no se verán afectadas por actualizaciones del tema original, que es una de las principales virtudes de los temas hijo.

Así que ya solo con esto podemos activar el tema hijo, igual que cualquier otro tema. Nuestra web no notará cambio alguno pues de momento no hemos introducido modificación alguna, lo único que hace es importar archivos (Template: MyProduct) y hoja de estilos (@import url("../MyProduct/style.css");) del tema padre.

tema hijo activo

2. Añadiendo estilos

A partir de este momento el tema hijo activo hereda el CSS de la hoja de estilos original, salvo que añadamos clases personalizadas, en cuyo caso tomará primero las del tema hijo, aplicando el resto de la hoja de estilos del tema padre, así de simple.

De este modo, si modificamos la hoja de estilos del tema hijo añadiendo algo así … 

/*
Theme Name: MyProduct Hijo
Theme URI: http://semanticae.es
Version: 4.0
Description: Tema hijo de MyProduct para hacer cambios sin riesgo
Author: Semanticae
Author URI: http://semanticae.es
Template: MyProduct
*/

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

/*----------------- Empieza a añadir cambios aquí abajo -------------------------------*/

a { text-decoration: none; color: #5f5f5f; }
a:hover { text-decoration: underline; }

… estaremos añadiendo estilos personalizados a los enlaces, y el resto de estilos los aplicará del tema padre.

3. Añadiendo plantillas

Lo siguiente que podemos hacer es personalizar los ficheros del tema o incluso añadir nuevos, me refiero a «los php«, y el proceso es igual de sencillo.

Si, por ejemplo, queremos personalizar el pié de página simplemente copiamos el fichero footer.php original del tema padre a la carpeta de nuestro tema hijo y hacemos las modificaciones en el tema hijo. Una vez guardemos los cambios el resultado se verá de inmediato para esa plantilla concreta, permaneciendo inalterable el resto del aspecto de la web.
copia en tema hijo wordpress de plantilla php

Es importante tener en cuenta aquí que debes seguir la estructura de carpetas del tema padre. O sea, que si el fichero blog-style.php (por ejemplo) del tema padre está en /tema-padre/includes/blog-style.php en el tema hijo debe seguir la misma estructura /tema-hijo/includes/blog-style.php. Por lo demás, de puro fácil casi asusta.
plantilla copiada a tema hijo wordpress

Puedes, como he apuntado antes, añadir nuevas plantillas específicas, de página o lo que sea.

4. Funciones

Un tema hijo básicamente funciona así:

  1. WordPress revisa el tema activo (el tema hijo) y carga los archivos del tema padre (Template: MyProduct)
  2. WordPress a continuación carga la hoja de estilos importada (@import url("../MyProduct/style.css");)
  3. Carga primero las modificaciones en la hoja de estilos del tema hijo y ficheros modificados en el tema hijo, y completa lo que le falta con la hoja de estilos y archivos originales del archivo padre, en ese orden.
  4. Carga el archivo de funciones (functions.php) del tema hijo y luego carga el fichero de funciones original o padre.

La sutil diferencia es que WordPress prioriza el archivo functions.php del tema hijo sobre el del tema original, o padre, pero no lo sobreescribe sino que solo tendrá en cuenta las modificaciones (funciones añadidas) del tema hijo, no sobreescribe – por decirlo de algún modo – el original.

O sea, a efectos prácticos, que no tienes que copiar entero el fichero functions.php del tema padre sino solo crear uno vacío (por supuesto con la apertura PHP) y poner ahí las funciones específicas que quieras añadir como personalizaciones que, por supuesto, no quieras perder con las actualizaciones del tema.

Un ejemplo muy típico sería añadir un favicon. Si solo añades esta personalización el fichero sería algo tan básico como esto:

<?php
// Favicon
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

Y ya está, a partir de aquí es cosa tuya añadir las personalizaciones que quieras hacer, que no se perderán con las actualizaciones del tema padre salvo que este cambie sustancialmente su estructura de archivos claro, que puede pasar aunque no es habitual.

Fuente: Codex

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(75 votos, promedio: 4.7)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

36 comentarios en “Como crear un tema hijo en WordPress”

  1. CicloTraveling

    Excelente artículo. Así da gusto. Después de los sudores fríos que le entran a uno cuando empieza a meterse en el mundo de WordPress y le comentan lo de los temas hijos… qué fácil hubiera sido de haber leído este artículo antes.

  2. Gracias, no te creas, a mi también me daba algo de temblores pero en realidad es más fácil de lo que a priori pueda parecer.

    También quizás por eso he esperado bastante tiempo hasta poder tener yo mismo seguridad en el asunto y hacer mis experimentos con varios temas (el de las capturas es de Elegant Themes, que es de los raritos, y funciona genial).

  3. Xavier Ocampos

    Como siempre, excelente tutorial. Crear un theme en condiciones es una labor que no siempre esta debidamente valorada, es una labor que lleva tiempo y dedicación, sobre todo cuando el theme tiene funciones extra a child themes y todo funciona siempre a la perfección, sin miedo a que un plugin o una actualización del core lo eche a perder.

    Lamento no tener más tiempo para dedicarle a mis trabajos pues en una empresa se trabaja con tiempos marcados y se deben respetar, pero en trabajos personales que hago por simple superación personal le dedico todo el tiempo que sea necesario para que sea tan perfecto como sea posible, y de esto tengo mucho que agradecerte a ti y a quienes forman parte de ayudawordpress pues gracias a ustedes he podido crecer como profesional.

    1. Pues ahora me llevo todas las culpas, desafortunadamente AyudaWP lo llevo solo hace años, con estupendas colaboraciones eventuales que agradezco sobremanera.

      Un abrazo Xavier 🙂

  4. Alejandro Gálvez

    Lo idóneo es que el tema padre esté desarrollado pensando en posibles temas hijos. De otra forma sustituir funciones del padre, o incluso clases, no será posible. Para los que se aventuran en el desarrollo de temas tened en cuenta las siguientes líneas:

    if ( ! function_exists( ‘NOMBRE_DE_LA_FUNCION’ ) ) {

    function NOMBRE_DE_LA_FUNCION() {
    }

    }

    Utilizar ese esquema para las funciones de ámbito global ahorrará muchos problemas a los usuarios de vuestros temas. El uso de require_once() en lugar de require() también es necesario. El objetivo es que nunca se repitan dos funciones o clases con el mismo nombre, lo cual provoca errores fatales.

    Para los más aventurados en el campo del desarrollo aconsejarles la implementación de hooks para ofrecer mayor personalización e intervención sin tener que modificar o sustituir el código principal:

    http://codex.wordpress.org/Function_Reference/do_action
    http://codex.wordpress.org/Function_Reference/apply_filters

  5. Alejandro Gálvez

    Fernando, publiqué un comentario aquí y al parecer se quedó en cola de moderación por contener enlaces (referencias al codex y php.net) o eso creo. Pero ahora no hay ni rastro, me da a mi que ha desaparecido.

    Empiezo a pensar que algun plugin que tienes me trata como un bot, ni si quiera puedo registrarme para comentar en el foro, nunca llega el email con la contraseña 😉

    Ojalá puedas aclararme ese par de cuestiones, tengo ganas de participar. Un saludo.

  6. identigrafica

    Hola Fernando, ¿hay algo similar que se pueda hacer para los plugins? Me refiero a que podamos hacer algunos cambios o personalizaciones y no se pierdan al actualizar, ahora que WordPress nos ofrece las actualizaciones automáticas, eso sería muy bueno poder preveer para no perder las personalizaciones. Saludos y felicidades.

  7. Gracias Fernando, ya tiempo llevaba tratando de animarme. Lo he hecho y con un tema de elegant themes «Chameleon»… funciona perfecto, pero lo único que no puedo hacer es un archivo functions.php… aunque lo haga vacio con apertura y cierre php, en vista previa aparece en blanco. De manera que no me atrevo a activarlo.

    Alguna idea ! Gracias de antemano.

  8. Hola, yo también he intentado hacer con uno de eleganthemes un duplicado de la página blog-page.php pero al cambiar el nombre del archivo no me aparecen las funciones ET page template setings, es decir elegir si quiero que sea full width Blog style y elegir las categorias a mostrar… Supongo que se debe aplicar algo de código por alguna parte pero ando buscando y no encuentro nada… Alguna ayuda??? Muchas gracias!

  9. Buenos días

    Yo tengo dudas, soy muuuy novata en esto y por mas q leo, tengo una duda.

    La estructura de @import url(«../MyProduct/style.css»); de donde lo sacamos, ya q estoy trabajando en local y no se q poner, le pongo la dirección de mi ordenador, @import url(«C:wampwwwproyectoswp-contentthemesthema-masterstyle.css»); pero me da error. no se q poner, por favor me podrías decir que dirección le pongo para q lo importe??

    Muchas gracias
    Raquel

    1. «../tema-padre/style.css» (sin las comillas) donde sustituyes «tema-padre» por el nombre del tema del que partes (el que quieres modificar).

  10. Lo he hecho he activado el hijo y ahora se me queda en blanco tanto la zona de administracion como el blog ¿? Lo único que copie el style.css tal cual ya que tengo mucho cambios y modifique las lineas de la cebecera como comentas

  11. Gracias por el artículo Fernando, pero me encuentro con el problema de que el style.css del Child si me lo carga perfectamente, pero cualquier otro fichero php (respetando rutas y demás) no hay manera… ¿Todos los theme que soportan Child, son iguales? es decir, ¿todos aceptan edición tanto en los css como en los php? ¿o puede que tan solo acepten edición de CSS?

  12. Fernando, justo ahora son las 12:42 am (15 de noviembre del 2014) y siento que no puedo irme a dormir sin agradecerte por este post.

    Soy nuevo en WordPress y un error en uno de los parámetros principales del childtheme impedía que este heredara el css del tema padre. Ese pequeño incidente bastó para que me entraran sudores fríos.. pero gracias a tu publicación pude resolverlo.

  13. Hola Fernando,

    yo quiero sobreescribir un archivo php que contiene una clase. He conseguido sobreescribit archivos js de diferentes rutas y el style.css pero con este no hay manera.
    Muchas gracias,
    Rebeca

  14. Yo he seguido los pasos, pero hay veces que los archivos functions.php hacen llamadas a paths, que al moverse el functions.php, no es capaz de encontrar. También, hay veces que que modificas un vas a la carpeta css/wp-shortcode.css y habría que modificar un par de cosillas. Parecen cosas obvias, pero para alguien que lo hace por primera vez, quizás no tanto…

  15. Pingback: Tema hijo de ejemplo | Ayuda WordPress

  16. Buen articulo pero he hecho el primer paso y no sale igual al tema padre, sale todo como si no tuviera estilo alguno, importe todos los css y nada. Creo que en mi caso es más complicado, quizás sea por el tema padre, necesito hacer algo más?

  17. Pingback: Recursos sobre temas para WordPress - Curso de WordPress 2016

  18. excelente tutorial, me ha servido en más de una oportunidad, ¡gracias por compartir!, hoy lo necesito nuevamente y lo tenía bien guardado como bookmark.

  19. Pingback: Crea temas hijo en WordPress con un solo clic

  20. Sergio Perez Rodriguez

    Hola, gracias por tan buen artículo. Pero me queda una duda, si quisiera agregar una nueva zona de widget, ¿cómo sería el código en el fichero functions.php del tema hijo?

  21. Hola,

    Lo primero muchas gracias por el post. Es realmente muy útil y se nota que te lo has trabajado.

    Tengo una duda, a ver si me podéis echar un cable. Me he descargado un tema de WP y sobre él he ido configurando mi web. He seguido todos los pasos tal y como indicas en el post pero cuando activo el Child Theme resulta que me carga el tema Padre, pero tal y como estaba en origen, es decir, sin ninguno de los cambios que he hecho. Mi hoja style.css contiene las modificaciones necesarias pero no se ven y, lo que es peor, tampoco se ven los cambios que he hecho desde el propio configurador de apariencia del tema 🙁

    ¿Alguien me puede ayudar? Muchas gracias de antemano

  22. Pingback: Como crear temas 'child' en Wordpress - Manos a la Web

  23. Pingback: Temas hijos en WordPress – Profesor Web

  24. Andres Thokora

    He tenido éxito en todo el proceso, por lo cual agradezco enormemente el tutorial, es muy útil y claro, sin embargo tengo un inconveniente y no sé si alguien lo tuvo y me puede ayudar… En móviles los iconos especiales cómo las barras de menú o la lupa de búsqueda me aparecen en chino, es como si no tomara las fuentes… Alguien me puede ayudar? Gracias de antemano!

    1. Andres Thokora

      Para quienes les ocurre… La hoja de estilos hacía una serie de llamados a unos archivos ubicados en la carpeta «images», allí se encontraban las fuentes y los iconos, sencillamente copie la misma carpeta en el tema hijo y solucionado!

  25. Buenos días, Fernando. Primero darte las gracias por el post. Segundo: A mí me ocurre un problema: Solo me funcionan los archivos footer, header, style y functions. Si, por ejemplo, quiero cambiar una función de /tema/functions/archivo.php no me deja. Quiero decir, sigo la misma estructura, creo el archivo, introduzco las mismas funciones con la modificación pertinente, y no la coge. ¿no debería estar sustituyendo el archivo del tema padre por el del hijo?.
    Gracias.

      1. Buenas tardes, Fernando. No pone nada fuera de lo común, de hecho recomiendan crear tema hijo para estas cosas, pero nada. Debería funcionar, pero no es así. Ya cree el tema hijo a mano o usando plugin.

        No sé qué puede estar pasando ahí… Así que he tenido que hacer las modificaciones de esos archivos en el theme principal…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido