Crear un Chid Theme

Un tema hijo o child theme se usa para evitar perder los cambios hechos en tu theme cuando lo actualices. Sigue leyendo para aprender a crearlo.

Un child theme es un tema que utiliza los archivos e información de un «tema padre», es decir, del tema que estás usando ahora mismo en tu web. Pero además tiene la capacidad de pasar por encima de él.

El primer paso es crear una carpeta dentro de wp-content/themes con el nombre del theme hijo. Puede ser el nombre que quieras aunque tendría sentido que tuviese relación con el tema padre.

Crea un archivo style.css dentro de la carpeta del theme hijo.

Copia y pega las siguientes líneas en la nueva hoja de estilos de tu theme hijo.

/*
Theme Name: A Theme Hijo
Theme URI: http://loquesea.es
Version: 4.0
Description: Tema hijo de A theme
Author: Tu
Author URI: http://loquesea.es
Template: A-Theme
*/
 
/*----------------- Cambios a partir de aquí -------------------------------*/

Partes importantes que debes editar.

• Theme name: el nombre de tu theme hijo
• Template: el nombre exacto de la carpeta del theme padre *

El nombre del template es muy importante porque dará a tu child theme el mismo aspecto que tiene el theme padre.

Los demás datos son sólo informativos y puedes poner lo que quieras.

Debes crear un archivo llamado functions.php dentro de la carpeta de tu child theme y escribir las siguientes líneas.

<?php
function my_theme_enqueue_styles() {
 $parent_style = 'parent-style'; // Estos son los estilos del tema padre recogidos por el tema hijo.
 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')
 );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Y ya está. Ve al menú de Apariencia > Temas de tu web y verás tu nuevo y reluciente child theme (aunque sin imagen destacada. Revisa el punto 5 de este tutorial para añadirla).

Ahora puedes añadir estilos a tu child theme. Los estilos se heredan del tema padre pero si escribimos clases personalizadas en el child theme se cargarán antes que las del padre.

Vamos a ver un ejemplo cambiando el color de los links a naranja.

/*
Theme Name: A Theme Hijo
Theme URI: http://loquesea.es
Version: 4.0
Description: Tema hijo de A theme
Author: Tu
Author URI: http://loquesea.es
Template: A-Theme
*/
 
/*----------------- Cambios a partir de aquí -------------------------------*/
/* Poner los links en naranja */
a { text-decoration: none; color: #EFB871; }
a:hover { text-decoration: underline; }

WordPress da prioridad al archivo functions.php del tema hijo y después carga las funciones del tema padre.

No tienes más que añadir las funciones que no quieras que se pierdan con una actualización del theme padre.

Vamos a ver un ejemplo con una función muy típica: crear un widget.

<?php
/* Código para crear un widget */
if (function_exists('register_sidebar')) {
        register_sidebar(array(
            'name' => 'Sidebar Widgets',
            'id'   => 'sidebar-widgets',
            'description'   => 'These are widgets for the sidebar.',
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h2>',
            'after_title'   => '</h2>'
        ));
    }

De esta forma, WordPress cargará esta función del theme hijo y el resto de funciones del theme padre.

Para que tu child theme tenga una imagen destacada cuando vayas al menú de Apariencia > Temas en tu panel de administración de WordPress sólo tienes que arrastrarla a la carpeta de tu child theme.

Lo único que debes tener en cuenta es que el nombre de la imagen debe ser screenshot.png

Si quieres puedes copiar y pegar la imagen que viene en la carpeta del theme padre.