Cómo crear un grid layout en GeneratePress

En este tutorial quiero explicarte un proceso que realizo siempre que trabajo con el tema framework GeneratePress.

Cuando tenemos una página creada con GeneratePress por defecto nos aparece un diseño que deja bastante que desear, pero que tiene lo justo y necesario para que luego puedas adaptarlo.

Problema

Bien, pues uno de los procesos que aplico siempre es transformar las páginas de archivo en formato rejilla.

Es decir, en lugar de que los posts se me muestren en un listado vertical, lo vamos a transformar en un grid layout para que se muestren por filas y columnas.

Planteo de solución con hooks

Y para hacer esto una de las formas es utilizar los Action Hooks de GeneratePress.

Por un lado, tenemos una guía visual de los hooks que tiene, para que sepas cuál utilizar en cada momento, según donde quieras inyectar tu código.

Pero precisamente el que vamos a necesitar no aparece en la guía porque se metió a posteriori por lo que aquí tienes un listado de los distintos hooks que hay actualizados.

Lo que yo voy a hacer es insertar un elemento HTML con una clase específica antes de que empiece el listado de posts y otro justo después de que termine el listado en la página de archivo.

De esta forma, añadiendo estos dos elementos luego podemos darle estilos con Flexbox para crear el sistema de rejilla.

Los dos hooks que usaremos son generate_before_loop y generate_after_loop.

Necesitamos un tema hijo

Cuando trabajamos con un tema framework como GeneratePress, los cambios jamás los debes hacer su propio directorio, sino en el de un tema hijo.

Un tema hijo por defecto sólo necesita un archivo functions.php donde meteremos código, y luego un archivo style.css para añadir nuestros estilos.

Una vez te hayas asegurado de que tienes un tema hijo activado de
GeneratePress podemos continuar.

Eliminamos las barras laterales

Ahora abrimos el personalizador de WordPress y para ello haz clic en «Personalizar» > «Diseño» > «Barras laterales» y en todos los diseños elegimos que únicamente haya contenido sin barras laterales. Una vez hecho esto publicamos.

Hacemos uso de los hooks

Para ello nos vamos al functions.php de nuestro tema hijo:

// Grid posts
add_action( 'generate_before_loop', 'scv_grid_posts_begin', 999 );

function scv_grid_posts_begin(){
  if( is_home() || is_search() || is_archive() ):
    echo '<section class="scv-grid">';
  endif;
}

Lo primero que hemos hecho ha sido añadir el HMTL, con una clase que luego usaremos para crear el grid, justo antes de que empiece el listado de posts.

Y aquí es importante que elijas una prioridad alta como 999, para asegurarnos de que nuestro hook se ejecuta el último, porque si no hay muchas otros elementos que mete GeneratePress que harían que nuestro sistema de rejilla no funcionara correctamente.

También es importante que nos aseguremos que estamos en una página de archivo, en los resultados de búsqueda o en la home y para ello usamos la jerarquía de plantillas de WordPress y para poder controlar esto he utilizado conditional tags.

Perfecto pues ahora tenemos que repetir el mismo proceso para cerrar el tag HTML:

add_action( 'generate_after_loop', 'scv_grid_posts_end', 9 );

function scv_grid_posts_end(){
  if( is_home() || is_search() || is_archive() ):
    echo '</section><!-- scv-grid --> ';
  endif;
}

Fíjate que ahora usamos el otro hook y en este caso en lugar de ponerle una prioridad muy alta le tenemos que poner una muy baja (menor a 10) para que en este caso se ejecute de las primeras funciones y no de las últimas.

Usamos Flexbox para el diseño

Bien pues ahora que tenemos esta sección HTML con todo el listado de artículos dentro, lo tenemos a huevo para poder aplicar Flexbox y lo haremos de forma que sea mobile-first.

Así que nos vamos a style.css y añadimos:

/* Grid posts */

.scv-grid .inside-article {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .scv-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .scv-grid article {
    flex-basis: calc( 50% - 20px );
    margin-bottom: 30px;
  }
}

@media (min-width: 1024px) {
  .scv-grid article {
    flex-basis: calc( 33.333% - 20px );
  }
}

Lo siguiente que podemos hacer es que aparezca la foto destacada encima del título y la forma más fácil parar lograr esto es utilizando de nuevo Flexbox y cambiar la propiedad order.

Después a mí siempre me gusta ocultar el extracto y los datos meta del listo y finalmente hacemos un poco más pequeño el título.

.scv-grid .inside-article .entry-header {
  order: 1;
}

.scv-grid .inside-article .entry-header .entry-title {
  font-size: 24px;
}

.scv-grid .inside-article .post-image {
  order: 0;
  margin: 0 0 10px;
}

.scv-grid .inside-article .entry-summary,
.scv-grid .inside-article .entry-meta {
  display: none;
}

Y de esta forma puedes ver como del diseño inicial que teníamos ahora tenemos esto:

Personalmente a mí me parece más interesante y si lo hacemos responsive acuérdate que llega un punto en que se muestran dos columnas y llega un momento donde se muestra solamente una.

Vídeo paso a paso y código completo

Si lo deseas, puedes ver el tutorial en formato vídeo con mucho más detalle y explicaciones más extensas y obtener el código completo:

¡Y eso es todo lo que quería explicarte! Espero que te haya parecido interesante y que lo puedas aplicar en tus proyectos o los de tus clientes.