Three Column Grid Card Blog Page On Genesis

Want to make your blog page template design into three column grid card? Here’s how to do it.

Is time to change your boring blog page appearance. And make the design more eye-catching.

Lucky you who use Genesis Framework. Make the blog page or any page into a column grid isn’t hard.

And it’s easy to find the code reference on how to do that. Because there is so many awesome genesis developer shares their knowledge.

Since Genesis is already built in layout options within it. The Genesis column classes are one-half, one-third, one-sixth and so on.

So, here we gonna make the blog content in the blog page into three column grid by using that column classes. And make the content appearance into A card like.

Ok, here’s how to do it.

Make the blog page into three column grid

First, we need to make the blog page into three columns. Copy the PHP code below and paste it to the bottom of your theme function.php.

//* Grid Style Content Archive 
function be_archive_post_class( $classes ) {
 // Don't run on single posts or pages
 if( !is_home() ) 
 return $classes;
 $classes[] = 'one-third';
 global $wp_query;
 if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 6 )
 $classes[] = 'first';
 return $classes;
}
add_filter( 'post_class', 'be_archive_post_class' );

The PHP code above will make the blog page into three columns.

Move the post tile below feature image

Next step, we need to make the entry title below the feature image. To make the post entry appearance card like.

Put the code below to your theme function.php.

function themeprefix_swap_title_image() {
     if ( is_home() ) {
    remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
    add_action( 'genesis_entry_header', 'genesis_do_post_image', 8 );
  }
}
add_action( 'genesis_before_content', 'themeprefix_swap_title_image' );

Removes Title and Description on Blog Template Page (Optional)

This is optional if you want also remove the title and description on the blog page. Put also the code below to your theme function.php.

//Removes Title and Description on Blog Template Page
remove_action( 'genesis_before_loop', 'genesis_do_blog_template_heading' );

Now we’ve done with the PHP. Is time for the magic, CSS magic.

Use CSS to make blog page appearance grid cards like

Is the finishing step. The final touch using CSS to make your blog page template rocks!

Copy and paste CSS code below to WordPress built-in CSS Editor on live customizer.

/* Blog Template ------------------------------------------*/

.page.page-template-page_blog .entry-header .entry-title {
  font-size: 2rem;
  text-align: left;
  padding: 18px 12px;
}

.page.page-template-page_blog .entry-content {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page.page-template-page_blog .entry {
  padding: 0;
  border: 1px solid #eee;
  border-radius: 6px;
}

.page.page-template-page_blog .entry-title a:hover {
  text-decoration: none;
}

.page.page-template-page_blog a,
.page.page-template-page_blog a:hover{
  border-bottom: none;
}

.page.page-template-page_blog .entry-content p {
  padding-left: 12px;
  padding-right: 12px;
  text-align: left;
}

.page.page-template-page_blog .content img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  margin-bottom: 20px;
  border-radius: 6px 6px 0 0 ;
  -moz-transition: all ease-in-out .4s;
  -webkit-transition: all ease-in-out .4s;
  transition: all ease-in-out .4s;
}

.page.page-template-page_blog .entry-header .entry-meta {
  text-align: left;
  margin-bottom: 4rem;
  font-size: 1.3rem;
  display: none;
  padding-left: 0;
}

Another CSS code to dealing with viewport.

@media only screen and (max-width: 414px) {
.page.page-template-page_blog .entry-content p {
  padding-left: 12px;
  padding-right: 12px;
}
.page.page-template-page_blog .site-inner {
  padding: 50px 18px 0;
}
}

And done!

All that code stuff will make your blog page template into full-width content. And yeah a Card Like posts entry appearance.

You can see the final result here at Digimanx blog page. Also on my other blog who use no border-radius in the grid cards.

Please be creative with the CSS, change some of the style to match with your taste.

Code reference source: WPBeaches, LeagueWP, WPSites.net.