How to Create a Checkerboard Layout with Full-width Background for Post Type Archives with Flexbox and Genesis

A “checkerboard” layout is one where images and text appear in alternating squares. The alternation is actually the important part, as the containers aren’t always exactly square and may not all be the same size. The StudioPress child themes Author Pro and Atmosphere Pro use this design pattern quite effectively. One advantage to this layout is that it gives you a nice-looking archive page even when there are only a few entries to show, where a grid or masonry layout would look unfinished.

There are already several tutorials available on building checkerboard layouts. Chinmoy Paul has one on using Beaver Builder for a full-width checkerboard layout on his Genesis Developer site. Sridhar Katakam has two: “How to Replace Featured Pages in Atmosphere Pro’s Front Page with Featured Posts” and “Checkered Posts Layout in Genesis“, as well as a tutorial about “Using ACF for multiple drag-n-drop hero, text-image, and image-text sections in Genesis.” There’s also “Checkerboard Featured Posts Layout like Genesis Atmosphere Pro” from WP Beaches.

These are all great tutorials, and I’ve made reference to them at different times in the past. But since I’ve become a complete flexbox junkie, I was pretty sure that this could be done with flexbox and without worrying about floats and counting mechanisms and other complications. And I was right. With a little help from Connor Mulcahey’s CodePen example, I set about to create archive templates for custom post types that used flexbox to alternate image-text and text-image sections.

The CSS that powers the alternating sections will work for any theme, as long as you set up the flex containers and flex items, but since I build in (on?) the Genesis theme framework, this tutorial shows you how to do it for a Genesis theme.

Building the Archive Template File

There were a few considerations in doing this, apart from the fact that Genesis normally puts the site content into a wrap div that would prevent a full-width layout. (That’s a CSS fix, not a PHP fix.)

First, each entry has to be inside two separate containers: the outer, full-width container for the background color, and an inner container to limit the width of the actual content. The inner container is the one that gets set to display:flex.

Second, in order to make the alternation work, the featured image has to be in one div, with the title, excerpt, and “read more” links in another. The image div and the text div are flex-items, and we’re going to rearrange them by using the order property.

We don’t actually need to create a whole custom loop, just reposition a few things and add those containers. I’m also adding a custom body class because it makes styling easier.

In the original source, the sub-headings for Case Studies have been added within the plugin that creates the case studies post type. They’re not relevant to the checkerboard layout, so I’m not going to include that code.

<?php

/* Archive for Case Studies */

// Add custom body class
add_filter( 'body_class', 'cs_archive_body_class' );
function cs_archive_body_class($classes) {
	$classes[] = 'case-study-archive';
	return $classes;
}


// Remove the entry footer markup
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );

// Remove standard featured images from entry header
remove_action('genesis_entry_header', 'genesis_do_post_image', 8 );

// Open double container around entries 
add_action('genesis_before_entry', 'ns_entry_wrapper_open', 5);
function ns_entry_wrapper_open() {
	echo '<div class="entry-background-wrap">';
	echo '<div class="wrap">';
}

// Close double container around entries
add_action('genesis_after_entry', 'ns_entry_wrapper_close', 5);
function ns_entry_wrapper_close() {
	echo '</div>'; // wrap
	echo '</div>'; // entry-background-wrap
}

// Add featured images before entry 
add_action('genesis_before_entry', 'case_study_archive_featured', 10 );
function case_study_archive_featured() {
	if( has_post_thumbnail() ) {
		echo '<div class="vertical-featured">';
		echo '<a href="'. get_permalink() . '">';
		the_post_thumbnail('archive-vertical');
		echo '</a>';
		echo '</div>';
	}
}

// Add Read More button after excerpt
add_action('genesis_entry_content', 'case_study_archive_more', 12 );
function case_study_archive_more() {
	echo '<p class="more-link"><a class="button" href="' . get_permalink() . '">Read More &gt;</a></p>';
}

genesis();

Checkerboard Layout CSS with Flexbox

And now for the fun part: the CSS that powers the end result. The first thing to do is adjust the width on the .site-inner .wrap, which prevents a full-width layout. After that, we set up our alternating containers with background colors and flex order. And because this is a mobile-first site (or will be when it’s finished), we write our media queries to use that flex-order alternation only on screens wider than 800px. (Pick whatever breakpoint looks good to you based on the width of your images and entries, but remember that you want a consistent image-text, image-text order once the entries start to stack.)

.case-study-archive .site-inner .wrap {
  max-width:100%;
  padding:0;
}

.case-study-archive .content {
  max-width: 100%;
  float: none;
  width:100%;
}

.case-study-archive .entry-background-wrap:nth-of-type(even) {
  background-color: #f5f5f5;
}

.case-study-archive .entry-background-wrap:nth-of-type(even) .wrap,
.case-study-archive .entry-background-wrap:nth-of-type(even) .entry {
  background-color: transparent;
}

.case-study-archive .entry-background-wrap .wrap {
  max-width:1210px;
  margin: 0 auto;
  padding:0;
}


.case-study-archive .entry-background-wrap .wrap {
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
}

.case-study-archive .vertical-featured {
  flex: 1 1 240px;
}

.case-study-archive .entry {
  flex: 1 1 400px;
}

.case-study-archive .vertical-featured,
.case-study-archive .entry {
    padding: 20px 10px;
}

.case-study-archive h3 {
  font-size:24px;
}

@media only screen and (min-width:800px) {
  .case-study-archive .entry-background-wrap:nth-of-type(odd) .vertical-featured{
    order: 1;
  }
  .case-study-archive .entry-background-wrap:nth-of-type(even) .vertical-featured {
    order: -1;
  }
}

@media only screen and (min-width:960px) {
    
  .case-study-archive .vertical-featured,
  .case-study-archive .entry {
      padding: 70px 20px;
  }
}

The key to the checkerboard effect is switching the order on the .vertical-featured image div between -1 and 1 depending on whether nth-of-type on .entry-background-wrap is odd or even. (The default order for flex items is 0.)

The key to the full-width background is setting background-color to #f5f5f5 on .entry-background-wrap and transparent on .entry-background-wrap .wrap and .entry-background-wrap .entry when nth-of-type is even.

In both cases, it’s the .entry-background-wrap div that needs the nth-of-type property set. Within each of those wrappers, the other divs only appear once, so we have to count the outermost container.

Flexbox Checkerboard Layout in Action

These three screenshots show the desktop, tablet, and mobile layouts for the case studies archive. To see it in action, visit the NowSecure website.