Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

Genesis Grid Style Page Template with Custom Post Type

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:

with

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.

Advertisement
About the Author
What's UP! This is my site, I write 99% of the articles on here. I'm also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I've made courses and have a membership as well to help get you on your feet!

0 comments on Genesis Grid Style Page Template with Custom Post Type

  1. Affan Ruslan says:

    Hi Jonathan, great tutorial.

    Let’s say I want to use it at homepage, how do I use the code above?

    I know I’ve to save it as home.php, but how do I change the query to show the lastest post first (like blog loop) ?

    1. Jonathan says:

      Well if you’re using the custom post type on the homepage and you want the latest posts first, you wouldn’t have to do anything since by default, the latest ones will appear first. If you want to reverse that order, the you can add: ‘order’=> ‘ASC’ under $product_args

      http:surefirewebservices.com/wordpress/how-to-reverse-the-post-order-using-the-genesis-framework

      If you don’t want to use a custom post type, then I’m pretty sure you can just remove the query as it will pull posts by default as long as you have the loop. Please let me know if this helps.

      1. Affan Ruslan says:

        Hey Jonathan, that works perfectly.
        So this is what I have in my home.php https://gist.github.com/3172681

        I know I can use it sitewide by putting it in functions.php.

        Can I ask you few more questions.

        I wish to swap the position of my title and picture (like in your marketplace page), as well as remove the excerpt at homepage. I tried choosing content limit, and set it to 0 from the Genesis settings page, but that doesn’t work to eliminate the excerpt

        1. Jonathan says:

          To move the image you’ll have to add something like this: add_action(‘genesis_before_post_title’,’surefire_market_post_image’, 0);

          and your new function will be the new genesis featured image <-- click the link for function info! To remove the content you can do something like remove_action('the new loop you created function','genesis_do_post_content'); Something like that should work out.

  2. Jeremy Tews says:

    Implemented this code and I have it working almost the way I would like. Two things I am still trying to figure out

    1. How to get the title to display above the image?
    2. How do I get it to just display the title and the image, not the content on the template page?

    If you could help me in figuring this out, it would be much appreciated.

    Thanks for this post by the way – saved me a ton of time trying to figure this out.

    Thanks in advance.

    Jeremy

    1. Jonathan says:

      Hey Jeremy, to get the title above the image just replace this:
      add_action(‘genesis_before_post_title’,’surefire_market_post_image’, 0);
      with this
      add_action(‘genesis_after_post_title’,’surefire_market_post_image’, 0);

      To just display the title and image don’t add “the_content()” anywhere. OR if you don’t have that and you’re seeing the content in the loop, remove the content action:
      remove_action(‘genesis_post_content’, ‘genesis_do_post_content’);

      Hope that helps!!

      1. Jeremy Tews says:

        Brilliant!! That worked great. Thanks again for this – much appreciated.

        Jeremy

        1. Jonathan says:

          No problemo!! You should sign up for the my newsletter and SPREAD THE WORD!!! =) Glad I could help.

          1. Jeremy Tews says:

            I went ahead and subscribed…thanks again….

  3. Supat Sutti says:

    It’s still difficult for me.. you should teach step by step or telling what name of file to create.. I need to use this feature I wish you could teach me again.. on this topic

    Thank in advance
    Supat

    1. Jonathan says:

      well this is a page template so you can save the file as customgrid-page.php or something like that. Once you do, you’ll be able to select it as a template on any page you create. If you have any other specific questions, I’ll be more then glad to help!

  4. Gwen says:

    Just wanted to thank you for this! I’m putting a custom post type on my personal blog and needed a cool way to archive it. Thanks so much for sharing…

    1. Jonathan says:

      You are very welcome!

  5. Hi Jonathan,
    I have used your custom loop in a site of one of my clients. And it works great except for the order of the posts. If I change the date of a post it doesn’t change positon in my template. I have tried adding ‘order’=> ‘ASC’ under $product_args but it doesn’t change anything.

    Kind regards,
    Christine Prudon

    1. sorry forget my last post… found the problem…

      1. Jonathan says:

        All good! =) Let me know if you run into any other issues.

  6. Chase says:

    Hi Jonathan,

    Great tutorial. Works as expected. One thing I’m wondering if you can help me with. I have custom posts associated with taxonomy “paper_author” . I’m trying to display the taxonomy associated with the post below the content of the post. I added echo get_the_term_list( $post->ID, ‘paper_author’, ”, ‘, ‘, ”); below the_content but this returns nothing. I have no problem getting this to work in a regular wordpress loop but have had no luck with using the genesis custom loop. Is there another way genesis handles displaying taxonomy? This has been driving me crazy for weeks. Seems like it should be easy but nothing I try works in genesis. Any help with this matter would be really appreciated.

    Thanks!
    Chase

    1. Jonathan says:

      Hi Chase,

      Did you try to add global $post; before the loop?

  7. jenny says:

    Hi Jonathan.
    we are using lifestyle theme on genesis, how do we get post excerpts on the blog page to display whatever length we choose for any post then have the read more link as and where… and really importantly please, not to strip any formatting of text i.e. bold words italic etc or the thumpnail image can be seen in the excerpt etc!

    If you kindly have some code I can use and tell me specifically where to paste it in what file in my theme and where abouts specifically within that file to paste it (as code and doing this stuff is new to me) and we tried a plug in called Advanced Excerpt) – which is supposed to do all this BUT it could not work and thus done nothing – also a few others found the same problem. ( http://wordpress.org/support/topic/plugin-advanced-excerpt-advanced-excertps-does-not-work)

    many thanks
    Jenny

    1. Jonathan says:

      Hi Jenny,

      You don’t need a plugin. There’s two things you can do, one is actually use the excerpt box in the post. The other is to add the more link in the post (it’s a button in the toolbar). The third is a function:

      That will remove the …

      And
      [php]function custom_excerpt_length( $length ) {
      return 20;
      }
      add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 );[/php]

      Would change the length.

      Hope that helps.

      1. Jenny says:

        Many thanks for getting back so quickly J!

        Not quite sure of your reply and what to do,
        1)
        So if I wanted to make sure where the original main post formatting is kept with certain words that were bold, italics etc to also be seen in an ANY excerpt what do I need to to as right now they get stripped out no bold seen, italics or a few paragrapghs get seen as one larger paragrapgh and automaticaly seem to cut off where it felt like doing this!
        2) So how do I get much more longer paragraphs to be seen in the excerpt what I want and not also stripping out any paragraph formatting? and included the thumbnail image.

        I had already tried applying the more button in the tool bar etc where I wanted it to be read upto in the excerpt BUT it did not override and give me any longer and same problem nothing was different..

        Not sure what you meant by applying the function code and your description

        “That will remove the …

        And”

        nope- sorry I am not understanding what this means these words in quotes make no sense to me (plus if adding a code is going to be the best way need to know where to paste it exactly in what file and where in that file.

        many thanks for your patience
        Jenny

        1. Jonathan says:

          Hi Jenny,

          I’ll look into getting the format sticking, but for the excerpt, make sure that in the Genesis settings you have it to display all the content, and not just the excerpt. If you do that, then add the more link should work. I’ll get back to you on the other stuff.

          1. Jenny says:

            Thanks for getting back Jonathan
            saw the link you kindly gave before I posted to you…Its actually ‘above my station” frankly so to speak with his code and pasting and explanation done in two parts on his site he goes into and talks about what to do plus then editing further his code making sure to get to get the right things going on (so not to screw anything up!) gosh oh well, …so will carry on trying to find a plugin or some other solution.
            again really appreciate your help anyways on this – good of you.
            I’ll try genesis forum
            regards
            Jenny

          2. Jonathan says:

            Sorry I couldn’t be of more help. Some of the changes to themes do require a bit of php knowledge. If you want I can do it for you, just shoot me an email and we’ll talk about it.

  8. Nitin says:

    Hi Jonathan,

    Need a little help, if you could please.

    I was not keen on using the Timthumb as I hear it is not safe. So, if I do not use the code under these two
    // Remove The Default Featured Image and //Add New Featured Image. In that case, (1) how do I move post title to below featured image and (2) remove post content which is also showing

    Everything works like a charm. Thanks in advance.

    1. Jonathan says:

      Hi Nitin,

      I’d definitely take a look at the New Genesis Grid Loop at the beginning of this article (just updated it) for the images. To remove the content you can do that in the Genesis Content Archives settings. Also:

      [code]remove_action(‘genesis_post_content’,’genesis_do_post_content’);[/code]

      For 2.0 with HTML 5 enabled, it will be

      [code]remove_action( ‘genesis_entry_content’, ‘genesis_do_post_content’ );[/code]

  9. eric says:

    hi Jonathan,

    I was following your tutorial since i learn few things about Genesis and i can say your skills is a surefire awesome. please continue what you are doing.

    I have some question, i am not sure if its done before i tried to google it up but no luck.

    http://img513.imageshack.us/img513/3556/onta.jpg

    as the image shows i have no problem implementing the sidebars and the blog. what nailed me is that six category section display in grid and inside each box contains post list.

    am not sure if this is doable so i take advantage of asking the expert.
    please advice what is the best approach for this.

    thanks

    eric

    1. Jonathan says:

      Hi Eric,

      Thank you so much for the kind words. There’s a couple ways you can do this. You can create a front-page.php file and add the 6 widget areas that you need. Style them in a grid format and use the featured posts widget in each area.

      Or you can check out one of the most powerful plugins ever and my personal favorite wp-types and views(aff link) which will do what you want without any crazy coding =).

      If you need more assistance or help putting it all together, contact me at my project assistance page.

      Thanks for checking out the site, hope this helps! =)

  10. Once again, you’ve saved my neck with a single line of code. Yeesh! Customizing the heck out of a portfolio page template. Couldn’t get the stinking page title outside the even/odd grid. And then I found this page after a solid day and a half of searching.

    I removed the original do_loop the old-fashioned way and added the title back in using your code (echo h1 to the_content) with just above where the grid starts and bingo. Mission accomplished.

    Once again, I thank you, good sir!

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top