In this article I show how Posts can be displayed in columns on archives and Posts page in Genesis. For each entry, published date will appear at the top left . Categories and Tags (if present) will appear near the bottom when the featured image is hovered. We shall use matchHeight jQuery to make all the entries in each row have the same height (as the tallest in that row).
When the image of an entry is hovered:
and if an entry has Tags:
If an entry does not have a featured image, we shall show a default image:
From 1024px and below entry meta (categories and tags) will appear below the featured image:
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Summary of solution:
- Register new image size for featured images on Posts grid.
- Use
pre_get_postsaction hook to change Posts Per Page for Posts page and Archives. - Use
template_includefilter to make the Posts page use archive.php. - Write two custom functions that return unlinked comma separated category names and tags.
- Create archive.php having the code to add a custom body CSS class, load + initialize matchHeight, display entries in columns, force full width content, display published date + image (featured if there's one, otherwise a hardcoded one from the theme's images directory) + entry meta all linked to permalink.
- Write CSS to position the published date at top left and entry meta near the bottom (with opacity set to 0). We shall change the opacity to 1 when the image is hovered while using a linear transition.
Step 1
Upload jquery.matchHeight-min.js to child theme's js directory (create if not existing).
Create a file named say, matchheight-init.js in the same location having:
Thank you Sridhar, this is exactly what I wanted and for the new sample theme too. I like the way the WhiteSpace Pro grid looks but I wanted some text and my image to show more like what you’ve done here. I can experiment.
Great—as usual. I want to do this in a front page section of Executive Pro.
Thanks
Where exactly on the homepage? In Home Top widget area?
Home – Bottom
Hey Sridhar, will this show ALL posts from all categories or is there a way to choose a certain category?
For example, I have a FAQ section on a site and I would like to only show the FAQ category using this script.
thnx in advance!
Yes.
Yes. Just add one more line in the pre_get_posts function and use ‘cat’ with the value of ID of the category that you would like to show posts from. Ex.: http://pastie.org/pastes/10509878/text.
Reference: https://codex.wordpress.org/Class_Reference/WP_Query#Category_Parameters
Hi Sridhar, I followed the steps in the tutorial and tripled checked each one but there are several issues with the tutorial
1. the JS is not loading
2. the template shows all categories even though I added the line as you added
3. More importantly, home page got all screwed up and was suddenly showing the new archive.php template we created even though I didnt touch any of the home page settings.
(needless to say, I removed the functions.php addition and home page is back to usual)
BTW, I am using altitude Pro.
Any chance you can take a look?
Can you provide the URL of the site in question?
If you want the Posts page to be Blog, i.e., example.com/blog:
Make sure that a static Page named say, “Home” is set as Front page at Settings > Reading. Set “Blog” as the Posts page.
the url is http://disabilitycreditcanada.com/
the front page is set to show latest posts and not static page and I dont really want to mess with that.
I wanted to implement this tutorial on http://disabilitycreditcanada.com/frequently-asked-questions/ (currently using a different layout you taught here)
thanks!
This tutorial is meant to work with Posts page and archives only, not static Pages like http://disabilitycreditcanada.com/frequently-asked-questions/.
It is possible to use a custom Page Template with similar coding and apply it to your FAQ Page, but it involves a few additional steps which I will look into, if my time permits.
It’s also possible to dynamically adapt the number of columns to the the number of articles, so the content is centered when you have fewer articles returned than the columns’ count.
This is what I did :
global $wp_query; // you need to call it a bit earlier than the original code
$max_columns = 3; // Set the number of columns here
if ( $wp_query->post_count post_count; } else { $columns = $max_columns; }
(form validation deleted the “greater than” sign after $wp_query->post_count !)
I have an issue with comment area not showing up and it’s not a plugin conflict. Can’t post url here but can email it to you. Thank you!
Code changes while following this tutorial should have no effect on comments. Can you un-do all the steps and see if the problem persists?
I double-checked and I accidentally deleted extra code when I hid the date in the code. My fault! Thank you so much for the quick response.
can’t seem to find the .js files that is linked? besides that super happy to be here!
I have updated the post with the correct link. It is https://raw.githubusercontent.com/liabru/jquery-match-height/master/dist/jquery.matchHeight-min.js.
Hi Sridhar, I’m new to Genesis and have been working my way through your tutorials. I am trying to implement this tutorial on a test site (localhost) and have a few questions.
1. How can I exclude a category from displaying in grid format in archive?
2. Is it possible to show search results in the same grid format?
Thank You.
Hi Sridhar,
It would be nice to have this same design implemented for Genesis Featured Posts Widget. Is it possible to do this?
Thank you for the great content
It’s easier to use a custom query and loop. Ex.: https://sridharkatakam.com/replace-front-page-2-widget-area-altitude-pro-posts-news-layout/
Is it possible to have he first post show on full width size with different background color. Then show everything rest if posts.
Which tutorial are you referring to?
https://sridharkatakam.com/posts-grid-on-archives-in-genesis/
or
https://sridharkatakam.com/replace-front-page-2-widget-area-altitude-pro-posts-news-layout/
?
Hi Sridhar,
I just updated to WordPress 4.7 and lost the grid layout on my blog archives page following this tutorial:
http://www.pixelhappy.co/blog/
The archives displayed perfectly until WordPress 4.7.
Any idea why 4.7 would break the grid layout following this tutorial?
Thanks, Yael
Hi Yael,
I have just tested this on WP 4.7 and it is working fine in my test site.
On your site, I see that
one-thirdclasses are not being applied to the entries. It’s supposed to be like this: http://screencast.com/t/nEjCprn4Can you check to see if
add_filter( 'post_class', 'be_portfolio_post_class' );is not commented out and still present in functions.php?HI Sridhar,
Thank you for checking this for me.
I checked my archives.php file and the add_filter( ‘post_class’, ‘be_portfolio_post_class’ ); is still present.
Perhaps I’ll try to implement from scratch. Something happened when I updated to WP 4.7 so perhaps starting fresh will resolve.
Thanks, Sridhar.
I had it break on 3 sites with WP 4.7, using Genesis framework.
I’ve just tested this in WP 4.7, Genesis 2.4.2 and Genesis Sample 2.2.4. It’s working fine.
Can you elaborate on what is broken? Any warning or error messages? Can you share the website or screenshots?
I was just checking in to see if anyone has come up with a solution; all the sites I use this on are using current version of Genesis and I’ve been unable to figure out how to fix them short of doing a different blog template. Thanks in advance.
Hi Sridhar,
is not work in Studio Pro, if possible update this tutorial?
Do you remember my question about custom grid?
https://sridharkatakam.com/custom-home-featured-widget-area-using-flexible-posts-widget-genesis/
With this tutorial for studio pro. It will be possible.
Tthank you