---
title: "Hestia: ¿Cómo añadir contenido entre secciones?"
url: https://caribdis.net/2017/07/28/hestia-como-anadir-contenido-entre-secciones/
date: 2017-07-28
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Actualizado para la versión 1.1.39 y superiores. Hace un par de semanas inauguramos la serie de tutoriales correspondientes al tema gratuito Hestia, de ThemeIsle, que está teniendo gran aceptación por..."
categories:
  - "Hestia"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "tutorial"
  - "WooCommerce"
  - "WordPress"
image: https://caribdis.net/wp-content/uploads/2017/07/hestia-tutoriales.jpg
word_count: 1987
---

# Hestia: ¿Cómo añadir contenido entre secciones?

** Actualizado para la versión 1.1.39 y superiores.
Hace un par de semanas inauguramos la serie de tutoriales correspondientes al tema gratuito **Hestia,** de **[ThemeIsle](https://caribdis.link/ThemeIsle),** que está teniendo gran aceptación por parte de los usuarios y se ha convertido en el principal producto de esta fábrica de temas y plugins para **WordPress.**

En esta segunda entrega, vamos a aprender a agregar secciones o contenido nuevo a continuación de cada sección predeterminada.

Como ya habíamos comentado, las personalizaciones de código en **Hestia** se hacen a través de funciones. Esto requiere un conocimiento básico de PHP y al menos un dominio intermedio de HTML. Por lo tanto, antes de dejarles la solución servida ;) no está de más animarlos a hacer algún tutorial sobre estos dos lenguajes. [Google](https://www.google.com/search?q=tutoriales+html+php) es vuestro amigo. :)

### Paso 1: Crear un tema hijo

Este paso **no** es opcional, ya que con **Hestia** es estrictamente necesario un tema hijo para modificar código. Las instrucciones para crearlo se encuentran en [esta entrada](https://caribdis.net/2017/07/12/hestia-como-anadir-un-segundo-boton-en-la-seccion-de-titulo-grande/) anterior.

### Paso 2: Crear la función con el código del contenido personalizado

**Hestia** incluye las siguientes secciones: *Título grande*, *Características*, *Quiénes somos*, *Tienda*, *Equipo*, *Testimonios*, *Suscribirse*, *Blog* y *Contacto*. A partir de la versión 1.1.39 de Hestia se incluyeron numerosos *hooks*, que nos permitirán mostrar contenido adicional mediante funciones personalizadas.

Vamos a usar un ejemplo simple, como crear un botón con un enlace. En las secciones *Tienda* y *Blog*, solo tenemos la opción de mostrar los últimos productos y entradas. Si tenemos muchos, no vamos a querer que aparezcan todos juntos en la portada. Pero sería útil añadir un enlace “Ver más” para facilitar la navegación.

Empecemos por la sección de la tienda. Creamos el código dentro de una función, que pegaremos en nuestro archivo `functions.php` a continuación del código existente:
function hestia_child_shop_more() {
?>
<div class="text-center">
<a class="btn btn-primary" href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" role="button">Ver todos los productos</a>
</div>
<?php
}

### Paso 3: Imprimir el código mediante el hook

La función anterior no hace nada por sí sola, más que contener el código HTML que debería mostrarse a continuación de la sección *Tienda*. Ahora nada más falta mostrarlo. Pegamos a continuación el siguiente código:
add_action( 'hestia_after_shop_section_content_hook', 'hestia_child_shop_more' );
Así se verá una vez activado el tema hijo:

![Hestia - Botón "Ver más productos"](https://caribdis.net/wp-content/uploads/2017/07/hestia-boton-tienda-hook.jpg)

Y no hace falta agregar nada más. ¡Genial!

El código completo para el botón del blog será el siguiente:
function hestia_child_blog_more() {
?>
<div>
<a href="<?php echo get_permalink( get_option( 'page_for_posts' ) ); ?>" role="button">Ver todas las entradas</a>
</div>
<?php
}
add_action( 'hestia_after_blog_section_content_hook', 'hestia_child_blog_more' );
![Hestia - Botón "Ver más entradas"](https://caribdis.net/wp-content/uploads/2017/07/hestia-boton-blog-hook.jpg)

Dos cositas más para tener en cuenta: el contenido del enlace para estas dos páginas está generado con PHP, pero podemos reemplazarlo por cualquier URL específica si pegamos la dirección completa.

Por ejemplo, si tenemos una página que se llama “Ofertas” (y el slug es `ofertas`), el código para el botón será:
<a class="btn btn-primary" href="http://urldelsitio.com/ofertas/" role="button">Ver ofertas</a>
La clase `btn-primary` que asignamos es para que use el color de acento configurado en las opciones del personalizador de tema. Se pueden usar las clases que incluye **Hestia** (ver [entrada anterior](https://caribdis.net/2017/07/12/hestia-como-anadir-un-segundo-boton-en-la-seccion-de-titulo-grande/)), o usar clases personalizadas para aplicar los estilos necesarios desde el archivo `style.css`.

Por último, este procedimiento sirve también para crear secciones enteras y no simplemente un enlace o botón. Y es igualmente útil para incluir códigos abreviados que genere algún plugin. Todo el código debe estar contenido en una función, y esa función tendrá salida en la página mediante los correspondientes *hooks*.

Como último ejemplo, veamos cómo agregar una sección con un título y un vídeo de **YouTube,** antes de la sección *Contacto*. La función será algo como esto:
function hestia_child_video_section() {
?>
<section>
<div>
<div>
<div>
<h2>Mi sección con vídeo</h2> <!-- El título es opcional; se puede borrar esta línea y quedará solo el vídeo -->
<div><iframe src="https://www.youtube.com/embed/BFypUvVjZik?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>
</div>
</div>
</section>
<?php
}
add_action( 'hestia_before_contact_section_hook', 'hestia_child_video_section' );
Para que el reproductor de vídeo se muestre de manera totalmente *responsive,* vamos a usar el siguiente código en el archivo `style.css`:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

El resultado:

![Hestia - Sección vídeo](https://caribdis.net/wp-content/uploads/2017/07/hestia-seccion-video.jpg)

El código que va dentro del `div` `video-container` será el que nos dará **YouTube** para incrustar el reproductor (los parámetros son opcionales, y conviene suprimir los valores de `width` y `height` para que se visualice mejor en todos los dispositivos):

![Hestia - Incrustar vídeo de YouTube](https://caribdis.net/wp-content/uploads/2017/07/hestia-embed-video.png)

Y no está de más recordar la estructura de la función para introducir contenidos entre secciones:

[![Hestia - Estructura de función](https://caribdis.net/wp-content/uploads/2017/07/hestia-funcion-hook-1024x256.png)](https://caribdis.net/wp-content/uploads/2017/07/hestia-funcion-hook.png)

Y para añadir el contenido de un plugin mediante código abreviado, la sintaxis será algo como esto:
function hestia_child_shortcode_section() {
?>
<section>
<div>
<div>
<div>
<?php echo do_shortcode('[codigoplugin]'); ?>
</div>
</div>
</div>
</section>
<?php
}
add_action( 'hestia_before_features_section_hook', 'hestia_child_shortcode_section' );
Como referencia, estos son todos los *hooks* que se pueden usar:

Antes del área de la cabecera (menú de navegación)
Contexto HTML: antes de `header nav`
`'hestia_before_header_hook'`

Antes del contenido de la cabecera (menú de navegación)
Contexto HTML: antes de `header nav div.container`
`'hestia_before_header_content_hook'`

Antes del menú hamburguesa en dispositivos móviles
Contexto HTML: antes de `header nav button.navbar-toggle`
`'hestia_before_navbar_toggle_hook'`

Después del contenido de la cabecera (menú de navegación)
Contexto HTML: después de `header nav div.container`
`'hestia_after_header_content_hook'`

Después del área de la cabecera (menú de navegación)
Contexto HTML: después de `header nav`
`'hestia_after_header_hook'`

Antes del área del pie de página
Contexto HTML: antes de `footer`
`'hestia_before_footer_hook'`

Antes del contenido del área del pie de página
Contexto HTML: antes de `footer div.container`
`'hestia_before_footer_content_hook'`

Antes del área de widgets del pie de página
Contexto HTML: antes de `footer div.hestia-bottom-footer-content`
`'hestia_before_footer_widgets_hook'`

Después del área de widgets del pie de página
Contexto HTML: después de `footer div.hestia-bottom-footer-content`
`'hestia_after_footer_widgets_hook'`

Después del contenido del área del pie de página
Contexto HTML: después de` footer div.container`
`'hestia_after_footer_content_hook'`

Después del área del pie de página
Contexto HTML: después de `footer`
`'hestia_after_footer_hook'`

Antes de la sección de título grande / slider
Contexto HTML: antes de `div#carousel-hestia-generic`
`'hestia_before_big_title_section_hook'`

Antes del contenido de la sección de título grande / slider
Contexto HTML: antes de `div#carousel-hestia-generic div.container`
`'hestia_before_big_title_section_content_hook'`

Dentro del contenedor del título grande / slider
Contexto HTML: después de la apertura de `div#carousel-hestia-generic div.container`
`'hestia_top_big_title_section_content_hook'`

Antes del contenido de la sección de título grande / slider
Contexto HTML: antes de `div#carousel-hestia-generic div.container`
`'hestia_before_big_title_section_content_hook'`

Después del botón de la sección de título grande / slider
Contexto HTML: dentro de `div.big-title-content div.buttons`
`'hestia_big_title_section_buttons'`

En la parte inferior de la sección de título grande / slider
Contexto HTML: después del cierre de `div#carousel-hestia-generic div.container`
`'hestia_bottom_big_title_section_content_hook'`

Después del contenido de la sección de título grande / slider
Contexto HTML: después de `div#carousel-hestia-generic div.container`
`'hestia_after_big_title_section_content_hook'`

Después de la sección de título grande / slider
Contexto HTML: después de `div#carousel-hestia-generic`
`'hestia_after_big_title_section_hook'`

Antes de la sección *Equipo*
*Contexto* HTML: antes de `section.hestia-team`
`'hestia_before_team_section_hook'`

Antes del contenido de la sección *Equipo*
*Contexto* HTML: antes de `section.hestia-team div.container`
`'hestia_before_team_section_content_hook'`

En la parte superior de la sección *Equipo*
*Contexto* HTML: después de `section.hestia-team div.container`
`'hestia_top_team_section_content_hook'`

En la parte inferior de la sección *Equipo*
*Contexto* HTML: antes del cierre de `section.hestia-team div.container`
`'hestia_bottom_team_section_content_hook'`

Después del contenido de la sección *Equipo*
*Contexto* HTML: después de `section.hestia-team div.container`
`'hestia_after_team_section_content_hook'`

Después de la sección *Equipo*
*Contexto* HTML: después de `section.hestia-team`
`'hestia_after_team_section_hook'`

Antes de la sección *Características*
*Contexto* HTML: antes de `section.hestia-features`
`'hestia_before_features_section_hook'`

Antes del contenido de la sección *Características*
*Contexto* HTML: antes de `section.hestia-features div.container`
`'hestia_before_features_section_content_hook'`

En la parte superior del contenido de la sección *Características*
*Contexto* HTML: después de `section.hestia-features div.container`
`'hestia_top_features_section_content_hook'`

En la parte inferior del contenido de la sección *Características*
*Contexto* HTML: después del cierre de `section.hestia-features div.container`
`'hestia_bottom_features_section_content_hook'`

Después del contenido de la sección *Características*
*Contexto* HTML: después de `section.hestia-features div.container`
`'hestia_after_features_section_content_hook'`

Después de la sección *Características*
*Contexto* HTML: después de `section.hestia-features`
`'hestia_after_features_section_hook'`

Antes de la sección *Precios* (**[Hestia PRO](https://caribdis.link/HestiaPRO)**)
Contexto HTML: antes de `section.pricing`
`'hestia_before_pricing_section_hook'`

Antes del contenido de la sección *Precios* (**[Hestia PRO](https://caribdis.link/HestiaPRO)**)
Contexto HTML: antes de `section.pricing div.container`
`'hestia_before_pricing_section_content_hook'`

En la parte superior del contenido de la sección *Precios*
*Contexto* HTML: antes de `section.pricing div.container`
`'hestia_top_pricing_section_content_hook'`

En la parte inferior del contenido de la sección *Precios*
*Contexto* HTML: antes del cierre de `section.pricing div.container`
`'hestia_bottom_pricing_section_content_hook'`

Después del contenido de la sección *Precios* (**[Hestia PRO](https://caribdis.link/HestiaPRO)**)
Contexto HTML: después de `section.pricing div.container`
`'hestia_after_pricing_section_content_hook'`

Después de la sección *Precios* (**[Hestia PRO](https://caribdis.link/HestiaPRO)**)
Contexto HTML: después de `section.pricing`
`'hestia_after_pricing_section_hook'`

Antes de la sección *Quiénes somos*
Contexto HTML: antes de `section.hestia-about`
`'hestia_before_about_section_hook'`

Después de la sección *Quiénes somos*
Contexto HTML: después de `section.hestia-about`
`'hestia_after_about_section_hook'`

Antes de la sección *Tienda*
*Contexto* HTML: antes de `section.products`
`'hestia_before_shop_section_hook'`

Antes del contenido de la sección *Tienda*
*Contexto* HTML: antes de `section.products div.container`
`'hestia_before_shop_section_content_hook'`

En la parte superior del contenido de la sección *Tienda*
*Contexto* HTML: después de `section.products div.container`
`'hestia_top_shop_section_content_hook'`

En la parte inferior del contenido de la sección *Tienda*
*Contexto* HTML: antes del cierre de `section.products div.container`
`'hestia_bottom_shop_section_content_hook'`

Después del contenido de la sección *Tienda*
*Contexto* HTML: después de `section.products div.container`
`'hestia_after_shop_section_content_hook'`

Después de la sección *Tienda*
*Contexto* HTML: después de `section.products`
`'hestia_after_shop_section_hook'`

Antes de la sección *Testimonios*
*Contexto* HTML: antes de `section.hestia-testimonials`
`'hestia_before_testimonials_section_hook'`

Antes del contenido de la sección *Testimonios*
*Contexto* HTML: antes de `section.hestia-testimonials div.container`
`'hestia_before_testimonials_section_content_hook'`

En la parte superior del contenido de la sección *Testimonios*
*Contexto* HTML: después de `section.hestia-testimonials div.container`
`'hestia_top_testimonials_section_content_hook'`

En la parte inferior del contenido de la sección *Testimonios*
*Contexto* HTML: antes del cierre de `section.hestia-testimonials div.container`
`'hestia_bottom_testimonials_section_content_hook'`

Después del contenido de la sección *Testimonios*
*Contexto* HTML: después de `section.hestia-testimonials div.container`
`'hestia_after_testimonials_section_content_hook'`

Después de la sección *Testimonios*
*Contexto* HTML: después de `section.hestia-testimonials`
`'hestia_after_testimonials_section_hook'`

Antes de la sección *Suscribirse*
*Contexto* HTML: antes de `section.subscribe-line`
`'hestia_before_subscribe_section_hook'`

Antes del contenido de la sección *Suscribirse*
*Contexto* HTML: antes de `section.subscribe-line div.container`
`'hestia_before_subscribe_section_content_hook'`

En la parte superior del contenido de la sección *Suscribirse*
*Contexto* HTML: después de `section.subscribe-line div.container`
`'hestia_top_subscribe_section_content_hook'`

En la parte inferior del contenido de la sección *Suscribirse*
*Contexto* HTML: antes del cierre de `section.subscribe-line div.container`
`'hestia_bottom_subscribe_section_content_hook'`

Después del contenido de la sección *Suscribirse*
*Contexto* HTML: después de `section.subscribe-line div.container`
`'hestia_after_subscribe_section_content_hook'`

Después de la sección *Suscribirse*
*Contexto* HTML: después de `section.subscribe-line`
`'hestia_after_subscribe_section_hook'`

Antes de la sección *Blog*
*Contexto* HTML: antes de `section.hestia-blogs`
`'hestia_before_blog_section_hook'`

Antes del contenido de la sección *Blog*
*Contexto* HTML: antes de `section.hestia-blogs div.container`
`'hestia_before_blog_section_content_hook'`

En la parte superior del contenido de la sección *Blog*
*Contexto* HTML: después de `section.hestia-blogs div.container`
`'hestia_top_blog_section_content_hook'`

En la parte inferior del contenido de la sección *Blog*
*Contexto* HTML: antes del cierre de `section.hestia-blogs div.container`
`'hestia_bottom_blog_section_content_hook'`

Después del contenido de la sección *Blog*
*Contexto* HTML: después de `section.hestia-blogs div.container`
`'hestia_after_blog_section_content_hook'`

Después de la sección *Blog*
*Contexto* HTML: después de `section.hestia-blogs`
`'hestia_after_blog_section_hook'`

Antes de la sección *Contacto*
*Contexto* HTML: antes de `section.contactus`
`'hestia_before_contact_section_hook'`

Antes del contenido de la sección *Contacto*
*Contexto* HTML: antes de `section.contactus div.container`
`'hestia_before_contact_section_content_hook'`

En la parte superior del contenido de la sección *Contacto*
*Contexto* HTML: después de `section.contactus div.container`
`'hestia_top_contact_section_content_hook'`

En la parte inferior del contenido de la sección *Contacto*
*Contexto* HTML: antes del cierre de `section.contactus div.container`
`'hestia_bottom_contact_section_content_hook'`

Después del contenido de la sección *Contacto*
*Contexto* HTML: después de `section.contactus div.container`
`'hestia_after_contact_section_content_hook`'

Después de la sección *Contacto*
*Contexto* HTML: después de `section.contactus`
`'hestia_after_contact_section_hook'`

Antes de la sección *Portfolio* (**[Hestia PRO](https://caribdis.link/HestiaPRO)**)
Contexto HTML: antes de `section.hestia-work`
`'hestia_before_portfolio_section_hook'`

Antes del contenido de la sección *Portfolio* (**[Hestia PRO](https://caribdis.link/HestiaPRO)**)
*Contexto* HTML: antes de `section.hestia-work div.container`
`'hestia_before_portfolio_section_content_hook'`

En la parte superior del contenido de la sección *Portfolio* (**[Hestia PRO](https://caribdis.link/HestiaPRO)**)
*Contexto* HTML: después de `section.hestia-work div.container`
`'hestia_top_portfolio_section_content_hook'`

En la parte inferior del contenido de la sección *Portfolio* (**[Hestia PRO](https://caribdis.link/HestiaPRO)**)
*Contexto* HTML: antes del cierre de `section.hestia-work div.container`
`'hestia_bottom_portfolio_section_content_hook'`

Después del contenido de la sección *Portfolio* (**[Hestia PRO](https://caribdis.link/HestiaPRO)**)
*Contexto* HTML: después de section.`hestia-work div.container`
`'hestia_after_portfolio_section_content_hook'`

Después de la sección *Portfolio* (**[Hestia PRO](https://caribdis.link/HestiaPRO)**)
*Contexto* HTML: después de `section.hestia-work`
`'hestia_after_portfolio_section_hook'`

Antes de la sección *Barra de clientes*
*Contexto* HTML: después de `section.hestia-clients-bar div.container`
`'hestia_clients_bar_section_content_hook'`

Después de la sección *Barra de clientes*
*Contexto* HTML: después de `section.hestia-clients-bar`
`'hestia_after_clients_bar_section_hook'`

Antes de la sección *Cinta*
*Contexto* HTML: antes de `section.hestia-ribbon`
`'hestia_before_ribbon_section_hook'`

Después de la sección *Cinta*
*Contexto* HTML: después de `section.hestia-ribbon`
`'hestia_after_ribbon_section_hook'`

Si ha quedado alguna duda, con gusto se responderá en la sección de comentarios.