Como crear child themes (temas hijo) para WordPress

Como crear Child Themes para WordPress

 

“Este sitio web que me has hecho se parece mucho a otros” te dice tu cliente. Claro, es que le instalaste un Tema de WordPress y no sabes como hacerle modificaciones que no se pierdan con la siguiente actualización. Los Child Themes son la solución.

En esta publicación te mostraré como modificar Tema de WordPress mediante el uso de Child Themes (temas hijos) manteniento el Tema original intacto.

Que son los Child Themes

Un Child Themes son Temas de WordPress que heredan las funcionalidades de otro Tema ya instalado, llamado Parent Theme (tema padre).

Crear un Child Theme, te da varias ventajas, entre las cuales destaco:

  • Hacer modificaciones de estilos y funcionamiento sin tocar el theme principal y por lo tanto no pierdes los cambios si este es actualizado por el “fabricante”.
  • Separar y agilizar el proceso de desarrollo.
  • Utilizarlo para mejorar tus habilidades de desarrollo, sin comprometer el código “original” del theme

Como crear un child theme

Vamos directamente al ejemplo práctico. Tenemos el Tema Twenty seventeen que viene con la versión más reciente de WordPress y al cual le he quitado la imagen inicial, para hacer más simple este tutorial.

Parent Theme en WordPress
El Theme Twenty Seventeen de WordPress con la imagen inicial desactivada.

El siguiente paso es crear una nueva carpeta, dentro de wp-content/themes que será nuestro Child Theme. Dentro de esa carpeta, creamos otros archivos que son imprescindibles.

Aquí está como debe quedar:

twentyseventeen-child
- style.css
- functions.php
- screenshot.png // opcional, pero recomendado
view raw folder.php hosted with ❤ by GitHub

La terminación de la carpeta en -child pero es opcional. Se puede llamar como quieras, eso da igual.

Pegamos este código en el archivo style.css y tenemos un Child Theme.

/*
Theme Name: Twenty Seventeen Hijo
Theme URI: http://example.com/twenty-seventeen-child/
Description: Tema hijo para Twenty Seventeen
Author: Deryck de WP Expertos
Author URI: http://wpexpertos.net
Template: twentyseventeen
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-seventeen-child
*/
view raw style.css hosted with ❤ by GitHub

Sólo con el archivo style.css y la declaración del Theme basta, pero nos gusta ir a más, así que vamos a más, porque esto de poco sirve.

Modificando los estilos

Activando Child Themes en WordPress
Activando Child Theme en WordPress

En el código a continuación he puesto algunos estilos.

/*
Theme Name: Twenty Seventeen Hijo
Theme URI: http://example.com/twenty-seventeen-child/
Description: Tema hijo para Twenty Seventeen
Author: Deryck de WP Expertos
Author URI: http://wpexpertos.net
Template: twentyseventeen
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-seventeen-child
*/
@import "../twentyseventeen/style.css";
@import "https://fonts.googleapis.com/css?family=Exo";
.site-content-contain {
background-color: lightcyan;
}
body .site-title, body.has-header-video .site-title, body.has-header-image .site-title a, body.has-header-video .site-title a {
color: pink;
font-family: 'Exo', sans-serif;
font-size: 40px;
}
.main-navigation a {
text-transform: uppercase;
font-family: 'Exo', sans-serif;
}
.title-icon {
display: inline-block;
border: 2px solid #333;
border-radius: 3px;
padding: 0px 10px;
line-height: 1;
margin-right: 5px;
}
view raw style.css hosted with ❤ by GitHub

En la línea 15 y 16, importo los estilos del Parent Theme y además la tipografía Exo de Google.

Activa ahora el Child Theme y verás como cambia el titulo y el color de fondo del Parent Theme.

Child Themes en WordPress
Así queda el Child Theme una vez aplicamos los estilos.

Nuevas funcionalidades

