Grid de artículos con flexbox en el tema Outfitter Pro

Desde que descubrí Flexbox, estoy «jugando» con ello e implementando varias cosas en muchos de los temas de Genesis. La última a petición de un cliente fue un grid para los archivos del blog en el tema de Outfitter Pro. Un tema con el que suelo trabajar, aunque hay cosas que cambiaría, no sólo por gusto, sino por usabilidad. 

La página de Blog viene diseñada con enormes imágenes que no dejan ver, en según que pantallas, ni siquiera el primer título del a lista de artículos. Dadas las herramientas que tenemos hoy día de desarrollo de Front-End, es de esperar que hagamos cosas más acordes con las pantallas a las que tenemos que adaptarnos.

Al fina lde este artículo lo que lograremos es pasar de esto: 

Blog original en el tema Outfitter pro
Blog original en el tema Outfitter pro

a esto: 

Blog de Outfitter Pro en grid
Blog de Outfitter Pro en grid

Comencemos :).

Configuracion de WordPres y Genesis

Necestiamos configurar WordPress y Genesis correctamente. Nada del otro mundo. En WordPress en Ajustes > Lectura configuraremos dos cosas. Primero, asignaremos la página de portada y la de entradas ( o blog). Luego el número máximo de entradas a mostrar lo pondremos en 9. 

Ahora la parte de Genesis. En Genesis > Theme Settings bajaremos hasta la sección Content Archives y la configuremos como aparece en la imágen. Esto lo podremos variar luego a nuestro gusto, dependiendo lo que queramos mostrar. 

Modificaciones el el functions.php

Añadiremos este código en el archivo functions.php de nuestro tema Outfitter Pro.

Este contenido está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

El soporte en comentarios está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

¿Olvidaste tu contraseña?