In this tutorial I share the code for displaying 7 Posts from a specific "Featured" category in a colorful grid styled to look like the one on The Verge on the front page below the header in Genesis.
On hover:
At 767px and below the Posts will appear one below the other:
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Live Demo link at the end of tutorial.
Step 1
Categorize the Posts that you wish to showcase on the front page in the grid under a category named Featured. Ensure that featured images are set for each. The query code is written to pull only the posts that have featured images.
Step 2
Edit child theme's functions.php.
a) Replace
A+ again. How could this be changed to display full width of the home page?
-Scot
In the functions.php code above, change
line 27 to http://pastebin.com/raw/eTGMFPtt
and
line 55 to http://pastebin.com/raw/MUrpCcx7
Sample screenshot: http://d.pr/i/XdfF
Thanks. Great job.
Good stuff, just super!
I like the concision with your PHP, Sridhar. A lot of tutorials out there seem to be ‘bloated’ with the unnecessary.
Good stuff :).
[…] is a simpler version of TheVerge.com style Featured Posts Grid in Genesis […]
This is one of my favorite Sridhar tuts; it really adds some flavor, some professionalism to your site — especially relative to a Genesis Grid or Genesis Posts plugin.
Is it possible to use this in the theme “Beautiful” with a sidebar on the home page? Perhaps with a 2 column grid?
Thank you!
Barbara
Yes.
I saw your comment in the other tutorial with simplified grid. Do you still want to implement this in Beautiful Pro?
No, thank you – I’m good… but for others – it may be a good tutorial 🙂 Have a good day!
This is fabulous, thanks! Curious, could the order of the post be changed? Right now they’ll display (I think) the latest at the left, but if I want a different order, can this be done?
You can add the
orderbyandorderparameters in the query like this: http://pastebin.com/raw/iYqtMTzN.Add the code given in the first block at http://wordpress.stackexchange.com/a/91875/14380 to make the menu order field available for Posts. Then edit the Posts and enter the menu order so the posts appear in your desired order in the front end.
Remember that Posts are set to appear one below the other in columns. i.e., 1 and 2 in column 1; 3, 4 and 5 in column 2 and 6 and 7 in colum 3.
Many thanks. I was close, so close. Thanks again!
Thanks for this tutorial! Is there a way to see this in front-page 5 section of altitude pro?
Hi Sridhar,
Is it possible to use this with a traditional widget area just in case someone decides not to use it later. They can just drag the widget off?
Thank, Anita
Great tutorial but doesn’t work with your grid layout… how can i implement it? Thanks!
Can you elaborate? Which tutorial/theme are you referring to when you say “your grid layout”?
Can you provide the URL of your site?
This one https://sridharkatakam.com/posts-grid-genesis-using-css-grid/
I did it, i put is_home instead of is_front_page here
// if we are not on front page, abort.
if ( ! is_front_page() ) {