Mostrar las categorías en formato rejilla en la home Genesis Sample

Aprende en este tutorial cómo enseñar las categorías en formato grid o rejilla en la página principal de Genesis Sample mediante código.

Si quieres potenciar las distintas categorías que utilizas para clasificar tus entradas, una opción interesante puede ser que las introduzcas en la home.

Gracias a que ya sabes cómo añadir una imagen destacada a las categorías, ahora puedes crear una rejilla que muestre una fotografía representativa para cada una de ellas.

Este es el resultado final:

¿Quieres algo así?

Instrucciones para visualizar las categorías en formato grid en la home de Genesis Sample

1. Añade una imagen destacada a las categorías

¿Todavía no has habilitado la selección de imagen destacada para tus categorías?

Entonces agrega el siguiente fragmento al final del fichero functions.php o a tu plugin de funcionalidades:

Ahora puedes elegir la imagen de cada categoría desde tu biblioteca de medios.

2. Genera el fichero front-page.php

Crea un archivo front-page.php en la raíz del child theme y añade el siguiente snippet:

Con esto te aseguras de visualizar las categorías nativas de WordPress en la home con la siguiente información:

• La imagen destacada de la categoría.
• El nombre la categoría.

Y, al envolver el contenido con una clase llamada .cat-wrapper, tienes la posibilidad de aplicar los estilos necesarios.

Además, este bloque fuerza el formato de ancho completo para que el diseño sea más atractivo.

3. Modifica functions.php (opcional)

Por último debes crear un nuevo tamaño de imagen llamado «Grid» que se ajuste a las medidas necesarias agregando la siguiente línea a functions.php:

Si ya cuentas con un tamaño adecuado puedes ahorrarte este paso, pero acuérdate de regenerar todas la miniaturas de las imágenes que ya tienes en WordPress con el plugin Regenerate Thumbnails.

4. Personaliza el CSS de la rejilla

Una vez realizados los cambios en la plantilla, solo te falta asignar los estilos para que se muestre en formato de grid.

Para ello introduce este bloque al final de style.css:

Al insertar estas líneas de CSS consigues que las categorías se muestren en una rejilla de 3 columnas en pantallas de más de 960px de ancho y que se adapte a dispositivos móviles.

Con este snippet también das unos estilos básicos para que el título de la página quede centrado y mejor jerarquizado.

Puedes combinar este tutorial con otros como el de crear una cabecera personalizada en la página principal de Genesis Sample para modificar la home a tu gusto.

Conclusiones

Ahora ya sabes cómo introducir las categorías en formato rejilla en la home de Genesis Sample.

Este código está creado para Genesis Sample (2.8) pero con unos pocos ajustes te servirá para cualquier plantilla de Genesis.

Si deseas hacerme alguna pregunta o darme una sugerencia para próximos tutoriales, déjamela en los comentarios (opción exclusiva para suscriptores).