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:

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í … 

… 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:


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

AVISO: esta publicación es de hace dos 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.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (56 votos, promedio: 4,71 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.

Autor del libro WordPress – La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

LOS BURÓCRATAS DE LA UE ME EXIGEN QUE TE DIGA QUE SI VISITAS AYUDA WORDPRESS PUEDES RECIBIR ALGUNA COOKIE. AQUÍ NO HAY COOKIES DE PUBLICIDAD, COMO LAS QUE SI TE DEJAN GOOGLE, AMAZÓN Y MONTÓN DE SITIOS, SIN AVISAR, PERO EL QUE TE TENGO QUE AVISAR SOY YO. LAS COOKIES QUE TE DEJA AYUDA WORDPRESS SON PARA FACILITARTE LA NAVEGACIÓN, COMPARTIR Y COMENTAR. SI NO QUIERES RECIBIR COOKIES PUEDES NAVEGAR EN MODO PRIVADO, ABANDONAR ESTE SITIO Y PERDERTE EL CONTENIDO GRATIS QUE COMPARTO CADA DÍA SOBRE WORDPRESS O IRTE A UNA ISLA DESIERTA PARA VIVIR AISLADO DEL MUNDO, ESO SÍ, SIN COOKIES. O SINO, SIMPLEMENTE CIERRA ESTA VENTANA COÑAZO Y SIGUE DISFRUTANDO DEL BLOG. SI TIENES CURIOSIDAD SOBRE ESTO DE LAS COOKIES TE DEJO UN ENLACE >> MÁS INFORMACIÓN

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar