Atención: este tutorial solo aplica hasta la versión 1.1.40 y anteriores.

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
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array( 'bootstrap' ) );
}
if ( get_stylesheet() !== get_template() ) {
 add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
 update_option( 'theme_mods_' . get_template(), $value );
 return $old_value; // prevent update to child theme mods
 }, 10, 2 );
 add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
 return get_option( 'theme_mods_' . get_template(), $default );
 } );
}

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 la función correspondiente a la secció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.

Así es que vamos a trasladar la función hestia_big_title() a nuestro archivo functions.php, el cual quedará de la siguiente manera:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array( 'bootstrap' ) );
}

if ( get_stylesheet() !== get_template() ) {
 add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
 update_option( 'theme_mods_' . get_template(), $value );
 return $old_value; // prevent update to child theme mods
 }, 10, 2 );
 add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
 return get_option( 'theme_mods_' . get_template(), $default );
 } );
}
function hestia_big_title() {
 ?>
 <div id="carousel-hestia-generic" class="carousel slide" data-ride="carousel">
 <div class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
 <?php

if ( current_user_can( 'edit_theme_options' ) ) {
 /* translators: 1 - link to customizer setting. 2 - 'customizer' */ $hestia_big_title_title = get_theme_mod( 'hestia_big_title_title', sprintf( esc_html__( 'Change in %s','hestia' ), sprintf( '<a href="%1$s" class="default-link">%2$s</a>', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=hestia_big_title_title' ) ), __( 'Customizer','hestia' ) ) ) );
 /* translators: 1 - link to customizer setting. 2 - 'customizer' */ $hestia_big_title_text = get_theme_mod( 'hestia_big_title_text', sprintf( esc_html__( 'Change this subtitle in %s.','hestia' ), sprintf( '<a href="%1$s" class="default-link">%2$s</a>', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=hestia_big_title_text' ) ), __( 'Customizer','hestia' ) ) ) );
 $hestia_big_title_button_text = get_theme_mod( 'hestia_big_title_button_text', esc_html__( 'Change in the Customizer', 'hestia' ) );
 $hestia_big_title_button_link = get_theme_mod( 'hestia_big_title_button_link', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=hestia_big_title_button_text' ) ) );
 } else {
 $hestia_big_title_title = get_theme_mod( 'hestia_big_title_title' );
 $hestia_big_title_text = get_theme_mod( 'hestia_big_title_text' );
 $hestia_big_title_button_text = get_theme_mod( 'hestia_big_title_button_text' );
 $hestia_big_title_button_link = get_theme_mod( 'hestia_big_title_button_link' );
 }
 $hestia_big_title_background = get_theme_mod( 'hestia_big_title_background', get_template_directory_uri() . '/assets/img/slider2.jpg' );

if ( ! empty( $hestia_big_title_background ) || ! empty( $hestia_big_title_title ) || ! empty( $hestia_big_title_text ) || ( ! empty( $hestia_big_title_button_text ) && ! empty( $hestia_big_title_button_link ) ) ) { ?>
 <div class="item active">
 <div class="page-header header-filter" <?php if ( ! empty( $hestia_big_title_background ) ) { echo 'style="background-image: url(' . esc_url( $hestia_big_title_background ) . ')"';} ?>>
 <?php
 if ( is_customize_preview() ) { ?>
 <div class="big-title-image"></div>
 <?php
 }?>
 <div class="container">
 <div class="row">
 <div class="col-md-8 col-md-offset-2 text-center">
 <?php if ( ! empty( $hestia_big_title_title ) ) { ?>
 <h1 class="hestia-title"><?php echo wp_kses_post( $hestia_big_title_title ); ?></h1>
 <?php } ?>
 <?php if ( ! empty( $hestia_big_title_text ) ) { ?>
 <span class="sub-title"><?php echo wp_kses_post( $hestia_big_title_text ); ?></span>
 <?php } ?>
 <?php if ( ! empty( $hestia_big_title_button_link ) && ! empty( $hestia_big_title_button_text ) ) { ?>
 <div class="buttons">
 <a href="<?php echo esc_url( $hestia_big_title_button_link ); ?>" title="<?php echo esc_html( $hestia_big_title_button_text ); ?>"
 class="btn btn-primary btn-lg"><?php echo esc_html( $hestia_big_title_button_text ); ?></a>
 </div>
 <?php } ?>
 </div>
 </div>
 </div>
 </div>
 </div>
 <?php
 } ?>
 </div>
 </div>
 </div>
 </div>
 <?php
 }

Hasta aquí no hemos hecho nada más que usar la función tal como existe en Hestia, por lo cual no veremos ningún cambio aún.

Paso 3: Editar la función para agregar el segundo botón

Tenemos dos opciones para agregar el segundo botón. La primera es incluir el código completo, con el texto y el enlace. Esto sería lo más sencillo y rápido, con el único inconveniente de que cada vez que necesitemos editarlo, tendremos que modificar el archivo.

Lo que haremos aquí será incluir, justo a continuación de esta línea:

<a href="<?php echo esc_url( $hestia_big_title_button_link ); ?>" title="<?php echo esc_html( $hestia_big_title_button_text ); ?>"
   class="btn btn-primary btn-lg"><?php echo esc_html( $hestia_big_title_button_text ); ?></a>

El siguiente código:

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

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

La segunda opción requiere un poco más de código, pero nos dará la posibilidad de incluir los campos para el segundo botón en el personalizador. De esta manera, tendremos más comodidad a la hora de editarlo.

El contenido del archivo functions.php deberá ser el siguiente:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array( 'bootstrap' ) );
}

if ( get_stylesheet() !== get_template() ) {
 add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
 update_option( 'theme_mods_' . get_template(), $value );
 return $old_value; // prevent update to child theme mods
 }, 10, 2 );
 add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
 return get_option( 'theme_mods_' . get_template(), $default );
 } );
}

function caribdis_customizer( $wp_customize ) {
 $wp_customize->add_setting( 'hestia_big_title_button2_text', array(
 'sanitize_callback' => 'sanitize_text_field',
 'transport' => 'refresh',
 ) );
 $wp_customize->add_control( 'hestia_big_title_button2_text', array(
 'label' => esc_html__( 'Texto del botón 2', 'hestia' ),
 'section' => 'hestia_big_title',
 'priority' => 35,
 ) );
 $wp_customize->add_setting( 'hestia_big_title_button2_link', array(
 'sanitize_callback' => 'esc_url_raw',
 'transport' => 'refresh',
 ) );
 $wp_customize->add_control( 'hestia_big_title_button2_link', array(
 'label' => esc_html__( 'URL del botón 2', 'hestia' ),
 'section' => 'hestia_big_title',
 'priority' => 40,
 ) );
}
add_action( 'customize_register', 'caribdis_customizer' );

function hestia_big_title() {
 ?>
 <div id="carousel-hestia-generic" class="carousel slide" data-ride="carousel">
 <div class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
 <?php

if ( current_user_can( 'edit_theme_options' ) ) {
 /* translators: 1 - link to customizer setting. 2 - 'customizer' */ $hestia_big_title_title = get_theme_mod( 'hestia_big_title_title', sprintf( __( 'Change in %s','hestia' ), sprintf( '<a href="%1$s" class="default-link">%2$s</a>', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=hestia_big_title_title' ) ), __( 'Customizer','hestia' ) ) ) );
 /* translators: 1 - link to customizer setting. 2 - 'customizer' */ $hestia_big_title_text = get_theme_mod( 'hestia_big_title_text', sprintf( __( 'Change this subtitle in %s.','hestia' ), sprintf( '<a href="%1$s" class="default-link">%2$s</a>', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=hestia_big_title_text' ) ), __( 'Customizer','hestia' ) ) ) );
 $hestia_big_title_button_text = get_theme_mod( 'hestia_big_title_button_text', __( 'Change in the Customizer', 'hestia' ) );
 $hestia_big_title_button_link = get_theme_mod( 'hestia_big_title_button_link', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=hestia_big_title_button_text' ) ) );
 $hestia_big_title_button2_text = get_theme_mod( 'hestia_big_title_button2_text', __( 'Change in the Customizer', 'hestia' ) );
 $hestia_big_title_button2_link = get_theme_mod( 'hestia_big_title_button2_link', esc_url( admin_url( 'customize.php?autofocus&#91;control&#93;=hestia_big_title_button2_text' ) ) );
 } else {
 $hestia_big_title_title = get_theme_mod( 'hestia_big_title_title' );
 $hestia_big_title_text = get_theme_mod( 'hestia_big_title_text' );
 $hestia_big_title_button_text = get_theme_mod( 'hestia_big_title_button_text' );
 $hestia_big_title_button_link = get_theme_mod( 'hestia_big_title_button_link' );
 $hestia_big_title_button2_text = get_theme_mod( 'hestia_big_title_button2_text' );
 $hestia_big_title_button2_link = get_theme_mod( 'hestia_big_title_button2_link' );
 }
 $hestia_big_title_background = get_theme_mod( 'hestia_big_title_background', get_template_directory_uri() . '/assets/img/slider2.jpg' );

if ( ! empty( $hestia_big_title_background ) || ! empty( $hestia_big_title_title ) || ! empty( $hestia_big_title_text ) || ( ! empty( $hestia_big_title_button_text ) && ! empty( $hestia_big_title_button_link ) ) ) { ?>
 <div class="item active">
 <div class="page-header header-filter" <?php if ( ! empty( $hestia_big_title_background ) ) { echo 'style="background-image: url(' . esc_url( $hestia_big_title_background ) . ')"';} ?>>
 <?php
 if ( is_customize_preview() ) { ?>
 <div class="big-title-image"></div>
 <?php
 }?>
 <div class="container">
 <div class="row">
 <div class="col-md-8 col-md-offset-2 text-center">
 <?php if ( ! empty( $hestia_big_title_title ) ) { ?>
 <h2 class="title"><?php echo wp_kses_post( $hestia_big_title_title ); ?></h2>
 <?php } ?>
 <?php if ( ! empty( $hestia_big_title_text ) ) { ?>
 <span class="sub-title"><?php echo wp_kses_post( $hestia_big_title_text ); ?></span>
 <?php } ?>
 <?php if ( ! empty( $hestia_big_title_button_link ) || ! empty( $hestia_big_title_button_text ) ) { ?>
 <div class="buttons">
 <a href="<?php echo esc_url( $hestia_big_title_button_link ); ?>" title="<?php echo esc_html( $hestia_big_title_button_text ); ?>"
 class="btn btn-primary btn-lg"><?php echo esc_html( $hestia_big_title_button_text ); ?></a>
 <?php if ( ! empty( $hestia_big_title_button2_link ) || ! empty( $hestia_big_title_button2_text ) ) { ?> 
 <a href="<?php echo esc_url( $hestia_big_title_button2_link ); ?>" title="<?php echo esc_html( $hestia_big_title_button2_text ); ?>"
 class="btn btn-lg"><?php echo esc_html( $hestia_big_title_button2_text ); ?></a>
 <?php } ?>
 </div>
 <?php } ?>
 </div>
 </div>
 </div>
 </div>
 </div>
 <?php
 } ?>
 </div>
 </div>
 </div>
 </div>
 <?php
 }

Y ahora sí veremos la opción del segundo botón dentro del personalizador, en Secciones de la página de inicio > Sección de título grande.

Hestia - Segundo botón en el personalizador

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="<?php echo esc_url( $hestia_big_title_button2_link ); ?>" title="<?php echo esc_html( $hestia_big_title_button2_text ); ?>"
   class="btn btn-white btn-lg"><?php echo esc_html( $hestia_big_title_button2_text ); ?></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)