Creating a Custom Page Template for Genesis

One of the ways WordPress can be made to act like an all-singing, all-dancing CMS is with custom page templates. These give you the ability to make any page on your website look and/or function differently to all the others. Here I’d like to explain how you make a custom page template for Genesis.

Genesis is a premium theme framework for WordPress which I now use to build all my websites on. I do this because it has many cool functions and effects coded already that I can just pick and tack on to whatever kind of website I’m building.

Custom pages in WordPress

Creating a custom page template is super easy in WordPress. You simply copy your theme’s single.php file, call it something different like, ft-home.php, add the template name at the beginning of the file – using a text editor such as Notepad (Windows) or TextEdit (Mac) like so:

<?php /* Template Name: FT Home
*/ ?>

… and you can add or take away anything you want so that when you create a new page and choose the template you’ve created in Page Attributes (see below), it’ll appear differently to all the other pages.

But with Genesis you make child themes, so it’s slightly more complicated as we don’t have a single.php to copy. So I’ll go into it in a bit more detail.

Custom pages in Genesis

Below you can see two page layouts. On the left you have a standard blog template with a sidebar and on the right you can see a custom home page with no sidebar, a strip of images across the top and a jQuery slider next to the content.

Here is a video of me (stumbling and stuttering through) making a custom page template in Genesis.

An added benefit of creating a custom page for this page is that the tricky code to create the strip of images and the jQuery slider can be hidden away from the client in the custom page template, while the main text could be edited within the WordPress page editor as normal.

To create your custom page template in Genesis, open a new text document in Notepad (Windows) or TextEdit (Mac) and copy this code:

<?php /*
Template Name: FT Home (change name as you see fit)
*/ ?>

<?php get_header(); ?>

<?php genesis_before_content_sidebar_wrap(); ?>
<div id="content-sidebar-wrap">

<?php genesis_before_content(); ?>
<div id="content" class="hfeed">

<?php genesis_before_loop(); ?>
<?php genesis_loop(); ?>
<?php genesis_after_loop(); ?>

</div><!-- end #content -->
<?php genesis_after_content(); ?>

</div><!-- end #content-sidebar-wrap -->
<?php genesis_after_content_sidebar_wrap(); ?>

<?php get_footer(); ?>

… and save the text file as your template’s name with .php on the end.

(I totally stole the above code from How to create a Custom Template In Genesis by Christopher Cochran.)

This file should then sit in your child theme’s directory next to the functions.php and style.css. Then, same as with any other WordPress page template, you can choose the template on a page-by-page basis within the Page Attributes section when editing a page in WordPress.

I added all the extra code in before the <?php genesis_before_content(); ?> line. But, as you can see, you can add content before or after the header, before of after the loop, before or after the sidebar or before or after the footer.

With Genesis you also have the added benefit of being able to choose a basic layout on a page-by-page basis, in this case I choose a layout with no sidebar:

But what if I want more differences in the custom page template?

OK, maybe you’re thinking this isn’t quite as flexible as all that. What if you want to change something within the header, put something else in the footer or mess around with the heading in some way. Well, don’t worry! You can do anything you what with Genesis child themes by way of the functions.php.

So, for the example above, I needed to put something in between the heading and the content on the page, I actually entered the HTML of the heading in the custom page template so it would appear in the correct place. That done I needed to get rid of the page’s heading that would have been spat out by the template as it stands.

To get rid of the heading from this particular custom page, I put this in the functions.php:

add_action( 'template_redirect', 'child_remove_my_template_page_title' );
function child_remove_my_template_page_title() {
if ( is_page_template('ft-home.php') )
remove_action( 'genesis_post_title', 'genesis_do_post_title' );
}

And even I with my appallingly bad knowledge of PHP can tell that the above code removes the page title from the custom page template with the file name ft-home.php.

Genesis comes with umpteen different “hooks” such as genesis_post_title which enables you to add, subtract or edit any page element on any page or pages you want. And the glory of this system is that it just lies on top off the powerful theme framework which remains untouched so it can be updated and improved – alongside WordPress – while your website will look and function the same as alway.

What do you think?

As you can see, I think the Genesis theme framework is a pretty rock solid way to approach WordPress. But what do you think? Do you prefer creating your own themes? Do you use another framework?

How do you create custom pages in WordPress?