suhiminain
8/30/2018 - 3:07 AM

Genesis - Custom Blog Pages

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();