como crear un tema hijo en wordpress

Cuando instalamos un tema en WordPress, es habitual configurar un tema hijo para evitar perder los cambios de nuestro sitio web, cada vez que actualicemos el tema.

Los temas hijos se crean para evitar perder cambios cuando actualizamos nuestro tema.

Para crear un tema hijo, seguimos los siguientes pasos:

1. Creamos una carpeta dentro de wp-content/themes con el mismo nombre que la carpeta padre seguido del sufijo «-child». Ej. «NombreTemaPadre-child»
2. Dentro de la carpeta creamos el archivo style.css con la siguiente información.

/**
 * Theme Name: Nombre-de-nuestro-tema-hijo
 * Theme URI: https://ruta-de-nuestro-tema
 * Author: Alberto
 * Author URI: https://myhappycoding.com/
 * Description: Este es el tema hijo de ....
 * Version: 1.0
 * License: GPL-2.0
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Template: Nombre-de-la-carpeta-de-nuestro-tema-padre
**/

1. Creamos el archivo functions.php con la siguiente información.

<?php
add_action('wp_enqueue_scripts','theme_enqueue_styles');

function theme_enqueue_styles(){
 $parent_style = 'parent_style';
 wp_enqueue_style($parent_style ,get_template_directory_uri().'/style.css');
 wp_enqueue_style('child-style',
      get_stylesheet_directory_uri().'/style.css',
      array($parent_style),
      wp_get_theme()->get('Version')
     );
}
?>

Configurar nuestro tema hijo con librerías importantes

Siempre que usamos wordpress, es habitual usar fuentes externas como: jQuery, Awesomenauts, Bootstrap y Google Fonts. En el archivo functions.php del tema hijo, se configuran estas opciones. Veamos como se hace:

Configurar jQuery en wordpress

Por defecto, todas las instalaciones actuales de wordpress, soportan jQuery pero esta versión no permite el uso de simbolo dollar ‘$’, para llamar a las funciones jQuery. Esto resulta muy molesto y para arreglarlo necesitamos quitar la versión actual de jQuery y añadir la nuestra. Este proceso es el que se incluye a continuación en el archivo functions.php.

function add_new_jQuery() {
//Quitamos la versión jQuery que viene por defecto en nuestro WordPress
 wp_deregister_script('jquery');
//Añadimos la nueva versión de jQuery
 wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.5.1.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts','add_new_jQuery');

La función wp_enqueue_script(), recibe 4 parámetros:

• Nombre de nuestro hook: Podemos escribir lo que queramos, en realidad es el nombre que recibe nuestro hook. En nuestro caso ‘jQuery’
• Url de la libreria: Aquí escribimos la ruta donde se encuentra nuestra librería. En nuestro caso la hemos obtenido de cdnjs .
• Array de dependencias: Aquí indicamos las librerías necesarias para que nuestro script funcione. En este caso, la librería jQuery no depende de ninguna otra, así que el array está vacío.
• Versión: Podríamos haber escrito un número, pero con null también nos vale.
• En el pie de página: Como su propio nombre indica, nos permite decidir si cargar nuestra librería en el pie de página. En nuestro caso, lo cargamos en el pie de página.

Configurar Awesomefont en WordPress

Este framework permite añadir iconos vectoriales mediante estilos css y tratarlos como si fueran texto. Para incluirlo, se hace igual que el punto anterior:

//Cargamos awesomefont
wp_enqueue_style('awesomefont','https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

Configurar Bootstrap en WordPress

Para incluir bootstrap, necesitamos añadir dos rutas: la relativa a los estilos CSS y la relativa a las funciones jQuery. Para ello añadimos dos hooks:

function add_bootstrap() {
   //Añadimos los estilos css
   wp_register_style('bootstrap', get_template_directory_uri().'/css/bootstrap.css', array(), false, 'all');
   wp_enqueue_style('bootstrap');
   //Añadimos las funciones jQuery
   wp_register_script('bootstrap_js', get_template_directory_uri().'/js/bootstrap.min.js', array(), null, true);
   wp_enqueue_script('bootstrap_js');
}
add_hook('wp_enqueue_scripts','add_bootstrap');

Añadir las fuentes de google en WordPress

//Añadimos la fuente Roboto y sus variantes
function add_google_fonts() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&display=swap', false ); 
}
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

Y esto es todo. Crear un tema hijo es muy sencillo y solo quedaría activarlo desde el propio WordPress a través de Apariencia->Tema. Te animo a ponerlo en práctica aunque siempre puedes contar con la ayuda de un profesional.

Espero que os sea de utilidad.

Happy coding!