Create a Custom Blog Template

Create a Custom Blog Template

This template works for Genesis 1.9, or 2.0 without HTML5 (it works with HTML5, too, just doesn’t take advantage of it). I’ve posted a new article and gist of how to accomplish this with Genesis 2.0/HTML5.

You know how sometimes you work on a project and can’t figure out how to do something, so you give up on it for a while and then two months later, inspiration hits and you suddenly realize exactly how to accomplish it?

Just me?

Well, that happened to me. For this project, I needed blog pages to pull lists of posts for categories (so, that’s easy to do because of this nifty Genesis Framework tip), but also to pull lists of custom post types. The kicker was that I didn’t want just the standard blog loop on everything–for some I wanted a page that worked more like a portfolio page, for example, just showing a grid of featured images with titles, and on at least one page, I wanted something more like a Pinterest style grid (which is a whole other post). I could accomplish exactly what I wanted by building my $args directly into my template file, but that locked it down so that it could only be used for one custom post type or category, not really a template after all. I really wanted to be able to use the query_args custom field that I use with the regular Genesis blog template but couldn’t see why it wouldn’t “take” when I tried it.

* Disclaimer: really smart developers frown on using the query_args, period, as I understand, but what I really like about it is that I can use and reuse one template file for several different loops, all from the front end, and what I’m doing is something I can also teach my clients to do, which is one of the reasons I love using WordPress in the first place. *

Until I looked deeper into the Genesis files themselves! Turns out that it’s not a WordPress thing, I guess, or at least it’s something built into the Genesis Framework. Once I put that into the template page, I was able to add a query_args custom field and pull whatever I needed.

Featured Image Blog PageIt’s actually so very easy that I set it up on my own website after I wrote this post, so I could have an image to show you. If you click the image, you’ll go to my web design portfolio page and see this template in action (since the project I’m working on hasn’t been released yet).

The Blog Template File

Here’s my blog_featuredimage.php file–call it whatever makes sense to you, and change the div names as well, if you like.

Styling

Change the styling to match what you did for your divs above–obviously you can be as creative as you like with the styling.

The query_args Custom Field

Here’s an example of the query_args I used:

post_type=page&post_parent=24&order=rand&posts_per_page=-1

This custom field called pages instead of posts, children of the page I used as my blog template, put them in a random order, and shows all of them (instead of splitting them into multiple pages if there are more than what’s set to show on one blog page). You can use it with a custom post type, a category (as mentioned in my previous post), whatever you like.

This was actually surprisingly easy to implement–I was quite pleased.

Do something awesome. Tell a friend:

subscribe by email

If you're an email kind of person, that's totally cool. Go ahead and sign up here to get the latest blog entries in your inbox! No worries, I never share your address.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Comments

  1. September 26, 2013

    Hello Robin, I used the above code instead of the usual genesis grid loop. But when one of the posts has a title longer than 2 lines then the post below in the grid gets pushed down disrupting the grid.

    Is there any work around for this problem so that all the posts remain in one grid irrespective of the post title lengths?
    Thanks in advance for your help.

    • September 26, 2013

      Shri, what you can do in that case is set a min-height on the featured image block (in my case, .rgc-featured-image), say min-height: 300px; … you’ll want to play with that number a bit to see how it works out, but basically you’ll be forcing all of the blocks to be taller (so you might like to make the margin smaller). You may also need to adjust the min-height in your various media queries, but it should be workable with a bit of experimentation. Hope that helps!

      • September 27, 2013

        Thank you so much Robin. I did just what you said- and it worked like a charm. I guess the suggestion for media queries was for themes which are responsive unlike mine. I even interchanged the position of the images and title so that the images remain in one line irrespective of the post title ! Thanks again. 🙂

  2. February 16, 2014

    Robin – this is nice. quick question. Rather than create an entirely new blog template- I’d like my current one to simply bring in another custom post type: ‘podcast’ .

    Is there way to bring that in on the functions.php to tell the blog page to show both types?

    Thanks for your help!

    -Dan

    • February 17, 2014

      Dan, I think this should answer both of your questions. The Genesis blog template can be modified by adding a query_args custom field, so you can set any page using a blog template to follow certain rules. I blogged a bit about that here; another good resource would be the query_posts page in the Codex.

      For example, you could try adding a query_args field with value of post_type=post,podcast (I don’t know if this will work–not sure if I’ve needed to pull two different post types on one page, but worth a try). And querying by category is easy–that is covered in my blog post. Good luck!

      • February 17, 2014

        Thanks Robin! That was very helpful. I created a new blog page using your method. It works! I used to custom fields box in the page to add the arguments.
        Custom field
        query_args field with value of post_type=post,podcast

        That didn’t work- however, when I added post_type=podcast as an argument- that did work (but only for podcast, not post). Seems like one or other.

        Instead of adding this in the custom field box- what I need to do is tell this page to treat podcast post types like post types. Also- the podcast posts weren’t styled like posts either.

        Should I add that argument to the page_blog.php that will do this site-wide?

        Awesome help. Thanks,

        -Dan

        • February 17, 2014

          If you add it to the template, yes, it will do it sitewide. I did a quick google and found this support thread. Maybe try post_type=array(post,podcast) for your query_args? If that doesn’t work, you will want to either modify the template (possibly conditionally, so it will only show posts and podcasts on one page), or set up a pre_get_posts query (again conditionally), possibly in your functions file, or in the plugin where you’ve created the CPT. pre_get_posts is more efficient, and is the better way to set this up, but the custom field has the advantage–and disadvantage–of being accessible in the admin.

          • February 17, 2014

            Tried: post_type=array(post,podcast)- that didn’t work…

            So- sorry, I’m a genesis noob. How would those query args look inside the blog page template? That support thread, I don’t think was for a genesis template.

            Right now I only have the code from your previous example which pulls in the post type.

            Thanks again!

            -Dan

          • February 17, 2014

            Well, what you’re wanting to do is totally independent of Genesis, it’s just a WordPress function. The Genesis blog template usually makes it easy to add in arguments to do what you want, but what you want is a bit out of the ordinary. In addition to the pre_get_posts information, you’ll want to know about Conditional Tags.

            Hypothetically, you can do what you want by adding a pre_get_posts function to your functions.php file. I’ve put together one which might work, but caveat emptor, it’s untested and may break your site if it isn’t correct, so make sure you have a copy of your functions.php file before adding this in case you need to do a quick rollback. It may work; it may not work; it may take down your site if I missed something but I think it’s OK. It’s set to only work on the page with a slug of utw so won’t affect other pages. In theory. Good luck!

          • February 17, 2014

            That seemed close. But, no. Rather than call a specific page (we have 30)- can you call a page template?

            if ( is_page_template ( ) { …?

            That way it will work for all the pages.

          • February 18, 2014

            Weird- I found that tutorial on G+ this morning. That worked like a charm! However- now- the custom queries don’t work. So- every category blog page that I created pulls in *all* posts and podcasts. Now I just have to figure out how to “allow” those custom fields to work on all these pages. Then this will be done!

  3. February 16, 2014

    Robin-

    I think you may be the answer to a problem that I’m trying to solve. On my current blog we have 30 “Channels” for different podcasts. On our new blog, what I’d like to do is create a custom Blog Page for them that is queried by Category. (then I want to add a custom banner for it.

    For some reason in my last installation I was dead set on creating a custom taxonomy called Channels: http://edreach.us/channel/untangling/ Most people just go to the short URL of http://edreach.us/utw anyway. I can cut a corner on this next version.

    So- how can I create a custom blog page that is queried by category?

    Thanks for your guidance.

    -Dan

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.

Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple