¿Cómo crear un tema hijo de WordPress?

¿Has hecho modificaciones en tu WordPress y al actualizar se ha perdido todo? Puedes crear un tema hijo de WordPress, también llamado child theme y evitarte ese mal trago.

Después de instalar tu WordPress debes escoger la plantilla o tema a utilizar. Esta es la que dará funcionalidad y estilo a tu web o blog. WordPress viene con algunos temas preinstalados por defecto, aunque lo ideal es comprar alguno premium en la multitud de mercadillos existentes. Para poder personalizarlo este tema o plantilla debe ir acompañado de un tema hijo WordPress.

¿Por qué crear un tema hijo de WordPress?

El tema instalado deberá ser actualizado periódicamente de igual forma que actualizas al propio WordPress o sus plugins. El problema viene cuando has hecho cambios en el código del tema principal durante el desarrollo web y lo actualizas. Todos esos cambios los vas a perder.

Una de las primeras tareas que hace un desarrollador web tras la instalación de WordPress es crear un tema hijo o child theme. Así protege cualquier cambio de código realizado en el proceso, de forma que al actualizar no se verá afectado.

Un tema hijo de WordPress siempre depende de un tema padre que es el que has instalado inicialmente, pero al contrario que este permite modificaciones permanentes. Es decir, debes tener instalados los dos y activado el tema hijo. En este artículo vamos a aprender a crear un tema hijo en WordPress y también a cómo usarlo.

Cómo crear un tema hijo WordPress

Antes de ponerte a crear nada busca en la base de conocimiento de los creadores del tema WordPress que has decidido usar, porque lo más fácil es que ellos ya tengan creado un tema hijo que puedas descargar.

Crear un tema hijo es relativamente fácil y no hay que ser un experto en desarrollo web ni nada de eso. Eso si, antes te recomiendo que instales un cliente FTP del tipo WinSCP o FileZilla que te permitirá acceder a las carpetas del hosting como si estuvieran dentro de tu ordenador. El desarrollo o personalización posterior de la web te va a resultar mucho más cómodo.

Un tema hijo de WordPress está compuesto por lo menos de una carpeta con el nombre del tema y contendrá un archivo functions.php y otro style.css. También puede crearse solo con el archivo style.css usando el método @import pero no es lo más óptimo ya que influirá negativamente en la velocidad de carga de tu web.

Además vamos a crear una imagen de previsualización del tema hijo de WordPress con un archivo llamado screenshot.png.

Imagen 1

A la hora de nombrar la carpeta de tu tema hijo usa minúsculas y no dejes espacios en blanco, en su lugar usa guiones medios.

Contenido del archivo style.css

En primer lugar debes crear un archivo style.css desde un editor de código como Notepad++. Pega este código dentro y sustituye los nombres que he puesto por los correctos: el nombre del tema padre, el del tema hijo, las url… lo único que debes respetar es el nombre del template, que corresponderá al del tema padre.

/*
Theme Name: Nombre del tema hijo
Theme URI: http://tudominio.com/
Description: Nombre del tema padre Child Theme
Author: El autor
Author URI: http://el-dominio-del-autor.com
Template: nombre-del-tema-padre
Version: 1.0.0
Text Domain: nombre-del-tema-hijo
*/
/* Debajo de esta línea comienza la personalización de tu css */

Contenido del archivo functions.php

Después de crear un archivo functions.php con el editor, pega el código que tienes a continuación dentro. Para hacerla tuya usa en el nombre de la función el nombre de tu tema hijo. Fíjate que no hay cierre de la etiqueta <?php.

<?php 
add_action( 'wp_enqueue_scripts', 'nombre_tema_hijo_enqueue_styles' );
function nombre_tema_hijo_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
/* Debajo de esta línea comienza la personalización de tu archivo functions.php */

Añadir una imagen previa a tu child theme

Cuando desde el panel de control de WordPress accedemos a Apariencia > Temas los temas o plantillas disponibles nos muestran una previsualización. Aunque solo es opcional nosotros podemos generar una propia para nuestro tema hijo de WordPress creando un archivo de imagen con extensión .png y medidas de 1200px x 900px y con el nombre screenshot.png, no obstante la imagen que mostrará WordPress será bastante más pequeña.

Yo personalmente no hago caso a las recomendaciones de WordPress y la imagen que uso mide 600px x 450px, que es el tamaño que viene por defecto con mi tema padre.

Recuerda que esta imagen deberá estar junto a los archivos functions.php y style.css dentro de la carpeta principal de tu tema hijo como se muestra arriba en la imagen 1.

