Featured Image Custom Blog Template

Featured Image Custom Blog Template

Updated Custom Blog Template for Genesis
( what the template should look like )
I’m learning new things all the time, and like to share. I’ve encountered some issues with the blog template I created, so I’ve been sorting them out. I was going to just edit my previous template post, but I thought about it and decided that my followup work deserved its own post, mainly because I was just going to confuse myself along the way.

The big issue I discovered with my template was that the pagination wasn’t working. Very very sad face–because, after all, if you have more posts than will show on one page, obviously you might want to be able to continue on to the second page, or the third.

Actually, I’ve done more research and figured out that the original template (with pagination fixed) will work just fine, but if your site is using the new Genesis 2.0/HTML5 markup, you’ll want to use this one instead, because it takes advantage of it. The other template will work, even with Genesis 2.0, but you’ll lose the HTML5 juice if you have that enabled. If you are using Genesis 2.0 without HTML5, then use the other. This (probably) really won’t work.

So, here is the new and improved custom blog template code:

Note that it’s calling a featured image “portfolio” … if your functions file doesn’t create an image size called portfolio, you’ll want to pick a different thumbnail size there. Additionally, I’ve added a conditional so that the content of the blog page itself shows only on page one, not on subsequent pages.

For styling, I wanted to come up with a way to use the template whether it was a full width layout or a more standard blog layout with a sidebar. Once I realized that they each had their own body class, it was easy. The smaller width has two columns of images; the larger has three.

You can still use a query_args custom field with this to pull a certain category or change the number of posts per page. Again, this is live in action on my web design services page here on my website. Enjoy!

Reader Interactions

Comments

  1. Steph says

    Hello,

    This (and the older) tutorial have been really useful for me as I’m creating a new blog layout.

    However, I have a question and wondered if you could answer it? If I wanted each image to be in an individual box, is this possible?

    So, rather than having a div applied to the whole width, I could have one applied to each box around the images (so I could have 3 boxes, rather than 1 wide one)

    I hope that makes sense!
    Thanks,
    Steph

    • Robin says

      Hi Steph! Thanks for your comment. You can add anohter div around each featured image area if you like, but you shouldn’t need to. Each .rgc-featured-image is its own div–just with my styling, there is no border so no obvious box. If you add a border style into that section (starting at line 28 above), you’ll outline your box. The borders will overlap in between at this point because the side margins are 0, but if you add some margin in the same section, it should come together. Hope that helps!

  2. Janeth says

    Dear Robin,

    Thank you very much for your tutorial, it has helped me a lot resolving my project.
    I have one question. I created a custom blog template for my custom post type named RESORTS. Also I added some custom fields to it such as first-name and phone. For some reason when I click on the title I just see the post content but neither of my custom fields. I am adding my custom fields using genesis_get_custom_field and I am placing the custom fields inside the have_post while loop.
    Could you please shade some light on me? I am so stuck at this point.

    Thank you very much,

    Janeth

    • Robin says

      Janeth, how are you calling the content? If you do not call the content at all, can you pull your custom fields? It’s difficult to know what’s going on without seeing your loop code. You might try posting it as a gist on GitHub and if you want to email me from my contact page with the link, I can try to see what’s going on. Good luck!

      • Janeth says

        Hi Robin,

        I got it solved using genesis hooks to add the custom fields after each single post content. I am going to open a github account so the next time I can be more clear. I apologize if I am being confuse. I am starting to learn Genesis and wordpress to help a friend to create a website, but sometimes it gets a little overwhelming since all this is pretty new to me. Thanks again for your tutorials, they really have helped me to understand worpress and genesis.

        Blessings,

        Janeth

        • Robin says

          I’m glad you got it sorted! No need to apologize–custom fields can be confusing, for sure.

  3. Stefan de Jong says

    Hi Robin,

    Thanks for the great tutorial. I’m stuck for days now on this pagination thing. After implementing stuff according to your tutorial, I still don’t see any pagination. Do you have any idea what it can be? Maybe some settings in the backend?

    Hope you can help me out.

    Thank you very much!

    Stefan

    • Robin says

      Stefan, not sure why it wouldn’t be working. I would double check that your args do contain the line 'paged' => get_query_var( 'paged' ) ). If it’s there, then sure, try changing the pagination settings in the Genesis settings, although I’m not sure if that would change anything. If you want, you could post your code as a gist on github and I could try eyeballing it to see if anything stands out to me one way or another.

      • Stefan de Jong says

        Hi Robin,

        First of all many thanks for your quick response!

        The line of code you mention is there. I’ve tried most solutions out there, unfortunately without any success.

        I’ve created a gist so hopefully you can help me out.

        https://gist.github.com/stefandejong/acfd87ae6770a079763e

        Again many thanks, I really appreciate your help!

        Regards,

        Stefan

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.