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.
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
When a featured image is hovered:
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.
awesome, Sridhar, thanks! Just implemented on Magazine Pro š
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.
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
http://pastie.org/pastes/10307912/text
Set color to white for “.content-archive .content .entry .overlay”.
and add
.content-archive .content .entry .overlay .entry-time {
font-size: 16px;
}
Thank you.
If you wish to see this tutorial live visit my junk blog site.
http://www.creatifart.com/
I only added the title overlaying the featured image.
I really thought that it would go together nicely.
-Scot
Hi Sridhar,
Got this working well. Thanks! How would you restrict this to the archive pages of certain categories?
Thanks,
Tanvi
Thanks this was Awesome!
[…] is similar to Alternating Posts Layout for Content Archives in Genesis that I wrote in the […]