In the comments section of my previous tutorial, a user wrote,
Yeah! Thanks! I would also like to know how to layout posts like this on the front page. I know it can be done, because I’ve seen theme’s use the “vertical split” layout.
In this article I would like to share the code to display Posts in a checkered layout on the Posts page. By default, this is the homepage in WordPress. I also show how template_include filter can be used to apply this layout to other views like category archives.
All the 'odd' entries (1st from the top, 3rd, 5th etc.) are set to show Posts' Featured image with Post info and Entry meta floated on the image at the left and Post title and excerpt at the right. For 'even' entries the order is switched.
Step 1
Add the following in child theme's functions.php:
| // Register a custom image size for Home Checkered images | |
| add_image_size( 'home-checkered', 1024, 614, true ); |
Step 2
Create a file named home.php in the child theme directory having the following:
Great tutorial. Do you think this can also work with pages, as in: you create 6 widget area’s and use the Genesis – Featured Page widget to place in pages?
Thanks for the tutorial. I will use this layout in my current project I’m doing.
Sri, I think you wanted to write – “I also show how template_include can be used to apply this layout to other views like category archives.”
Because, pre_get_posts is being used to modify number of posts here, whereas template_include is helping home.php template to be used in category scene.
Am I wrong?
Thanks Vajra, corrected.
With some modifications to the php and css. I just created a blog template page for the checkerboard layout (like the post in masonry grid template). This way you can use this layout at your convenience. Just don’t forget to add the genesis_loop to your template.
This is just what I was looking for! Thank you so much for this tutorial!
Hi Sri, what if we want the post info to go after the post excerpt instead of on the featured image?
Replace the entire code in home.php with http://pastie.org/pastes/10409425/text.
Screenshot: http://d.pr/i/1c7iK
Brilliant! I’m going to try this out. Thanks!
Hi Sri,
Is there a way to offset the latest post only for the blog page and not the category pages?
For example, if you wanted the most recent post to be a full-width post above the checkered posts. But have them all show up in the category pages?