• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

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

September 19, 2016 by Sallie Goetsch 4 Comments

red and black checkerboard

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.

flexbox checkerboard layout desktop view
tablet view (compressed checkerboard)
phone view (no checkerboard)

Related Items

  • screenshot: Shimmer Theme demo page
    Adding a CSS Background to the Shimmer Child Theme for Genesis
  • screenshot of the new menu order function in SublimeText
    Help! My Custom Post Type Disappeared from the Admin Menu!
  • WP-Tonic Episode 95: Choosing a Premium WordPress Theme
    WP-Tonic 095: How to Pick the Right Premium WordPress Theme

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: Using WordPress Tagged With: Genesis Theme Framework, Tutorial, Flexbox

Reader Interactions

Comments

  1. Tim Anderson says

    October 29, 2016 at 2:53 pm

    Great post. As a Genesis rookie, it’s hard to find good tutorials. Thanks for putting in the effort!

    Reply
    • Sallie Goetsch says

      October 29, 2016 at 7:47 pm

      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.

      Reply
  2. Temitayo Boboye says

    March 17, 2018 at 3:10 pm

    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.

    Reply
    • Sallie Goetsch says

      March 17, 2018 at 9:25 pm

      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.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)

Follow Sallie on Twitter

    Sorry, no Tweets were found.

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact