Tutorial: Create a Custom Page Template in Genesis

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:

  1. You’re relatively new to editing WordPress files (or don’t have some development experience).
  2. 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:

Genesis Category Archive Settings

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:

Genesis Page AttributesOnce we complete this step, we’ll be 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.

Name your file whatever you want, but do not use the 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
<?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?

Genesis Page Attributes

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.

Comments

  1. says

    Hi Carrie, how would one call the new template in the functions.php file?

    For instance if I wanted to remove subnav from a post template I would use if (is_single ())

    Thx much,
    Mark

  2. says

    Hi Carrie,

    I am familiar with WordPress, HTML, & CSS and looking to learn the Genesis Framework. THank you for all your informative posts. They are making it easier to wrap my head around Genesis. Keep up the Great work. I’m looking forward to the next Office Hours broadcast.

  3. says

    Hi Carrie,

    I’ve implemented your custom page template idea on w3.hetlandvanooitvanlego.nl/?page_id=643. I changed the maximum posts to display to 6, but pagination doesn’t show up. The other items are just missing. What can I do?

  4. Ginger says

    OK, I feel like a complete idiot but the top the custom page template code that says:

    <?php //remove this entire line

    Well, you need that <?php there and I did what i said and deleted that line. (don't judge, but you can laugh LOL)

  5. says

    Hi Carrie, Nice article, thanks. What if I want to create a custom home page in my very simple Genesis-sample theme? I don’t want to display posts, but just the content of my home page. Maybe add a slider? I would like to display this content dynamically, let say don’t put content in the code, but use WP the usual way.

    • says

      Sounds like you’re after a widgetized home page then? (i.e. displaying dynamic content via widget areas versus a static page)? That’s a multi-part process. In short, you’d need to:

      1. Register any widget areas you wanted in the theme via functions.php
      2. Create a home page (front-page.php) to display your widget areas
      3. Add corresponding styles to your stylesheet.

      You can either pick apart an existing child theme that has front-page.php and deconstruct how it’s done or use something like Genesis Extender, which comes with “EZ” home page layouts to generate something for you without the hassle of code.

      If your goal is to learn it versus just getting it done, I’d pick apart child themes… :)

  6. says

    Hi Carrie

    Firstly, thank you so much for posting this – it is exactly what I needed!

    Secondly, I was having issues implementing the code (I have no knowledge of php). However I noticed the sections

    Start
    $video_id = esc_attr( genesis_get_custom_field( ‘cd_youtube_id’ ) );
    ……………..
    echo ”;
    Finish

    Essentially created what we were after however the “posts” were pretty much just text with a “watch this” and “show me” link at the bottom – the show me link going to the post and the “watch this” link taking back to the category page.

    Any idea why this occurred? Seems like everybody else got this working without any issues.

    I also spent a fair few hours on this so I wouldn’t waste your time :)

    Again thank you!

    • says

      I left out an important step! I’m using a custom field on each of the posts called 'cd_youtube_id' and passing it the unique value of the YouTube file.

      For instance, if this is the full URL to a Youtube video: https://www.youtube.com/watch?v=yp-GvaTL4L8, anything appearing after the = sign is the ID. In this case it’s yp-GvaTL4L8.

      Completing that step would make it work as intended.

      However, if you’re wanting to show something else besides the title, the video thumbnail, and the Watch This/Show Me links (i.e. post content), then you would need to change what’s being spit out in the loop to whatever you want to display.

      If you’re wanting to display something different, let me know and I’ll try to point you in the right direction.

  7. MZ says

    Ah I wasn’t able to get it working! I’m sorry. I’ve literally tried everything. Is it possible for you to take a look? Please :)

    http://www.stemcelltherapyhq.com/neurological-disorders/

    Essentially I can’t seem to make the posts display as they would on any regular blog page / loop. I can see from your code here why they are displayed like that…but would rather they appear as they normally appear on a category page / main blog page.

    Does that make sense? I’ve been chopping and changing various bits of code to no avail.

    Thank you!!

    • says

      If you want it to look like other category pages on your site, the easiest way is to use the built-in Category Archive settings. I went the custom loop route to display those “extras” instead of the usual output.

      • MZ says

        Touché but I also encounter the same issue as you – the category archive does not have the ability to have good quality editing of the article there.

  8. Jay says

    I used your code to create a custom category page for one specific category. How do I add pagination at the bottom, so users can look at additional posts if they want to?

Leave a Reply