Crear zonas de widgets en Genesis Framework

En Genesis Framework es muy sencillo crear nuevas zonas de Widgets para acondicionar los contenidos de nuestra web. De hecho los childs theme de Genesis no dejan de ser plantillas con unas zonas de widgets predefinidas pensadas para dar forma a un módelo concreto de web (junto con su style.css correspondiente).

Usando Genesis Framework con su Sample Theme podemos dar forma a prácticamente cualquier tipo de web y las zonas de widgets nos pueden venir muy bien para estructurarla o dejarlas preparadas para que las usen nuestros clientes.

Registrar la zona de widget para la home

Primero debemos registrar una zona de widget, esto podemos hacerlo en el archivo de funciones (functions.php) del child-theme (nunca en el functions.php de Genesis).

//Registrar Widget Cabecera Home
genesis_register_sidebar(array(
	'id' => 'cabecera-home-widget-area',
	'name' => __('Cabecera Home', 'genesis'),
	'description' => __('Widget para la cabecera de la página principal', 'childtheme')
));

Como se trata de un widget que solamente queremos hacer visible en la página principal de la web, podemos crear un archivo front-page.php con este contenido:

<?php
//Mostrar Cabecera Home Widget Area
function cabecera_home_widget_area(){
    genesis_widget_area('cabecera-home-widget-area', array(
        'before' => '<section class="cabecera-home">',
        'after' => '</section>'
    ));
}
add_action('genesis_after_header', 'cabecera_home_widget_area');

genesis();
?>

Es muy importante especificar el mismo ID de sidebar que usamos al registrarlo ‘cabecera-home-widget-area’.

Nuestro widget irá dentro de una sección (<section>) con la clase CSS ‘cabecera-home’, de forma que podremos aplicarle estilos posteriormente.

En esta zona podemos agregar cualquier widget, ya dea de WordPress, de Genesis o un simple HTML personalizado para darle el formato que deseemos a nuestra cabecera. Por ejemplo, vamos a insertar un calendario:

Y este es el resultado en nuestra página principal:

Como puedes ver, lo primero que carga la página es nuestra zona de widget, ya que en la página front-page.php es lo primero que encuentra, además la hemos anclado en el hook ‘genesis_after_header’, justo después de la cabecera de genesis.

Después hemos llamado a genesis(); que se encarga de mostrar el content de la página (contenido que creamos con el editor y que se guarda en la base de datos).

Registrar una zona de widget para todas las páginas

Ahora vamos a crear una zona de widget que se mostrará al final de todas las páginas de nuestra web, algo que podemos aprovechar para insertar un banner o un formulario de newsletter.

Volvemos a nuestro archivo functions.php del child theme para registrar la nueva zona de widget:

//Registrar Widget Banner Footer
genesis_register_sidebar(array(
	'id' => 'banner-footer-widget-area',
	'name' => __('Banner Footer', 'genesis'),
	'description' => __('Widget para banner final en todas las páginas', 'childtheme')
));

La forma de mostrar este banner en todas las páginas (y entradas) de la web es ponerlo dentro del propio archivo de funciones, por lo que lo añadimos así:

//Mostrar Banner Footer en todo el site
function banner_footer_widget_area(){
    genesis_widget_area('banner-footer-widget-area', array(
        'before' => '<section class="banner-footer">',
        'after' => '</section>'
    ));
}
add_action('genesis_before_footer', 'banner_footer_widget_area');

En este caso usamos el hook ‘genesis_before_footer’ que posiciona nuestro banner justo antes del footer de la web.

Si quieres ver una guía de los hooks de Genesis puedes visitar mi artículo (en construcción): Hooks de Genesis Framework (init, header y framework).

Y el resultado:

Utilizando la clase CSS de la sección ‘banner-footer’, podremos centrarlo darle el tamaño que necesitemos, etc.

Recuerda que este widget será visible en cualquier página o entrada de la web, vemos cómo queda en una entrada:

Podemos condicionar dónde queremos que aparezca usando condicionales if y comprobando el tipo de contenido, por ejemplo:

<?php
//Aplica a todas las páginas
if(is_page()){
    //Código para mostrar el widget
}
?>

<?php
//Aplica a todo el contenido que sea de tipo entrada (de cualquier tipo)
if(is_single()){
    //Código para mostrar el widget
}
?>

<?php
//Aplica a un custom post determinado
if(is_singular('custom_post')){
    //Código para mostrar el widget
}
?>

<?php
//Aplica a la página de blog
if(is_home()){
    //Código para mostrar el widget
}
?>

<?php
//Aplica a la página de resultados de búsqueda
if(is_results()){
    //Código para mostrar el widget
}
?>

Espero que te sea de utilidad este artículo y nos vemos en el siguiente post 😉