Hestia, el nuevo tema gratuito de bandera de ThemeIsle, se afianza cada vez más este año, y fue creado con la intención de ser una opción superadora del otro tema emblemático de la empresa: el archiconocido Zerif Lite.

ThemeIsle ya ha anunciado que irá dejando de lado su atención en Zerif y concentrará sus mayores esfuerzos en el desarrollo y mejora de Hestia. Y aunque se trata de un tema muy completo y flexible, siempre hay algo que se puede agregar o ampliar. 🙂

Hoy inauguro una nueva categoría para los tutoriales sobre este tema, que tendrá las instrucciones para incluir un segundo botón en la sección de título grande como primer capítulo.

Paso 1: Crear un tema hijo

Es estrictamente necesario, como siempre se hace hincapié, crear un tema hijo para aplicar las modificaciones de código.

La manera recomendada de crear un tema hijo para este tema es la siguiente:

Crear una carpeta en /wp-content/themes/ denominada /hestia-child/. Crear un archivo nuevo en un editor de texto (por ejemplo, Notepad++), con el nombre functions.php. Copiar y pegar el siguiente código en este archivo y guardarlo en la carpeta /hestia-child/:

<?php
if ( !defined( 'ABSPATH' ) ) exit;
if ( !function_exists( 'hestia_child_parent_css' ) ):
 function hestia_child_parent_css() {
 wp_enqueue_style( 'hestia_child_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap' ) );
 if( is_rtl() ) {
 wp_enqueue_style( 'hestia_child_parent_rtl', trailingslashit( get_template_directory_uri() ) . 'style-rtl.css', array( 'bootstrap' ) );
 }
 }
endif;
add_action( 'wp_enqueue_scripts', 'hestia_child_parent_css', 10 );
function hestia_child_get_parent_options() {
 $hestia_mods = get_option( 'theme_mods_hestia' );
 if ( ! empty( $hestia_mods ) ) {
 foreach ( $hestia_mods as $hestia_mod_k => $hestia_mod_v ) {
 set_theme_mod( $hestia_mod_k, $hestia_mod_v );
 }
 }
}
add_action( 'after_switch_theme', 'hestia_child_get_parent_options' );

Crear otro archivo nuevo en la carpeta /hestia-child/ con el nombre style.css y pegar el siguiente código:

/*
Theme Name: Hestia - Hijo
Theme URI: https://themeisle.com/themes/hestia
Description: Tema hijo de Hestia, por ThemeIsle.
Author: Caribdis.Net
Author URI: https://caribdis.net
Template: hestia
Version: 1.0
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* ESTILOS PERSONALIZADOS
---------------------------------- */

Podrá editar el nombre del tema, la descripción, el autor, la versión y las URI de acuerdo con sus necesidades. Solo asegúrese de que Template coincide con el nombre de la carpeta del tema padre.

Por último, y nunca está de más recordarlo, activar el tema hijo.

Paso 2: Incluir el botón mediante una función

Las personalizaciones de código en Hestia se hacen a través de funciones. Ya no es posible reemplazar las plantillas del tema con sus equivalentes en el tema hijo, como hacíamos con Zerif.

Hestia ha incluido a partir de la versión 1.1.39 los útiles hooks, que nos permiten mostrar contenido adicional mediante funciones personalizadas.

Para añadir un segundo botón, bastará con usar la siguiente función:

function hestia_child_second_button() {
?>
<a href="#" title="Título del enlace" class="btn btn-primary btn-lg">Texto del botón</a>
<?php }
add_action( 'hestia_big_title_section_buttons', 'hestia_child_second_button' );

Quedando el código completo del archivo functions.php de la siguiente manera:

<?php
if ( !defined( 'ABSPATH' ) ) exit;

if ( !function_exists( 'hestia_child_parent_css' ) ):
 function hestia_child_parent_css() {
 wp_enqueue_style( 'hestia_child_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap' ) );
 if( is_rtl() ) {
 wp_enqueue_style( 'hestia_child_parent_rtl', trailingslashit( get_template_directory_uri() ) . 'style-rtl.css', array( 'bootstrap' ) );
 }
 }
endif;
add_action( 'wp_enqueue_scripts', 'hestia_child_parent_css', 10 );

function hestia_child_get_parent_options() {
 $hestia_mods = get_option( 'theme_mods_hestia' );
 if ( ! empty( $hestia_mods ) ) {
 foreach ( $hestia_mods as $hestia_mod_k => $hestia_mod_v ) {
 set_theme_mod( $hestia_mod_k, $hestia_mod_v );
 }
 }
}
add_action( 'after_switch_theme', 'hestia_child_get_parent_options' );

function hestia_child_second_button() {
?>
<a href="#" title="Título del enlace" class="btn btn-lg">Texto del botón</a>
<?php }
add_action( 'hestia_big_title_section_buttons', 'hestia_child_second_button' );

Reemplazamos el símbolo # por el enlace completo, la etiqueta title (opcional) y el Texto del botón por el texto que queremos mostrar.

Hestia - Segundo botón

Por último, podemos usar los estilos que incluye el tema para darle otro color al botón, añadiendo la clase correspondiente en el atributo class:

<a href="#" title="Título del enlace" class="btn btn-white btn-lg">Texto del enlace</a>

En el ejemplo, agregamos la clase btn-white y el resultado será el siguiente:

Hestia - Botón blanco

En el caso de querer usar colores personalizados, agregar una clase nueva, por ejemplo btn-custom y usarla en la hoja de estilos style.css del tema hijo para darle los valores deseados. Por ejemplo, para un color negro:

.btn-custom {
    background: #000;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.btn-custom:hover {
    background: #000;
    -webkit-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

Hestia - Botón personalizado

Dejo a disposición el tema hijo, con los archivos modificados tal como se explica en este tutorial: descargar. (Instalar desde Apariencia > Temas > Añadir nuevo > Subir tema).

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)