Creating WordPress Page Templates

Once you begin creating templates in WordPress, you’ll quickly realize that the basis of each template is quite similar among them all. If you take a look at my previous post, where I described how one might go about formatting the WordPress loop, you’ll see that the code for the index.php file looks strikingly like the code I’m about to place below:

<?php get_header(); ?>
<section class="row">
  <div class="small-12 columns text-center">
    <div class="leader">    
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    
      <h1><?php the_title(); ?></h1>      
      <p><?php the_content(); ?></p>     
    <?php endwhile; else : ?>    
      <p><?php _e( 'Sorry, page found.' ); ?></p>    
    <?php endif; ?>    
    </div>
  </div>
</section>
<?php get_footer(); ?>

The reason the code inside the page.php file is almost identical to the code inside the index.php file is because the loop works the same way for pulling posts as it does for pulling page content.

So, why does this code go inside the page.php template? Well, to answer that question, I suggest you review my “WordPress Page & Post Templates” post, where I go over exactly how the WordPress hierarchy functions and why the name, “page.php” is important.

Speaking of the WordPress hierarchy brings me to my next point. What if you want to create a custom page type in WordPress? What does that look like? Well, I went over that in one of my previous posts as well, but I’ll cover it here.

In the example below, I’m going to be placing code inside a template named “page-sidebar-left.php.” If you look at the WordPress hierarchy, you’ll notice that we aren’t bound to any naming conventions when creating custom page types. The naming convention for this is simply “$custom.php.” What differentiates the page among other templates and makes the template available inside the WordPress admin is the comment code at the top of the page. Here, take a look:

<?php
/*
  Template Name: Left Sidebar
*/
?>
<?php get_header(); ?>
<section class="two-column row no-max pad">
  <div class="small-12 columns">
    <div class="row">
      <!-- Primary Column -->
      <div class="small-12 medium-7 medium-offset-1 medium-push-4 columns">
        <div class="primary">    
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>        
          <h1><?php the_title(); ?></h1>      
          <p><?php the_content(); ?></p>      
      <?php endwhile; else : ?>      
        <p><?php _e( 'Sorry, no pages found.' ); ?></p>      
      <?php endif; ?>    
    </div>
    </div>
    <!-- Secondary Column -->
    <div class="small-12 medium-4 medium-pull-8 columns">
      <div class="secondary">
        <h2 class="module-heading">Sidebar</h2>
      </div>
    </div>
  </div>
</section>
<?php get_footer(); ?>

Take a look at the: Template Name: Left Sidebar comment code at the top. This code alone indicates to WordPress that there’s a custom page type available and that it should be included in the “Template” drop-down box inside the page edit admin. Also, if you’ll notice, we don’t really have any dynamic code being pulled into the secondary column yet – we’ll get to that in later posts. For now, focus merely on what a custom page type looks like and how to set one up properly so it’s recognized by the CMS.

If you like reading about WordPress and are interested in how to create templates, you really should check out some of my other posts. You can find them in the WordPress category. Enjoy!