This is a riff on a post I wrote last year on how to create a template for a custom post type archive. This time I’ll show you how to create a custom page template 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?
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 an experiment I’m trying here on carriedils.com. Let’s also say I have a category called Genesis Office Hours where recap each week’s show. 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:
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
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.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47||
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
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:
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 see the results from my custom page template? Check it out here.