====== 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.

===== #1 Crear la carpeta del child theme =====

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.

{{:internet:wordpress:childthme:hoja-de-estilo-child-theme.jpg?400|}}

===== #2 Crear la hoja de estilos (style.css) dentro del child theme =====

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

{{:internet:wordpress:childthme:theme-hijo-ftp.png?400|}}

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

<code css>
/*
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í -------------------------------*/
</code>

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.

===== #3 Crear archivo functions.php e importar estilos del tema padre =====

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

<code php>
<?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' );
?>
</code>

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).

===== #4 Añadir estilos en el theme hijo =====

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.

<code css>
/*
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; }
</code>


===== #5 Añadir funciones en el child theme =====

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.

<code php>
<?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>'
        ));
    }
</code>

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

===== #6 Paso extra: añade una imagen destacada a tu theme hijo =====

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.