The Agency Pro Theme has a beautiful and sleek post grid that gives the theme a very polished look.
I'm going to show you how to take this post grid out of the Agency Pro Theme and incorporate it into other Genesis themes.
Note: I changed the CSS class names from the original Agency Pro stylesheet because, it doesn't make sense to maintain the theme specific naming conventions.
Here's The End Result
I am using the Genesis Sample theme in this tutorial, but it should work with just about any Genesis theme.
If you have trouble with a particular theme please contact me I'll see if I can help 🙂
Step 1: Functions.php
Add the following to your themes functions.php file to define a new image for the featured posts grid.
Now we're going to register a new widget area specifically for our featured posts area.
Step 2. Front-page.php
If you child theme doesn't have a front-page.php file in the root directory then you need to create a new file and name it front-page.php.
We're now going to add a specific class to the body element on the home page only. We're going to use this body element in order to style our featured posts grid without affecting the CSS styles for posts on any other page.
Afterwards, we are going to define the HTML markup we want to use on our front page.
Then we are going to ask the question, "Is the post widget area being used on the front page?" If the answer to that is, yes. We're going to remove the default genesis loop, tell it to display full-width content, and then to display our widget area.
Step 3. Style.css
Add the following to the bottom of your child theme's CSS. It is important you never touch the Genesis parent theme's CSS.
These styles are generic and you will have to modify the colors, and any button/link styles to match your theme.
Style 4. Add Genesis Featured Posts To Widget
We're almost in the home stretch are you guys giddy with anticipation?
The next step is to go to Appearance -> Widgets and look for the Genesis Featured Posts widget. We're now going to click and drag that widget into the new widget area we just created called Home Featured Posts Grid.
Now configure the widget settings to look exactly like this with a few exceptions (read below).
Note: You MUST use 6 for your total number of posts or the code will not work properly. Make sure you check to use the featured image except the image size you will select is "home-featured-post". In Bob's example, he is using "home-middle".
If you only want to display posts from a particular category Genesis Featured Posts gives you that option. In Bob's image, he is using "featured product" in my example I am using "Technology.
The following configuration is from Bob Dunn's tutorial on how to set up the Agency Pro Theme.