Como añadir widget areas a la home de tu child theme de Genesis

Bueno, hoy vamos a mancharnos las manos con esta guía práctica de cómo añadir widget areas a la home de tu child theme de Genesis Framework.

En estos últimos años, al introducir los móviles, hemos tenido que adaptarnos a una nueva forma de diseñar webs, ahora todos estáis muy acostumbrados a moveros por una web de arriba a abajo, el famoso scroll vertical, pues bien, esto ha supuesto algunos cambios importantes en los cánones de diseño que todos seguíamos hasta ahora, seguro que todos lo reconocéis ahora en cuanto lo veis en una web.

Pues bien, estas áreas, en WordPress y, por extensión, en Genesis se crean mediante Widget areas que solo son visibles en la home.

Añadir estas widget areas es relativamente sencillo una vez que entiendes más o menos como funciona un child theme de Genesis, pero no todo lo que tengo son buenas noticias, joven padawan, vas a necesitar picar algo de código, se que es triste y frustrante pero esta vez no vamos a poder evitarlo así que cuanto antes pasemos el mal trago mejor…

Básicamente para añadir las widget areas vamos a necesitar dos cosas:

1. Registrar la widget area para hacer que nos aparezca en el back end de WordPress en nuestra plantilla
2. Mostrarla donde quieras dentro de la web, en este caso en la home

Vamos a entrar en detalle

1. Registrando widget areas

En primer lugar, necesitas registrar la widget area para hacerla aparecer en el back end de WordPress, luego la podrás rellenar con el contenido que tú quieras en Apariencia -> Widgets. Este es el snippet que hará la magia:

genesis_register_sidebar( array(
	'id'            => 'front-page-4',
	'name'          => __( 'Front Page 4', 'mychildtheme' ),
	'description'   => __( 'This is the fourth widget of the front page', 'mychildtheme' ),
) );

Bueno, quieres que explique el snippet, no? Tu lo has querido, después no me digas nada

Recuerda una cosa muy importante, este snippet debes situarlo en el archivos functions.php de tu child theme, seguramente vas a tener una parte de este archivos con otros códigos muy parecidos en caso de que tengas otras widget areas en la home, en nuestro caso, deberías tener otros 3 prácticamente iguales con los IDs ‘front-page-1’, ‘front-page-2‘ y ‘front-page-3’ y por alguna extraña razón querrás un cuarto

Usando ‘Genesis-register-sidebar’, una función propia de Genesis Framework, es como registramos una widget area, y necesitamos pasarle un array como argumento que contenga algunas cosas importantes que Genesis necesita saber acerca de la widget area que estamos añadiendo.

Primero, necesitamos darle una ID ÚNICA, si, esto es imprescindible, no puedes tener dos widget areas con la misma ID, no puedes, no lo intentes o podrían cumplirse las profecías mayas a las que sobrevivimos en 2012, totalmente prohibido.

La segunda linea ‘name’ es el nombre que tendrá el widget en el back end de WordPress.

La tercera, ‘description’, a que no te imaginas que puede ser… venga, que tu puedes… Efectivamente, la descripción que tendrá el widget area en el back end cuando tu child theme esté activo.

Una vez hemos completado esta parte ya deberíamos sentirnos orgullosos, ve a Apariencia -> Widgets y verás que ya la tienes ahí, nuevecita, pero no te vengas demasiado arriba, que aún nos queda algo de tela que cortar.

2. Mostrando el contenido de una widget area

Venga, el último tirón, ya casi lo tenemos

Hay varias formas de mostrar el contenido, antes de nada necesitas este snippet:

genesis_widget_area( 'front-page-4', array(
        'before' => '<div id="front-page-4" class="front-page-4 widget-area">',
	'after' => '</div>',
) );

Esta función genesis_widget_area muestra el widget con la id que tu especificas como primer argumento, el array que pasamos como segundo argumento, en realidad, lo único que hace es añadir algo de html, en este caso, le estamos diciendo a nuestro child theme que el contenido del widget estará dentro de un div con una id (esta es la id en cuanto a CSS, no es la ID que hemos mencionado antes) que será ‘front-page-4’ y un par de clases, seguro que ya te has dado cuenta que esto lo estamos haciendo para, más adelante, poder añadir formatos mediante css, o javascript referente a esta widget area en concreto etc.. aquí ya depende de lo que tu quieras, puedes añadir más clases etc…

Y ahora el último paso, ahora tenemos que decirle al child theme donde queremos que muestre este widget area dentro de la web, este paso es realmente importante, después de todo querrás mostrarlo, no? O lo vas a dejar escondido? No creo.

Para decirle a Genesis donde queremos la Widget Area debes decidir en que hook lo quieres situar. Si quieres saber donde están todos los action hooks, puedes usar este plugin, te los muestra en tu web de un vistazo, Genesis Visual Hook Guide

Pero bueno, cómo lo hacemos, pues con el siguiente código:

add_action('genesis_after_header','place_fourth_widget_function');

function place_fourth_widget_function() {
   genesis_widget_area( 'front-page-4', array(
        'before' => '<div id="front-page-4" class="front-page-4 widget-area">',
	'after' => '</div>',
   ) );
}

Al principio es un poco confuso pero, una vez que te acostumbras a la forma de trabajar de WordPress es realmente fácil, tan solo le estamos a Genesis que coloque el widget area en el hook ‘genesis_after_header’ que, efectivamente, está justo después del encabezado de la web, no es tan complicado, no?

Aunque hay un pequeño detalle que no he mencionado, donde &$*^%# pongo este código? Buena pregunta

En este punto, ya que tenemos programada la widget area, aunque fíjate que se va a mostrar en todas las páginas y posts tras el header, y eso no es exactamente lo que queremos, nosotros queremos que se muestre solo en la home, ahí, ordenado, tras el resto de widgets que tenemos, para esto tenemos dos opciones:

1. Si tienes en tu child theme una página de plantilla como front-page.php puedes poner este código en ese archivo, tras otros snippets similares para las widget areas 1, 2 y 3, ya está, todo listo.
2. Si no tienes ese archivo de plantilla para la home, debes situarlo en el archivo functions.php, pero, para que solo se muestre en la home debes hacer un pequeño cambio en el código, finale en el cambio en el snippet, hemos añadido una sentencia if que se encarga justo de eso, decirle a Genesis que lo muestre solo en la home.

add_action('genesis_after_header','place_fourth_widget_function');

function place_fourth_widget_function() {
   if(is_front_page()){
      genesis_widget_area( 'front-page-4', array(
           'before' => '<div id="front-page-4" class="front-page-4 widget-area">',
	   'after' => '</div>',
      ) );
   }
}

Aquí ya es cuando debes sentirte muy orgulloso, ahí lo tienes tu widget area con un lacito, siéntete orgulloso.

Espero que esto sea útil para ti, si es así, déjame un comentario, estaré encantado de oírte.