I created a new Genesis Grid Loop in May ’13!
I had to figure this out for my last project which was the Sure Fire Market Place. I didn’t use the Genesis Grid Loop but I needed a grid style layout to display the products correctly. On top of that, I was using a plugin which uses custom post types.
So, here’s how I made a Grid Style Page Template with Custom Post Types on my Genesis Child Theme…
[sws_yellow_box box_size=””]* UPDATE: Added ‘paged’ => get_query_var( ‘paged’ ) to WPQuery [/sws_yellow_box]
Remove the standard loop
The first thing I had to do was remove the standard genesis loop to create my own.
In my loop, I want it to pull the posts from a post type, not the standard wordpress posts. So I added the following function.
Because this is a page, I wanted to keep the page title and content in tact, similar to how category pages work. So the first part displays the title and content of the page as you would type it in the title and content box.
The second part edits the query that will be pulling our posts. To learn more about what you can manipulate in the WP_Query, check out the wp_query codex.
‘post_type’ is the slug of the post type that you want to display. ‘posts_per_page’ is pretty self explanatory.
Now, what’s cool about this is the “genesis_custom_loop” function. This will spit out the standard genesis loop with the new query that you just produced. So now, everything post in the “Products” custom post type will display as a standard blog post.
I don’t want standard blog posts, I want a grid! So let’s start to manipulate some of the post parts with Genesis Hooks!
Genesis Column Classes
The Genesis Framework has an amazing part of it’s style sheets called Column Classes. I never really used theme that often, but now that I had a need, I’m so happy they’re there. You should be too, because now you can do cool stuff like:
With this cool little snippet, we’re adding a new class to the posts as they display on the page. Using “global $loop_counter” will count how many posts are being displayed on the page. With a little bit of math, we can add a class to every first post!
Edit the featured Image
In the genesis theme settings, you have the option to display featured images on archive pages. I like featured images, but on my custom post type, I had to display them a bit different then in my regular post. So to remove them I added the following code:
This code disables the option selected in the Genesis Theme Settings screen. Now I can add my own featured image with the code I got from my Genesis Featured Image post:
Last but not least, remove the post info and post meta:
And that’s it!! I’m sure there are many different ways to do this and get the same results. I’m all about simplicity so if you know of an easier/different way, please share.
[sws_button class=”” size=”sws_btn_medium” align=”sws_btn_align_center” href=”http:surefirewebservices.com/sure-fire-market-place” target=”_self” label=”View How It Looks” template=”sws_btn_black” textcolor=”” bgcolor=”” bgcolorhover=””] [/sws_button]
*Use Your Own Custom Loop
If you want to create your own custom loop and not use the hooks and filters offered by Genesis, replace the following:
Then you’ll have to add “while” statement.
Once that’s in, you can go nuts! Check out Create A Custom Loop without Genesis Hooks for more info on creating a custom loop.