Si te resulta más cómodo puedes descargar la carpeta con los archivos de un tema hijo WordPress desde este enlace.

Con la información vista hasta aquí ya puedes crear un tema hijo de WordPress y manipular su CSS para aplicar un estilo personalizado. Lo que viene a continuación en el artículo son tres ejemplos para exprimirlo un poco más.

¿Para qué más puedo usar un tema hijo de WordPress?

Como hemos explicado anteriormente, un tema hijo sirve para modificar el código de la plantilla padre de WordPress, sin que este se vea afectado por las actualizaciones posteriores. Desde el tema hijo WordPress podemos crear shortcodes, nuevas barras laterales, nuevos menús o generar nuestras propias plantillas de página entre otras muchas cosas. Esto nos evitará recurrir a plugins y por lo tanto reduciremos el tiempo de carga de nuestra web o blog.

Veamos tres ejemplos prácticos de cómo usar un tema hijo de WordPress:

• Crear un shortcode.
• Generar una nueva plantilla de página.
• Añadir texto en el footer.

Crear un shortcode en un tema hijo de WordPress

En primer lugar y como primer ejemplo para sacarle el partido a nuestro child theme vamos a crear un [shortdode] o código corto que nos servirán para añadir funcionalidades y no tener que escribir constantemente ese código html. Programando el código una sola vez podremos insertarlo escribiendo solo una palabra encerrada entre corchetes.

Imaginemos que queremos tener un botón que aparezca en muchas de nuestras páginas y que dirija al usuario a solicitar un presupuesto. Por supuesto queremos que tenga un enlace nofollow para que la araña de Google no tenga que perder el tiempo en seguirlo cada vez durante la indexación del sitio web. Además queremos que la página enlazada se abra en una nueva pestaña.

El código html para este botón será algo así dependiendo de tu destreza con el CSS:

<a href="http://tudominio.es/solicitud-de-presupuesto" target="_blank" rel="nofollow" class="miBotonEspecial">TEXTO DEL BOTÓN</a>

Y el código css que le dará estilo será:

.miBotonEspecial{
   display:inline-block;
   background-color:#f09e22;
   color:#ffffff;
   font-size:15px;
   font-weight:bold;
   padding:15px 34px;
   text-decoration:none;
   text-shadow:0px 1px 0px #cc9f52;
   margin:15px 0;
}
.miBotonEspecial:hover{
   background-color:#eb861a;
}

Declarar un shortcode en WordPress

Lo primero que necesitamos es declarar el shortcode en el archivo functions.php. Para ello añadimos el siguiente código a continuación del que hemos insertado al crear el tema hijo. De forma que nuestro archivo quede así:

<?php 
add_action( 'wp_enqueue_scripts', 'nombre_tema_hijo_enqueue_styles' );
function nombre_tema_hijo_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
/* Debajo de esta línea comienza la personalización de tu archivo functions.php */
/* Declaración del shortcode */
function shortcode_botonPresupuesto() { 
	return '
<a href="http://tudominio.es/solicitud-de-presupuesto" target="_blank" rel="nofollow" class="miBotonEspecial">TEXTO DEL BOTÓN</a>';
}
add_shortcode('botonpresupuesto', 'shortcode_botonPresupuesto');

Usar un shortcode de WordPress

Ahora podremos insertar este botón en cualquier parte de nuestro texto escribiendo el shortcode [botonpresupuesto] desde el editor de texto de WordPress de la misma forma con que escribimos cualquier palabra.

Aplicar estilo al shortcode desde style.css

Finalmente y para que el botón tenga el estilo que queremos asignarle añadiremos a nuestro archivo style.css el código, a continuación del que hemos insertado al crear el archivo.

Quedando así:

/*
Theme Name: Nombre del tema hijo
Theme URI: http://tudominio.com/
Description: Nombre del tema padre Child Theme
Author: El autor
Author URI: http://el-dominio-del-autor.com
Template: nombre-del-tema-padre
Version: 1.0.0
Text Domain: nombre-del-tema-hijo
*/
/* Debajo de esta línea comienza la personalización de tu css */
/* Estilo del botón */
.miBotonEspecial{
   display:inline-block;
   background-color:#f09e22;
   color:#ffffff;
   font-size:15px;
   font-weight:bold;
   padding:15px 34px;
   text-decoration:none;
   text-shadow:0px 1px 0px #cc9f52;
   margin:15px 0;
}
.miBotonEspecial:hover{
   background-color:#eb861a;
}

Con estos sencillos pasos conseguimos ahorrarnos repetir el código para el botón en cada página que aparezca.

