
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 ></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.
Great post. As a Genesis rookie, it’s hard to find good tutorials. Thanks for putting in the effort!
If you want Genesis tutorials, try sridharkatakam.com. Some of the tutorials there are free and some you have to pay for. I pay for them, because they’re worth it, and he publishes several new ones a week.
Hi Sallie, thanks for this wonderful tutorial. However, I was wondering what the process for something like this will be when working with sub-pages. Display subpages and excerpts in this manner.
You’d need to create a page template instead of using an archive template, and write a custom query that identified sub-pages. And these days, I’d likely use CSS Grid rather than flexbox, also.