Crear tema hijo (child) de WordPress en 5 minutos

Crear tema hijo de Wordpress en 5 minutos

Una vez te has decidido a crear tu página usando una plantilla, lo primero que deberíamos hacer (para evitar futuras desgracias) sería crear un tema HIJO en WordPress.

¿Qué es un tema hijo?

Bueno, es simple, un  tema hijo vendría a ser una extensión del tema principal que nos permite hacer todas las modificaciones que necesitemos sin riesgo a perder todo ese trabajo tras una actualización automática del tema principal.

Por eso, en el caso de que seas un amante de los plugins propios, shortcodes o cualquier otra modificación del código de WordPress, lo primero que debes hacer es prepararte tu tema HIJO.

Imagina como te quedarías tú (o alguno de tus clientes), si después de personalizar todas las páginas de tu web, los «headers», los «footers»….vamos, todo, llega una actualización y te lo vuelve a dejar todo como recién instalado. Sin comentarios…

También es imprescindible si eres el típico programador que usas editores de código como NETBEANS para crear estupendas webs o aplicaciones y después quieres incluirlas en algún tema de WordPress. Usar un tema HIJO para esta tarea es muy sencillo, pero eso te lo explicaré en otro post. Paciencia.

¿Porqué crear un tema hijo?

Por temas de seguridad: si tu tema  se actualiza, perderás todos los cambios realizados.

Se acelera mucho el tema de desarrollo.

Es una buena forma de aprender a desarrollar con WordPress.

 

 

¿Y cómo se crea un tema hijo?

Esto si que es facil. En 5 minutos lo tendremos listo y preparado para empezar a picar nuestro código como si no hubiera un mañana.  Empecemos:

Instalamos tema principal y lo activamos.

Utilizaremos el tema ‘Twenty Fifteen’ para este ejemplo. Lógicamente podremos usar el que queramos.

Creamos carpeta de nuestro tema HIJO.

Ahora necesitaremos acceso a la instalación de WordPress. Normalmente a través de FTP. Doy por hecho que no será un problema. Aquí te dejo el link para descargar FILEZILLA, un estupendo gestor FTP. Hay  muchos tutoriales que te explican cómo configurarlo pero creo que tampoco hay que ser ingeniero para hacerlo. Seguimos.

Lo dicho: accedemos a nuestra instalación de Worpress y en la ruta «wp-content/themes/» encontrarás las carpetas de los THEMES que tengas instalados en tu Worpress.

Creamos la carpeta de nuestro tema HIJO. Puedes llamarla como quieras.

 

 

Creamos archivo «style.css».

Yo, personalmente y para estas pequeñas tareas utilizo NOTEPAD++, aquí te dejo el link.

Ahora, creamos nuestro archivo «style.css» y le añadimos el código siguiente:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

Todas las lineas son modificables a tus necesidases,  excepto la linea «Template» que es la que determina la direccion de la carpeta del tema PADRE que has de tener anteriormente instalado.

Una vez hayas creado la carpeta y el archivo, vas al menú ‘Apariencia/Temas/’ , verás que ya aparece tu tema HIJO y ya puedes proceder a activarlo.

Pero espera! Aún no hemos terminado!!

Ahora nos falta decirle a WordPress que , antes de cargar sus estilos, cargue los de nuestro tema HIJO.  Y esto se hace añadiendo nuestro propio archivo «functions.php»

Creamos archivo «functions.php».

El procedimiento es el mismo que cuando hemos creado nuestro «style.css». Usamos el editor de código para generar el archivo «functions.php» y , a través de FTP, lo subimos  a la carpeta de nuestro tema HIJO.

Éste es el código que le hemos de añadir al archivo:

<?php
 
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
 
?>

Una vez has terminado, tus dos archivos serán los prioritarios al cargar tu web, por lo que cualquier código o estilo que añadas será lo primero que se cargará.

En todo caso, os recomiendo siempre que trabajeis con temas HIJO (yo al menos suelo hacerlo), añadir unas lineas de código en nuestro «functions.php» para comprobar que en todo momento nuestro tema funciona correctamente. Yo, personalmente, uso éste código, que me muestra mi numero de ID de usuario  y mi nombre.

<?php
if (is_user_logged_in()){
$cu = wp_get_current_user();
echo 'ID: '                . $cu->ID             . '<br />';
echo 'Nombre de usuario: ' . $cu->user_login     . '<br />';
}
?>

Este código colocado al inicio de nuestro archivo «functions.php» hará que nos mueste, en cada página de nuestra web, el ID y el NOMBRE del usuario conectado en ese momento.

Y hasta aquí mi primer blog explicando cómo se crea un tema HIJO de WordPress. Espero os haya servido de utilidad. Si tenéis alguna duda, podéis comentarla e intentaré contestar lo antes posible.

Hasta pronto!!

Compartir esta entrada.

Deja una respuesta

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

CAPTCHA ImageChange Image