Como crear una página de inicio con widgets en Genesis Sample

Descubre en tres sencillos pasos como crear una página de inico con widgets en Genesis Sample mediante código.

Es una de las manera más populares de crear las portadas o páginas de inicio en los child theme de Genesis Framework.

No sólo es comodo de cara al desarrollador sino que es muy flexible para el implementador o cliente final, ya que puede crear multitud de combinaciones con todos los widgets que aportan WordPress y Genesis.

Paso 1: Declarar las distintas áreas de widgets

Para este caso de ejemplo he creado 4 áreas de widgets. Pero podrías crear las que necesites. Las he declarado por separado para que, en caso de que hagas un proyecto personalizado, puesdas nombrar a cada área dependiendo del uso que vayáis a darle.

Introduce este código en el archivo functions.php de nuetro Genesis Sample.

La mayoría de los Genesis child themes vienen así, pero para algunos proyectos me gusta personalizarlo y darles nombre. Así quedan más ordenadas.

Paso 2: Agregar una clase y ID al site-inner

Creadas las áreas de widgets, el siguiente paso será ubicarlas en la página de inicio. Pero antes de colocar el código de las áreas de widgets, añadiremos una función para dar en dicha página de inicio una clase extra y un ID al site-inner. De esta manera con la clase extra full-home, nos será más cómodo crear el estilo personalizado a esta página. Y con el ID, genesis-content, nos aseguramos de que no perdemos los datos de Schema.org.

Crearemos el template de la página de inicio con el nombre front-page.php y lo alojaremos en la carpeta raíz del tema Genesis Sample, que es con el que estamos trabajando.

Ya vimos en otro artículo como agragar clases y ID’s a elementos HTML en Genesis, pero esta función concretamente es del blog de Bill Erickson.

Paso 3: Agregar las áreas de widgets en nuestra página de inicio

Ahora si, justo de bajo de esa función colocamos el código para agregar las áreas de widgets. Como cuenta Bill Erikson en ese artículo, no usaremos la función Genesis(), sino que en esta ocasión nos situaremos nuestro contenido entre el header y el footer. Veamos cómo es el código.

Dado que nos hemos deshecho de algo de código de Genesis al suprimir la función genesis(), tenemos una página de inicio totalmente personalizada.

Resultado: El archivo front-page.php

No podemos olvidarnos de la cabecera del template front-page.php, así que dejo el código de como qeudaría el template al completo con todas las partes juntas.

En la cabecera puedes poner los datos que quieras.

No es un código complejo así explicado por partes y el resultado es más que bueno, por tan sólo un poco de trabajo ;).

Último paso: un poco de CSS

El siguiente paso será dar un poco de estilo a esa página para que todo gane concordancia y reorganizar los márgenes y los anchos máximos desde que hemos cmabiado la estructura base de la página de inicio de Genesis.

Lo haremos con pocas líneas. He añadido alguna personalización en algunas aŕeas de wigets, para que veáis desde donde podemos trabajar y que ya depende de nuestra nivel de desarrolladores front-end.

Los estilos que le he dado a cada área de widgets, es sólo para que veáis que se puede jugar con el CSS y que las posibilidades son infinitas.

Conlusiones

Es un buen punto de partida para crearte tu propio Genesis Starter Theme. Es algo sencillo y que al haberlo implementado tú, puedes jugar con ello en base a las necesidades de cada proyecto.

Esta personalización no sólo es propia de Genesis Sample. Con algunos cambios podríamos adaptarlo a cualquier Genesis child theme.

Si tienes alguna duda o pregunta sobre el código o su resultado, puedes dejarme un comentario. Contestaré a todos ;).