Los estilos nos sirven para personalizar estéticamente los Child Themes, pero vamos a agregar funcionalidades, complicarnos y hacer que todo funcione como nosotros queremos que lo haga.

Lo primero, comentamos las linéas 15 y 16 de style.css porque vamos a incluir estos estilos utilizando código PHP.

He aquí el código completo que debemos poner en el archivo functions.php de nuestro Child Theme.

<?php
function wpxp_load_styles() {
// Carga los estilos de este tema hijo
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// Carga la tipografia Exo de Google
wp_enqueue_style( 'google-exo', 'https://fonts.googleapis.com/css?family=Exo' );
}
// Se ejecuta al cargar los scripts y estilos en WordPress
add_action( 'wp_enqueue_scripts', 'wpxp_load_styles' );
function wpxp_modify_title( $title ) {
return
( 'post' === get_post_type( get_the_ID() ) && in_the_loop() ) // si la entrada es de tipo post y esta en el loop principal
? '<span class="title-icon">&raquo;</span> ' . $title // agrega el icono al inicio del titulo
: $title; // de lo contrario, devuelve el titulo sin modificarlo.
}
// Filtra antes de imprimir cada titulo.
add_filter( 'the_title', 'wpxp_modify_title' );
?>
view raw enqueue_styles.php hosted with ❤ by GitHub

La función wpxp_load_styles carga los estilos y la tipografía de Google de una forma mucho más optima. Podemos luego utilizar plugins de Caché o minificación de CSS. De la forma anterior, no se puede.

La función wpxp_modify_title tomará el titulo de cada publicación y le insertará un icono antes del texto. Es un ejemplo muy simple, pero práctico.

Observa ahora como queda el cambio en nuestro Child Theme activo.

Child Themes, Icono en cada título de las entradas.
Icono en cada título de las entradas.

El icono lo agregamos utilizando código PHP, pero los estilos, los incluímos antes en style.css, desde la línea 33 hasta la 40.

Cómo agregar archivos

Si vas a agregar mucho código, functions.php puede convertirse en un desastre. A veces es mejor separar el código en archivos de acuerdo al ambito en que funcion este. Por esa razón, puedes necesario incluir nuevos archivos PHP en tu Child Theme.

Para eso, en functions.php puedes insertar el siguiente código:

<?php require_once( get_stylesheet_directory() . '/file_a_incluir.php' ); ?>
view raw include_files.php hosted with ❤ by GitHub

¡Pero, esto está en Inglés!

Es así, porque los Child Themes no toma por defecto las traducciones del Parent Theme. Esto es algo que debes tener en cuenta.

Dentro del Child Theme, crea la carpeta /languages y puedes poner ahí tus archivos .PO y .MO de traducción. Para eso, puedes utilizar la versión gratuita de POEdit.

Utiliza este código en functions.php

<?php
function wpxp_load_domain() {
load_child_theme_textdomain( 'twenty-seventeen-child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'wpxp_load_domain' );
?>
view raw textdomain.php hosted with ❤ by GitHub

Este código hará que tu Child Theme cargue los archivos de traducción y ya podrás tener un Theme listo para ser utilizado en múltiples idiomas.

Conclusión

Las posibilidad son muchas, como te he dicho antes. Puedes utilizar Themes gratuitos o premium, que tienen una frecuencia alta de actualizacion por parte de sus desarrolladores. Sobre estos Themes, puedes crear muchas mejoras funcionales y estéticas para crear sitios web únicos, muy optmizados para tus clientes.

Si el desarrollador del Theme lo actualiza, no tendrás problemas al hacerlo tu también, porque tu código está separado y seguro, en un Child Theme.

¿Que te ha parecido este artículo? ¿Utilizas actualmente Child Themes o no tenías idea y esta publicación te ha aclarado un poco más el panorama? Cualquiera que sea tu caso puedes dejae un comentario debajo y compartir tu expeciencia.

Deja un comentario