Sridhar Katakam

Genesis and WordPress Tutorials

Featured Posts Grid with Random Background Colors in Genesis

by 6 Comments

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.

Screenshot:

featured-posts-grid-simple

Screencast:

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 0

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 1

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.

  • Hi,
    I’m trying to implement this code in Beautiful. My client wants the sidebar to remain – and perhaps have 6 or 9 posts in the grid on the home page adjacent to the sidebar… the code is perfect and working, but sidebar moves under it – I need to know how to hook the sidebar it so that it’s in line with this grid? I think? Any help would be appreciated!

    Thank you, as always for your great tuts…

    Reply

    • Try using genesis_before_loop instead of genesis_after_header in the code and add it before the following in Beautiful Pro’s functions.php:

      //* Hook welcome message widget area before content

      Reply

      • Thank you! My client decided to stick with the full width grid – it looks great – the sidebar is below and that’s fine now with her. I really appreciate your help!

        Reply

        • Still working on this website… Everything works great and looks great, the only issue I’m having is I can’t get the responsive -mobile menu to work – I tried adding code into functions based on tutorial from another one of your tutorials – but no luck… not sure what’s missing – probably some really simple thing I’m overlooking… can you help? The site is: http://jengentile.com

          Thank you so much for all you do!

          Barbara

          Reply
    • >