This is a simpler version of TheVerge.com style Featured Posts Grid in Genesis tutorial.
We shall set 8 posts (only those with featured images) from a specific category to appear on the front page below header in Genesis in 2 rows of 4 columns. For each post, the featured image appears with the post title overlayed near the bottom on a translucent background. Using a small bit of jQuery, we will define an array of pre-defined colors from which one will be randomly applied as the background for the posts (appears on hover).
For smaller screen widths, 2 posts will be made to appear per row and on even narrower screens, 1 post per row.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
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.
Create a file named say, home.js in child theme's
js directory (create if not existing) having the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.