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.
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:
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);
}
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).
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola. Saludos y muy buenos temas. Gracias por ellos me ha ayudado mucho. Me gustaria saber que tendría que hacer para que la seccion Subscribe luzca igual que la seccion ribbon o sea que me permita un boton con enlace pero ubicado ala izquierda. Gracias de nuevo…
Hola, Yosdany.
Podés usar el siguiente CSS para cambiar la distribución de la sección:
@media (min-width: 992px) { #subscribe .col-md-offset-2 { margin-left:0%; } #subscribe .col-md-8 { width: 100%; } #subscribe .text-center { text-align: left; } #subscribe h2 { float: left; margin-top: 0; } #subscribe h5 { float: right; margin-top: 0; } }Y en el campo del subtítulo podés pegar el código HTML de un botón:
Saludos.
Buenas tardes, si activo el tema hijo, la página web me entra en erros ya que no teme Hestia principal deja de estar activo. Cmo puedo solucionar este error? Muchas gracias.
Hola, Sergio!
Gracias por tu comentario.
¿Cuál es el error exactamente? Tendrías que revisar que el código está copiado tal cual, ya que una comilla mal colocada o un punto y coma faltante pueden ocasionar errores.
Saludos.
Hola! instalé el tema hijo de Hestia pero sigo sin poder modificar el botón porque en el personalizador de Hestia solo me aparece para modificar el primer botón, y no el añadido. que sigue diciendo ” TEXTO DEL BOTÓN” me ayudas? Muy buen blog, muy útil!
Hola, Micaela.
Gracias por tu comentario.
El contenido del botón se edita directamente desde el código, no aparece en el personalizador. Tenés que abrir el archivo
functions.phpcon un editor de texto y modificar los datos en la línea<a href="#" title="Título del enlace" class="btn btn-lg">Texto del botón</a>como se indica en este tutorial.Saludos.
Hola.
Como se activa el tema hijo?
Hola, Dolores.
Apariencia > Temas, botón Activar del tema hijo.
Saludos.
Hola Aye,
Primeramente, darte infinitas gracias por compartir tus conocimientos.
Mi pregunta es:
Si Orfeo es un tema hijo de Hestia, ¿Puedo instalar un tema hijo de Orfeo? Cómo puedo replicar el style.css, functions.php y el header.php para hacer modificaciones.
Ando aún en la versión free testeando.
Gracias.
Hola, Vir.
Gracias por tu comentario. 🙂
Orfeo ya es el tema hijo de Hestia, así que podés hacer las modificaciones directamente en los archivos de esa carpeta.
Aquí la salvedad es que es un tema hijo que se descarga desde el repositorio de WordPress, por lo que si se aplica alguna actualización, se sobrescribirán tus cambios. No es muy frecuente que se actualice un tema hijo, pero siempre hay una remota probabilidad.
Para estar segura, simplemente duplicá la carpeta
/orfeo/en tu servidor con todo su contenido, cambiale el nombre a esa carpeta (por cualquier otro de tu preferencia, puede ser/orfeo-child/sin problemas), y cambiá también el nombre del tema en el archivostyle.css(la primera línea,Theme Name: Orfeo), así podés identificarlo en la sección Apariencia > Temas. Luego activás este tema nuevo y hacés todas las modificaciones necesarias en los archivos de esa nueva carpeta.Saludos.
hola excelente blog, quisiera saber si se puede hacer un tema hijo para el tema de Shop Isle
Hola, Gabriel.
Gracias por tu comentario. Se puede crear un tema hijo de cualquier tema. En el caso de ShopIsle, la manera recomendada está explicada aquí.
Saludos.
Hola que bueno esta tu blog,
Quisiera saber si existe alguna otra manera de reordenar las secciones en Hestia Free sin tener que pasar a la opcion de pago.
Se puede eliminar o ocultar la seccion de titulo grande ?
Gracias
Hola, Vlad.
Gracias por tu comentario.
Como le respondí a otro usuario, no hay un método sencillo para lograrlo vía personalización. Podés usar los hooks, que están listados en este tutorial, para agregar contenido entre secciones.
La sección de título grande se puede ocultar dejando todos los campos vacíos y eliminando la imagen de fondo, pero el menú quedaría superpuesto al contenido. Para separarlo, tendrías que usar el siguiente código:
.main-raised { margin-top: 100px; }Saludos.
Hola, gracias por tu ayuda…como puedo quitar el segundo boton en el Tema ORFEO? me aparece en la sección de titulo pero no lo puedo editar ni quitar! Gracias
Hola, Antonio.
Aparentemente es un error del tema, que los autores deberían corregir. Hasta que eso suceda, podés ocultarlo con el siguiente código CSS:
.btn-right { display: none; }Saludos.
Hola, estoy trabajando en el tema orfeo, quiero saber como puedo poner texto en el segundo botón y dirigirlo a una pagina cuando la persona de clic en el, es que solo veo la opción de configurar el primer botón, y quiero configurar el segundo botón también, muchas gracias.
Hola, Daniel.
La respuesta es la misma que esta.
Funcionó hasta la actualización de Hestia 1.1.78, donde cambiaron el código. Habrá que esperar hasta que ThemeIsle lo resuelva.
Saludos.
hola, no estoy buscando eliminar el segundo botón, lo que quiero es agregar texto en el, gracias
Hola, Daniel.
Ayer salió la actualización de Hestia que corrige el problema.
Saludos.
Hola, he creado el Hestia Child, y he reemplazado los codigos de functions.php y de style.css y no me aparece el segundo boton… se te ocurre por qué puede pasar?
Hola, Fernando.
¿Activaste el tema hijo?
Saludos.
Hola, gracias por la respuesta. Efectivamente era eso, me faltaba activarlo.
Me tomo el atrevimiento de hacerte otra consulta, estoy modificando la cantidad de articulos por linea desde apariencia, y no surge ningún efecto. Siempre muestra 3 productos independientemente la cantidad de articulos que ponga. Sabes por qué puede ser?
Hola, Fernando.
La opción de WooCommerce Productos por fila solo funciona si no activaste la barra lateral para las páginas en Hestia. Supongo que es una cuestión de diseño del tema, porque con cuatro productos por fila más la barra lateral, el espacio quedaría muy reducido. Creo que de todas maneras debería funcionar con menos filas (dos o una), pero eso es algo que deberían responder los autores de Hestia.
Saludos.
¡Qué velocidad!
Mil gracias por tu respuesta. Sin embargo he probado todo lo que me decías, investigado por otras webs, hecho variantes… y no ha funcionado. Parece que el tema es más complicado de lo que parece. Por si te interesa, una persona ya lo planteó hace unos meses.
https://wordpress.org/support/topic/overrinding-a-file-in-sub-folder-with-my-child-theme/
Su solución funciona, pero solo parcialmente, pues deshabilita otras funcionalidades.
De nuevo, mil gracias. Estoy en deuda contigo
Hola, Jacobo.
El código funciona, fijate que lo estés colocando correctamente. Si usás un plugin, es posible que tengas que eliminar las etiquetas
<script></script>.Saludos.
En primer lugar, enhorabuena por tu blog.
No tengo ni la más mínima idea de programación y aun así me ha parecido razonablemente intuitivo lo que explicas. No es sencillo lograr eso, así que, de nuevo, enhorabuena.
Yo uso otro tema “hermano” de Hestia, el Shop Isle. Pese a que intenté extrapolar tu código a mi tema, no funciona lo de añadir el segundo botón. Me preguntaba si tenías pensado escribir tutoriales sobre este tema que te comento.
Un saludo.
Hola, Jacobo.
Gracias por tu comentario.
El método explicado en esta entrada no sirve para ShopIsle, ya que este tema no incluye hooks personalizados. Sin embargo, con jQuery se puede “adosar” código dentro del contenedor. Sería algo así:
<script> jQuery(document).ready(function($){ $(".home .hero-slider .caption-content").append('<a href="https://su-sitio-wordpress.com/boton/" title="Botón 2" class="section-scroll btn btn-border-w btn-round" style="margin-left:10px;">Texto del botón 2</a>'); }); </script>Podés usar un plugin para código JS personalizado, o si estás usando un tema hijo, incluirlo dentro de una función para imprimir en el pie de página:
add_action('wp_footer', 'shopisle_child_button'); function shopisle_child_button() { ?> <script> jQuery(document).ready(function($){ $(".home .hero-slider .caption-content").append('<a href="https://su-sitio-wordpress.com/boton/" title="Botón 2" class="section-scroll btn btn-border-w btn-round" style="margin-left:10px;">Texto del botón 2</a>'); }); </script> <?php }Espero que te sirva.
Saludos.
Me gustaria saber como puedo añadir una seccion para añadir simplemente texto, un par de h1 y parrafos. Por ejemplo antes de la sección de contacto
Hola, Pep.
Quizá quieras echarle un vistazo a este tutorial. Allí está la lista de hooks que podés usar para agregar contenido HTML entre secciones.
Para mantener el formato, conviene usar los
divy las clases de las secciones existentes. Por ejemplo, para un título y un subtítulo antes de la sección Contacto:function hestia_child_custom_html() { ?> <section id="mi-seccion-personalizada" class="hestia-features"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h2 class="hestia-title">Mi título personalizado</h2> <h5 class="description">El contenido del subtítulo personalizado</h5> </div> </div> </div> </section> <?php } add_action( 'hestia_before_contact_section_hook', 'hestia_child_custom_html' );Espero que te sirva.
Saludos.
Buenas Tardes,
Quisiera saber como hago para que en el tema de hestia me salga como carrusel de imágenes en el inicio, es decir que no solo salga una imagen Título grande si no como un slider..
Agradecería tu respuesta y ayuda
Hola, Farith.
El carrusel en la sección de título grande solo está disponible en la versión Pro. Se puede reemplazar la sección con un plugin y algunos ajustes (usando un tema hijo); es un tutorial que tengo pendiente. 😕
Saludos.
Estimados:
Muchas gracias por el tutorial, ahora mi consulta es mucho más simple, como hago para que las imagenes de la slider, se vean del mismo color y no se les coloque como una capa encima y oscurezca la imagen???se entiende??
Hola, Agustín.
Usá el siguiente código:
.header-filter:before { background-color: transparent; }Saludos.
Hola,
Tengo Hestia instalado en mi web y seguí este tutorial para añadir el segundo botón a la sección de título grande. Es la única modificación que hice en el tema hijo.
Todo funcionaba correctamente hasta que ahora de repente me encuentro con que esa sección directamente no se ve y la web empieza con About-us con el menú superpuesto.
¿Tienes alguna idea de qué habrá podido pasar? No he tocado nada desde la última vez que funcionó
Hola, Pedro.
Si el tema se actualizó a una versión superior a la 1.1.40 este código no funciona. Tendrías que borrar por completo la función
hestia_big_title()defunctions.phppara recuperar la sección.Una alternativa sencilla sería usar jQuery, pero todo el código debe ir dentro de la función. Ejemplo:
function hestia_second_button() { ?> <script language="JavaScript" type="text/javascript"> jQuery(document).ready(function($){ $(".buttons").append('<a href="https://su-sitio-wordpress.com/boton/" title="Botón 2" class="btn btn-white btn-lg" target="_blank">Botón 2</a>'); }); </script> <?php } add_action( 'wp_footer', 'hestia_second_button' );Editá la URL, el texto del botón y las clases a tu conveniencia.
Saludos.
De verdad, muchisimas gracias!!!!! he seguido tus tutoriales desde el tema Zerif. Saludos desde Venezuela y gracias por contribuir y ayudarnos con tus conocimientos
Hola Aye, gracias por compartir tus conocimientos.
Te pregunto si tenés idea de como hacer para que los links en los testimonials y en los enlaces de “Team” de Hestia se abran pero en una pestaña nueva.
Sé cuál es la instruccion html que hace esa acción, pero no sé dónde debo colocarla.
Gracias de antemano.
Saludos.
Hola, Guido.
Gracias por tu comentario.
Tendrías que usar un tema hijo, y en el archivo
functions.phpagregar el siguiente código:function hestia_child_target() { if ( is_front_page() ) { ?> <script type="text/javascript"> jQuery(document).ready(function($){ $('.card-profile a').attr('target','_blank'); $('.card-testimonial a').attr('target','_blank'); }); </script> <?php } } add_action( 'wp_footer', 'hestia_child_target' );Saludos.