Two-column entry layout on content archives in Genesis

Updated on January 28, 2019

In my Facebook group, a user asked:

Hi Sridhar, what's the best way to do this on the blog page?
Column 1: Entry image
Column 2: Everything else (entry header, entry content and entry footer)
Thank you

This members-only tutorial provides the steps to display an image (featured if present, otherwise a fallback) linking to post permalink in the left column and entry details like header, content, and footer in a right column for each post in content archives (like Posts page, category archives etc.) in Genesis.

While the tutorial has been written for Genesis Sample 2.8.0, it should work with a few adjustments in any Genesis child theme.

Step 1

Install and activate the following custom functionality plugin.

The plugin will

• add content-archive body class to all content archives i.e., non-singular pages.
• set full-width-content layout to content archives.
• add HTML markup for div.entry-left and the opening tag for div.entry-right.
• add HTML markup for the closing tag for div.entry-right.
• remove the image that may be coming from Genesis Theme Settings.
• load a CSS file having code to arrange the left and right divs in columns using CSS Grid for screen sizes 960px and above.