custom page template Genesis

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.

Carrie Dils

I’m a recommended Genesis Developer with 15+ years experience in web design and development. I'm creative, resourceful, and ready to put my mind to your project. Want to discuss your WordPress project? Let's talk!

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?

  9. says

    I changed to use the ‘genesis_entry_content’ action so that the generated content is inside the .entry-content div.

    I converted the above code to get my CPTs and I use the Advanced Custom Fields plugin to store the custom fields (as it allows for a nice data entry form).

  10. says

    Love the tutorial however what I’d like to do is say in on my ‘Furniture’ page I’d like to add 4 of the most recent blog posts (with header & featured image) at the bottom all aligned in a row. The Php file is working fine but maybe its my css?

  11. Tony says

    Hi Carrie,

    I pretty new to WordPress in general, I haven’t used in since ’11 and was making my own themes.
    I need a custom static homepage, can I build a child theme and add a front-page.php file to get the homepage I want. Basically I need something like a combination of the executive theme and the news theme home pages.

  12. says

    Hi! How would i edit the markup for the section, only on the interior pages? Basically, I want the header in the front-page.php to be different from the single.php pages. I created a template here that i can use for all my interior pages, but I figured there has to be another (simpler) way.

  13. says

    I have tried to get this work and it pull any posts to display. I even gave some old posts the category of “genesis office hours” and it still isn’t pulling any posts to display. Is it because I have Prose, which is always confounding? Thank you for any assistance you can provide.

  14. Mark Romero says

    Hi there, Carrie:

    Thanks so much for this tutorial (and for EVERYTHING you do – really appreciate your twisted sense of humor you use to spice up your blog).

    This might be a stupid question, but since I don’t see you mentioning plugins / tools to create your custom post types, custom taxonomies, nor custom fields, I thought I should ask.

    Can the genesis custom field function, similar to the one you listed at line 27 above:

    genesis_get_custom_field( ‘cd_youtube_id’ ) );

    Be used to call custom fields that were created with Advanced Custom Fields plugin?

    I know it might be strange to ask that here – and I am certainly not trying to ask you for support for a third-party plugin, but is a custom field always a custom field? I mean, do they live in the same place in the database no matter how they are created?

    And if you don’t use the ACF plugin, do you have a preferred way of creating custom fields?

    Thanks in advance for any help.

    ~~~~

    BTW: Since I know I am not the only one who is really trying to understand the whole ball of wax of custom post types / custom taxonomies / custom fields / genesis CPT archives, and the Custom Page Template that you provided above, it sure would be great if there was a single road map to kind of put it all together for genesis 2.

    The difficulty for people like myself is we are often having to pick up bits and pieces of code from different places around the internets, and some of it is for Genesis 1, some for Genesis 2, some for wordpress WITHOUT genesis at all. And each person who writes about it has a completely different method of doing it.

    I know it is wishful thinking on my part. Maybe just an OVERVIEW of the start to finish process for creating custom post types, custom taxonomies, custom fields, genesis cpt archives, and your cpt page for people who are having difficulty putting it all together.

    • says

      Hey Mark,
      Good question. :) Yep, you can call any custom field using genesis_get_custom_field('cf-name') (assuming you’re using the Genesis Framework, of course).

      Custom fields are stored in the wp_postmeta table as a key/value pair (key = the custom field name and value = whatever that value is assigned to that custom field). This database diagram may help make that more clear.

      Regarding your second comment, you’re right that it is a “whole ball of wax.” :) Maybe a tutorial forthcoming…

      Cheers,
      Carrie

      • Mark says

        Thanks so much for the quick reply!!!

        “Yep, you can call any custom field using genesis_get_custom_field(‘cf-name’) (assuming you’re using the Genesis Framework, of course).”

        Ok, so all things being equal, it is probably better to call custom fields with the genesis built-in function than with a third-party plugin call function, since if there is a problem with that third-party plugin down the line, the genesis call will still be working, right?

        ~~~~

        One more idea to pass along while you are mulling over future tutorials…

        Since you created the Winning Agent Pro theme (and I assume would like to see it become even more popular), maybe you could post some business and marketing tips on how us site developers might be able to get more real estate clients?

        Maybe even just a snappy response to say to a potential client when they loo at you with all seriousness and say, “Oh, I will just do my site it in wix for free…”

        Thanks again.

        • says

          Ok, so all things being equal, it is probably better to call custom fields with the genesis built-in function than with a third-party plugin call function, since if there is a problem with that third-party plugin down the line, the genesis call will still be working, right?

          I’d say yes… take ACF for instance. You might eventually ditch that plugin for something like CMB, but the custom fields will still exist in the database, so you could continue to call them via the genesis function.

          Check out winningagent.com and subscribe to the blog – might be some good insights for working with the theme and real estate clients. :)

Trackbacks

Leave a Reply