Sridhar Katakam

Genesis and WordPress Tutorials

Alternating Posts Layout for Content Archives in Genesis

by 9 Comments

In Genesis Slack chat's CSS room, yesterday a user asked an interesting question:

iā€™m looking for a solution to get a grid like my attachement. i.e. it is a archive page with 3 posts in a row. I thought about :nth-of-type but maybe someone knows a easier solution. I only use the featured images and above that the title as a caption.

grid_numbered

I gave this some thought and the best way for accomplishing this layout seemed to be to ensure that the generated markup is like this:

<div class="row">
<div class="one-half first">
<div class="entry 1"></div>
</div>
<div class="one-half">
<div class="entry 2"></div>
<div class="entry 3"></div>
</div>
</div>
<div class="row">
<div class="one-half first">
<div class="entry 4"></div>
<div class="entry 5"></div>
</div>
<div class="one-half">
<div class="entry 6"></div>
</div>
</div>
view raw markup.html hosted with ❤ by GitHub

alternating-posts-layout-genesis1

When a featured image is hovered:

alternating-posts-layout-genesis2

This tutorial covers

  • registering two custom image sizes, one for the large images and another for the smaller images
  • creating a custom template named template_content-archives.php
  • using template_include filter to apply the above template to all content archives
  • using pre_get_posts filter to set the number of posts per page to 9 in content archives
  • adding custom CSS for revealing the title on featured images upon hovering including a overlay

In template_content-archives.php we are going to

  • adds a custom content-archive css class to the body element so we can target the entries on content archives
  • (optionally) force full width content
  • remove the post image (if it's coming via theme settings)
  • remove post content navigation, entry header, post content and entry footer
  • display featured image and title linked to post's permalink in .entry-content
  • remove entry header, post content, entry footer
  • use built-in post counter in WordPress for adding the necessary markup as shown in the above html and to add custom post class to posts that should not have a bottom margin

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Whahaha the behind the scenes picture. šŸ˜‰

    Great job you did, my next goal on this alternative post grid is to remove the pagination and add infinite scroll. Must be easy.

    Reply

  • In this line:
    // print featured image and title linked to post’s permalink
    printf( ‘%s‘, get_permalink(), $image, the_title_attribute( ‘echo=0’ ), $title );
    }

    How could u show the date above the title?
    Scot

    Reply

  • Hi Sridhar,

    Got this working well. Thanks! How would you restrict this to the archive pages of certain categories?

    Thanks,
    Tanvi

    Reply
    • >