Vamos a por el siguiente ejemplo de uso para un child theme.

Crear una plantilla de página desde un tema hijo WordPress

Como segundo ejemplo del uso de los temas hijo de WordPress vamos a crear una plantilla de pagina que nos permitirá asignarle un diseño distinto de las que vengan por defecto en nuestro tema principal. Para poder visualizar los cambios deberemos seleccionar como plantilla de página esa que vamos a crear, que será en mi caso Página con Banner.

Imagen 2

Cómo crear una plantilla de página en WordPress

Las plantillas de las páginas que vienen con WordPress dependen del tema que estemos utilizando. Si queremos añadir una nueva plantilla para mostrar contenido diferente, por ejemplo un banner al inicio, deberemos crearla nosotros. Es tan fácil como crear un nuevo archivo en la raíz de nuestro tema hijo al que llamaremos, por ejemplo page-banner.php y en el que escribiremos al principio del código:

<?php
/* Template Name: Página con Banner */
?>
/* Debajo de esta linea debe ir el código del archivo page.php con tus modificaciones */

Dentro de nuestro WordPress se mostrará la nueva plantilla de página con el nombre Página con Banner como vemos en la imagen 2. Además de esta yo ya tenía creadas otras dos plantillas que no venían con el tema. La carpeta del tema hijo quedará de la siguiente manera:

Respecto al código que debe contener el archivo bajo estas líneas dependerá del tema principal y hay que saber un poco de programación para hacerlo de forma correcta. En un principio lo que haremos es copiar el código que incluya el archivo page.php del tema padre para después modificarlo a nuestro gusto.

En nuestro caso queremos insertar un banner promocional antes del contenido. Para no complicar aún más el código solo voy a meter una imagen que lo simule. Recuerda que el código que rodea al banner va a depender de tu plantilla y lo puedes sacar del archivo original page.php del tema padre WordPress.

Como he insertado el banner justo antes del contenido, por defecto se mostrará antes de cualquier texto o imagen que añadamos a la página incluida la barra lateral. Además a la imagen le he asignado una clase CSS con la que puedo aplicarle un estilo propio desde el archivo style.css.

El resultado de la plantilla personalizada

Esto es cómo se ve la página con la plantilla por defecto:

Y esta es la vista con la plantilla page-banner.php que hemos creado:

Cada una de las páginas a las que les asignemos esta plantilla personalizada mostrarán siempre el banner al inicio. Aunque puede asustar trastear con este tipo de archivos, vemos que no es tan complicado y además es una forma muy fácil de sacar provecho al tema hijo de WordPress.

Vamos a por el último ejemplo.

Añadir texto en el footer desde el tema hijo WordPress

Para finalizar el artículo y sacarle el máximo partido a nuestro tema hijo de WordPress vamos a insertar un contenido que queremos que aparezca en el footer de cada una de las páginas y entradas. Por ejemplo el año junto a los datos del copyright.

Hacemos una copia del archivo footer.php de nuestro tema padre y lo subimos a la carpeta raíz del tema hijo. Nos tocará descargarlo por FTP desde el padre al ordenador y subirlo esta vez a la carpeta del hijo. Cualquier modificación que le hagamos a este nuevo archivo priorizará sobre el original y no se perderán los datos con las actualizaciones.

Como en el caso anterior al manipular este tipo de archivos deberemos saber lo que estamos haciendo porque podemos romper nuestro WordPress. Si esto llegara a pasar, que no pasa nada, después del susto eliminamos el archivo y empezamos de cero subiéndolo de nuevo.

El código añadido justo antes del copyright mostrará un nuevo contenido con respecto del footer original, que es el año de inicio de la web y el actual. Y además será actualizado de forma automática por medio de la función javascript.

El footer original se veía así:

y el tuneado por nosotros y resistente a las actualizaciones se mostrará así:

Vídeo de cómo crear un tema hijo WordPress

Finalmente te dejo un vídeo donde se repasa el contenido de este artículo por si acaso no he sido capaz de transmitir la información de forma adecuada por escrito. Aunque ya te adelanto que soy mejor escritor que orador ;).

En conclusión y para finalizar este artículo recomendarte que siempre manipules los archivos de tu tema hijo de WordPress con mucha cautela y que antes hagas una copia de seguridad. Es muy fácil que te pase algo inesperado y de esta manera siempre podrás volver sobre tus pasos.

Si tiene alguna duda al respecto tienes a tu disposición el formulario de comentarios un poco más abajo y una selección de artículos sobre desarrollo web en este mismo blog.