Por qué deberías usar un child theme

Los desarrolladores de WordPress han comenzado a agregar la posibilidad de crear child themes para que nosotros podamos crear nuestros sub-temas basados en las características del tema padre o principal. Un child theme, traducido como ‘tema hijo’, te permite usar y modificar el tema original y luego salvar todos los cambios que hagas solo dentro del tema hijo, de forma que no afecte al tema original.

En este tutorial aprender cómo crear y personalizar tu propio child theme.

¿Por qué deberías usar un child theme?

Estos temas te dejan modificar los temas originales tanto como quieras. Puedes hacer todos los cambios que quieras sin que estos surtan efecto en el tema padre o en cualquiera de tus otros proyectos.

¿Cómo funcionan?

Estos temas residen en un directorio distinto al del tema padre, cada directorio hijo necesita tener sus propios archivos style.css y functions.php. Puedes agregar todos los archivos modificados que quieras o necesites, pero estos archivos son necesarios para que el theme pueda funcionar correctamente.

¿Qué necesitas para hacer este tutorial?

Esto es lo que necesitarás para poder completar el tutorial:

• Acceso al administrador de WordPress.
• Acceso al administrador de archivos (o a un cliente FPT).

1.- Crear un child theme en WordPress

Crear un child theme no es más complicado que el trabajo que ya has estado haciendo con el tema original.

Tienes que crear un directorio para el child theme en el directorio ‘wp-content/themes’. Recomendamos que mantengas una buena organización en los temas al añadir ‘-child’ al final del nombre del tema original. Aunque puedes agregar el nombre de tu proyecto o una palabra que te resulte cómoda. Recuerda que no debes de incluir ningún espacio en el nombre, ya que esto puede causar errores.

Para crear el nuevo directorio puedes usar el Administrador de Archivos de tu cPanel o un cliente FPT.

En el ejemplo que verás en este tutorial crearemos un child theme basado en el tema Twenty Seventeen, así que la ruta completa para el directorio será: wp-content/themes/twentyseventeen-child.

1. Accede al panel de control del Hosting y seleccionar ‘Administrador de Archivos’.
2. Navega hacia el directorio en dónde esté instalado WordPress (generalmente es el directorio llamado public_html) y abre el directorio wp-content > themes.
3. Selecciona la opción ‘create new folder’ (crear una nueva carpeta), selecciona el nombre de tu child theme y selecciona el botón ‘Create’ (Crear).
4. Ahora accede al directorio que acabas de crear par tu child theme.
5. Selecciona la opción ‘New File’ (Nuevo archivo), e ingresa style.css en el nombre. Ahora selecciona ‘Create’.
6. Ahora tendrás que poner el siguiente código en el archivo que acabas de crear:

*/

Theme Name: Twenty Seventeen Child

Theme URL: http://hostinger-tutorials.com

Description: Twenty Seventeen Child Theme

Author: John Doe

Author URL: http://hostinger-tutorials.com

Template: twentyseventeen

Version: 1.0.0

Text Domain: twentyseventeen-child

*/ Custom CSS goes after this line

1. Tienes que cambiar los valores para que sean los que tiene tu tema y tu nombre de dominio. Los campos más importantes son ‘Template’ y ‘@import’ debido a que ellos le dicen a WordPress cuál es el tema padre de nuestro child theme. Una vez que hayas agregado el código anterior solo selecciona ‘Save’ (Guardar).
2. Ahora tendrás que agregar un archivo ‘functions.php’ en la misma carpeta. Pero no copies y pegues el archivo del tema original, ya que necesitas mantenerlos separados de las modificaciones que vayas a hacer después. En su lugar, crea un archivo en blanco o agrega las funciones .php que sean necesarias para tu nuevo child theme.
3. Desde el área de administrador de WordPress dirigete a la opción de ‘Apariencia’ y selecciona ‘Temas’, en donde veras tu nuevo child theme. Seleccionalo y presiona la opción ‘Activar’.
4. Visita tu sitio web y verás que el diseño tiene algunos problemas. No entres en pánico, todo ha salido bien, estos problemas son causados por el archivo functions.php, que todavía no está cargando el CSS del tema padre, todavía.
5. Desde el área de administrador de WordPress dirígete a la opción ‘Apariencia’ > ‘Editar’ y selecciona ‘functions.php’ en los archivos que aparecerán a la derecha.
6. WordPress tiene una función para cargar el CSS de los temas padres. Copia y pega el siguiente código dentro del archivo ‘functions.php’ de tu child theme:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

wp_enqueue_style( 'parent-style',get_template_directory_uri().'/style.css');

}

?>

1. Luego de agregar el código de arriba presiona ‘Update’ (Actualizar) en la parte inferior de la página. Esto guardará los cambios.
2. Ahora visita tu página otra vez. Ahora notarás que el CSS del tema está cargando en tu child theme y luce exactamente igual que el tema original.

Cómo pudiste comprobar la creación de un child theme para WordPress es un proceso bastante sencillo una vez que se ve paso a paso.

2.- Personaliza tu child theme de WordPress

Si estás haciendo todo esto debe de ser porque tienes el objetivo de hacerle algunos cambios y modificaciones al diseño.  Así que ahora veremos cómo personalizar tu diseño.

2.1.- Cambiar el aspecto de tu child theme

Para personalizar el aspecto de tu diseño, necesitaras editar el archivo custom.css de tu child theme. Puedes usar el editor de textos y un cliente FPT, el Administrador de Archivos de tu hosting o incluso el editor de WordPress (Apariencia > Editor). Si ya tienes abierto el área de Administrador de WordPress es la opción más rápida.

Un ejemplo: Para cambiar el color del fondo de tu página, tienes que agregar el siguiente CSS a tu archivo style.css:

.site-content-contain {

background-color: #d5ffa0;

position: relative;

}

Al agregar este código el fondo de tu página se verá de color verde. El proceso para hacer cualquier cambio que quieras es prácticamente igual.

2.2.- Agregar o remover características

Otra de las grandes ventajas de usar un child theme es que tendrás la habilidad de tener un archivo functions.php separado, así como los Plugins, es usado para agregar o remover algunas características.

Al tener el functions.php separado en tu child theme, puedes estar seguro de que cualquier modificación no se deshará luego de que el theme original sea actualizado.

Para agregar características a tu theme, agrega el código PHP en el archivo functions-php de tu child theme. Por ejemplo, el siguiente código se usa para deshabilitar la función de búsqueda de WordPress:

function disable_search( $query, $error = true ) {

if ( is_search() ) {

$query->is_search = false;

$query->query_vars[s] = false;

$query->query[s] = false;

// to error

if ( $error == true )

$query->is_404 = true;

}

}

add_action( 'parse_query', 'disable_search' );

add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

Conclusión

Usar un child theme en WordPress es una excelente forma para trabajar en tus proyectos y crear algo nuevo usando los parámetros de un theme especifico, pero sin afectarlo o alterarlo de ninguna forma.