Hestia: ¿Cómo añadir un segundo botón en la sección de título grande?

39 comentarios

Hestia - Tutoriales

Por: Caribdis.Net

Publicada: 12 de julio de 2017

En: Hestia

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).

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

39 Comentarios

  1. Yosdany

    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…

    Responder
    • Caribdis.Net

      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:

      <a href="#" class="btn btn-md btn-primary hestia-subscribe-button">Texto del botón</a>
      

      Saludos.

      Responder
  2. sergio

    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.

    Responder
    • Caribdis.Net

      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.

      Responder
  3. Micaela

    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!

    Responder
    • Caribdis.Net

      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.php con 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.

      Responder
  4. Dolores

    Hola.

    Como se activa el tema hijo?

    Responder
    • Caribdis.Net

      Hola, Dolores.

      Apariencia > Temas, botón Activar del tema hijo.

      Saludos.

      Responder
  5. Vir Gómez

    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.

    Responder
    • Caribdis.Net

      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 archivo style.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.

      Responder
  6. gabriel salmeron

    hola excelente blog, quisiera saber si se puede hacer un tema hijo para el tema de Shop Isle

    Responder
    • Caribdis.Net

      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.

      Responder
  7. Vlad

    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

    Responder
    • Caribdis Diseño Web

      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.

      Responder
  8. antonio ar

    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

    Responder
    • Caribdis Diseño Web

      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.

      Responder
      • Daniel Galeano

        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.

        Responder
        • Caribdis Diseño Web

          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.

          Responder
          • Daniel Galeano

            hola, no estoy buscando eliminar el segundo botón, lo que quiero es agregar texto en el, gracias

          • Caribdis Diseño Web

            Hola, Daniel.

            Ayer salió la actualización de Hestia que corrige el problema.

            Saludos.

  9. Fernando

    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?

    Responder
    • Caribdis Diseño Web

      Hola, Fernando.

      ¿Activaste el tema hijo?

      Saludos.

      Responder
      • Fernando Isa Pavía

        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?

        Responder
        • Caribdis Diseño Web

          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.

          Responder
  10. Jacobo Feijóo

    ¡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

    Responder
    • Caribdis Diseño Web

      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.

      Responder
  11. Jacobo Feijóo

    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.

    Responder
    • Caribdis Diseño Web

      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.

      Responder
  12. Pep

    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

    Responder
    • Caribdis Diseño Web

      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 div y 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.

      Responder
  13. Farith Lara

    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

    Responder
    • Caribdis Diseño Web

      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.

      Responder
  14. Agustín

    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??

    Responder
    • Caribdis Diseño Web

      Hola, Agustín.

      Usá el siguiente código:

      .header-filter:before {
          background-color: transparent;
      }
      

      Saludos.

      Responder
  15. Pedro

    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ó

    Responder
    • Caribdis Diseño Web

      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() de functions.php para 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.

      Responder
  16. Edwin

    De verdad, muchisimas gracias!!!!! he seguido tus tutoriales desde el tema Zerif. Saludos desde Venezuela y gracias por contribuir y ayudarnos con tus conocimientos

    Responder
  17. GUIDO JOSE ALBORNOZ

    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.

    Responder
    • Caribdis Diseño Web

      Hola, Guido.

      Gracias por tu comentario.

      Tendrías que usar un tema hijo, y en el archivo functions.php agregar 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.

      Responder

Enviar comentario

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!