I’ve written before about how to create a template for a custom post type archive. In this tutorial, I’ll show you how to create a custom page template in Genesis that highlights a particular category, or taxonomy, from your WordPress site.
Before we get going, this tutorial is not for you if:
- You’re relatively new to editing WordPress files (or don’t have some development experience).
- You’re not using a site running on the Genesis Framework (although you could certainly take the general concept here and apply it to a non-Genesis site).
Shall we begin?
Article update: Since I originally wrote this article, I’m no longer using the examples I give on this site. The code still works just fine though. 🙂
My mission: Create a page, complete with all the goodies a WordPress page entails and, at the end of it, include a list of posts belonging to a particular category.
For example, let’s say I have a page called Genesis Office Hours with some content about my podcast. Let’s also say I have a category called Genesis Office Hours (slug = genesis-office-hours) where I recap each week’s podcast. Now, I want to create a custom page template to use on my Genesis Office Hours page that also includes an archive listing of all posts in my Genesis Office Hours category. Ya with me?
You are surely wondering why I don’t use the built-in Genesis category archive settings. You’ll find them by going to Posts > Categories > and viewing the Edit Category screen, which looks like this:
It adds an archive headline and archive intro text to a category archive, but I want more because I’m greedy. I want to keep the convenience of the post editor and include some custom fields for the posts in the category archive.
Let’s make it happen.
Step 1: Create a Custom Page Template
I already have a page created, along with a category that has a couple of posts. Up to this point, my page is using the default template, as you can see here:
Once we complete this step, we’ll be able to change the template on our page. But I’m getting ahead of myself.
Create / name your template file.
Using the WordPress Codex on Custom Page Templates as our guide, let’s create a new file and name it something easily identifiable. Since this is a page template I’m going to use for Genesis Office Hours, I’ll call mine office-hours-template.php.
page- prefix as WordPress will interpret it as part of the template hierarchy. Here’s a list of other reserved file names to steer clear of.Add a custom loop that runs in addition to the primary page loop.
Here’s the code I’m using for my custom page template. Digest for a moment and then I’ll discuss.
| <?php | |
| /** | |
| * Template Name: Office Hours Template | |
| * Description: Used as a page template to show page contents, followed by a loop | |
| * through the "Genesis Office Hours" category | |
| */ | |
| // Add our custom loop | |
| add_action( 'genesis_loop', 'cd_goh_loop' ); | |
| function cd_goh_loop() { | |
| $args = array( | |
| 'category_name' => 'genesis-office-hours', // replace with your category slug | |
| 'orderby' => 'post_date', | |
| 'order' => 'DESC', | |
| 'posts_per_page'=> '12', // overrides posts per page in theme settings | |
| ); | |
| $loop = new WP_Query( $args ); | |
| if( $loop->have_posts() ) { | |
| // loop through posts | |
| while( $loop->have_posts() ): $loop->the_post(); | |
| $video_id = esc_attr( genesis_get_custom_field( 'cd_youtube_id' ) ); | |
| $video_thumbnail = '<img src="http://img.youtube.com/vi/' . $video_id . '/0.jpg" alt="" />'; | |
| $video_link = 'http://www.youtube.com/watch?v=' . $video_id; | |
| echo '<div class="one-third first">'; | |
| echo '<a href="' . $video_link . '" target="_blank">' . $video_thumbnail . '</a>'; | |
| echo '</div>'; | |
| echo '<div class="two-thirds">'; | |
| echo '<h4>' . get_the_title() . '</h4>'; | |
| echo '<p>' . get_the_date() . '</p>'; | |
| echo '<p><a href="' . $video_link . '" target="_blank">Watch It</a> | <a href="' . get_permalink() . '" target="_blank">Show Notes</a></p>'; | |
| echo '</div>'; | |
| endwhile; | |
| } | |
| wp_reset_postdata(); | |
| } | |
| genesis(); |
The first thing to note is that I’m not removing the original loop. I want to see my page content in all its glory. Next, I’ve got a query that’s pulling posts from the genesis-office-hours category, and ordering those posts by the post date.
Then, I’m looping through any posts returned in the query, printing a few choice elements to the screen. In addition to modifying the query to suit your needs, you’ll want to change what’s echoing to the screen. I’m grabbing a custom field on line 27 and using it to build some strings. Other than that I’m using a few functions like get_the_title() and get_the_date().
Go ahead and get your template customized just like you want it.
Save your file and upload it.
Upload your custom template file to your site’s active theme folder (a sub-folder within the active theme folder works too). Do not upload your template to the Genesis folder as it will be removed next time you update Genesis – instead, use your active child theme folder. For instance, either of these directories will work:
/wp-content/themes/my-child-theme
/wp-content/themes/my-child-theme/my-templates
The hard work is now done. The rest is an easy downhill slide!
Step 2: Use Your Custom Page Template
Remember earlier when I showed you this?
I was getting ahead of myself, but now we’re ready. Go into the edit screen for whichever page is going to use your custom page template. From that Page Attributes menu, use the drop down to select your custom page template.
Don’t see your template in the list? Verify you uploaded your template to the right directory per the last step.
Save your page, go view it in the browser and pat yourself on the back for your success.
Want to create a page that simply lists posts by category?
I wrote a tutorial for it. 🙂
Create a page that lists posts by category (using the Genesis Framework)
Hey Carie.. Thanks for the great article.Acaully i am new to genesis framework and i created the blog template with custom Wp_query loop with Pagination and it works fine but i also want another custom loop for sidebar to display latest events and it works fine on the 1st page but my latest posts are missing on 2nd and so on pages…please help me
This doesn’t sound like a Genesis-specific problem so much as an issue with either:
* multiple loops (https://developer.wordpress.org/themes/basics/the-loop/#multiple-loops)
* or template (https://developer.wordpress.org/themes/basics/template-hierarchy/)
First, Thanks for this wonderful information. This article is very helpful to all users. Thanks a lot for sharing.
You’re quite welcome!
This is great, is there a way to add a class for styling which would go around the posts section of the loop part (ie: around the ‘area’ where the posts are pulled in) I understand how your brought classes in around each post, i’m asking about one class or ‘wrapper’ around all the posts area that the loop pulls in, yet does not encompass the top of the main page content area?
Thank you for all your great stuff 🙂
Sure thing! I think Damien’s suggestion of adding a custom body class would work. Here’s a tutorial for that.
Basically, you’d add the custom body class and then target the posts section with something like this:
.custom-class .contentWould it work for you to add the class to the div with ‘one-third first’ classes? Or do you want it higher up?
Another option could be to add a class to the body of the page by using the ‘body_class’ filter.