custom blog pages for genesis framework with 2 columns. using css grid.
/* ## Blog - Grid
--------------------------------------------- */
.content.blog-grid{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
.content.blog-grid > article{
min-width: 0;
}
.content.blog-grid a.entry-image-link img{
clear: both;
float: none !important;
display: block;
}
.content.blog-grid .pagination,
.content.blog-grid .breadcrumb{
grid-column-start: 1;
grid-column-end: 3;
}
@media only screen and (max-width: 860px) {
.content.blog-grid{
grid-template-columns: 1fr;
grid-gap: 0;
}
.content.blog-grid .pagination,
.content.blog-grid .breadcrumb{
grid-column-start: 1;
grid-column-end: 2;
}
}
<?php
/**
* This file adds the Blog - Grid Page template to the Genesis Flexpress.
*
* @author Suhimi Nain
* @package Flexpress
* @subpackage Customizations
*/
/*
Template Name: Blog - Grid
*/
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'genesis_blog_grid_loop' );
/**
* Attach a loop to the `genesis_loop` output hook so we can get some front-end output.
*
* @since 1.1.0
*/
function genesis_blog_grid_loop() {
$include = genesis_get_option( 'blog_cat' );
$exclude = genesis_get_option( 'blog_cat_exclude' ) ? explode( ',', str_replace( ' ', '', genesis_get_option( 'blog_cat_exclude' ) ) ) : '';
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
// Easter Egg.
$query_args = wp_parse_args(
genesis_get_custom_field( 'query_args' ),
array(
'cat' => $include,
'category__not_in' => $exclude,
'showposts' => genesis_get_option( 'blog_cat_num' ),
'paged' => $paged,
)
);
genesis_custom_loop( $query_args );
}
add_filter( 'genesis_attr_content', 'themeprefix_add_css_attr' );
function themeprefix_add_css_attr( $attributes ) {
// add original plus extra CSS classes
$attributes['class'] .= ' blog-grid';
// return the attributes
return $attributes;
}
//* Run the Genesis loop
genesis();