WordPress Page & Post Templates
In this post, I’m going to cover a few aspects of static page templates, blog post templates, comment templates along with post formats. Setting these types of templates up is actually a lot of fun. There is a fair amount of flexibility when it comes to how far you can drill down with specificity inside WordPress and the WordPress naming convention is as straightforward as it comes.
Static Page Templates
If you remember back to the
WordPress template hierarchy, you’ll recall that there’s a certain flow to how static page templates work. In this section, we’re going to go over some scenarios. But first, let’s look at the applicable area in the hierarchy.
In the default setup, the page.php template is what WordPress uses to display static pages. If you take a look at the above image (click to enlarge), you’ll see that template all the way over to the right. That page has the following code in it:
Code:
<?php
/**
* The template for displaying all pages
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages and that
* other 'pages' on your WordPress site will use a different template.
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
get_header(); ?>
<div id="main-content" class="main-content">
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
// Start the Loop.
while ( have_posts() ) : the_post();
// Include the page content template.
get_template_part( 'content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile;
?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
<?php
get_sidebar();
get_footer();
If you read the comment at the top of the code, you’ll see that this page.php code comes from the Twenty Fourteen theme. If you’d like to see source code like this and from other WordPress files and themes, you can
check out this site.
In the broadest sense, when you set up a basic WordPress install and have a broad based theme, the page.php template is what you’ll see for all your static pages. If you want to narrow down and display more specific layouts for various pages on your site, you could do that by creating new pages that are named differently. Of course, you must follow WordPress’ naming convention, but like I said above, that’s easy.
I’m going to use this very website as an example for this post. As of this writing, I have five static pages up in the top navigation bar. They’re called, About, This Website, Resources, Sites I Like and Contact. Right now, I’m using the standard page template that came with the theme I’m using and haven’t altered anything. It works fine for my purposes, but what if I wanted to add some special functioning or layout to the
About page that I couldn’t achieve with the standard page.php template? Well, I could solve my problem a few ways.
Creating Static Page Template Files
Page ID Method – The first way I could create a stand alone template for my About page is to go in the admin area and click to edit that page. Once I’m in the editor area, I can look to the URL bar to see what “post” the page has been assigned to. In this case, my About page is under post 591. So, with that knowledge, I can make a copy of my
page.php file and name the new file,
page-591.php. After I do this, WordPress will begin using the page-591.php template – only for my About page. All other static pages will still use the page.php template. If you refer to the hierarchy image above, you’ll see that the page-591.php template follows the naming convention of the red box directly to the left of the blue page.php box. In the image, it says
page-$id.php. Now, if I wanted to, I could change the code in page-591.php any way I wanted to.
Page Slug Method – The second way I could create a stand alone template for my About page is to go back to the edit page area and take a look what the slug of the page is. Since the name of my page is “About”, I kept the slug the same, but lowercase. By the way, if you don’t know what a slug is, read below:
—
A slug is a few words that describe a post or a page. Slugs are usually a URL friendly version of the post title (which has been automatically generated by WordPress), but a slug can be anything you like. Slugs are meant to be used with permalinks as they help describe what the content at the URL is.
Example post permalink: http://wordpress.org/development/2006/06/wordpress-203/
The slug for that post is “wordpress-203”.
Reference
—
Now, if you refer back to the hierarchy image above, you’ll see a red box to the left of the first red box I just talked about. This new red box has page-$slug.php written in it. Everything that I just wrote above applies to this new file that you can create – just the naming of the file is different. If I wanted to go this route instead of the page-591.php route, I would name my file page-about.php. This would create a special template specifically for the About page. Remember, these naming conventions are valid for any static pages, not just my About page.
Custom Template Method – Let’s say that the reason I wanted to create a different About page template was because I wanted to display that particular page at full width. If I was sure that only the About page would ever show at full width, it would be reasonable to make custom About page templates the way I just described above. But, what if I thought I’d be adding more full width pages in the future? Since that’s a fairly generic change, I could simply create a custom full width template and apply any page I wanted to that template. Then, as I make full width pages in the future, I could use that template for all of them. The way to create a custom template in WordPress is to create a new file named pretty much anything you want. In this case, I’ll call this file, page-full-width.php. That will keep things clear as I’m browsing the files during development.
If you’ll notice in the code below, I copied the standard page code over to this new template to be edited later. The important addition to take notice of is the comment at the top. The “Template Name: Full Width” comment will tell WordPress that there’s a new custom template available. As I’m editing or creating a page, I could click the drop-down box to the right of the page editor (Page Attributes) and choose the “Full Width” template. This way, any page that I applied this template to would be using the same code.
Code:
<?php
/*
Template Name: Full Width
*/
get_header(); ?>
<div id="main-content" class="main-content">
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
// Start the Loop.
while ( have_posts() ) : the_post();
// Include the page content template.
get_template_part( 'content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile;
?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
<?php
get_sidebar();
get_footer();
What if I had a custom About page template and a custom Full Width template available? What if I chose to use the Full Width template for my About page? Well, the Full Width page template would override the About template because it’s more specific. The rule is, the most specific template is the one that gets used.
If you’re looking for more information on WordPress page templates,
here’s a really great tutorial put out by Elegant Themes.
Single Post Templates
If you look back up to the top hierarchy image, you’ll notice that the template used for single blog posts is single.php. I’ll give you an example of the Twenty Fourteen single.php code here:
Code:
<?php
/**
* The Template for displaying all single posts
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<?php
// Start the Loop.
while ( have_posts() ) : the_post();
/*
* Include the post format-specific template for the content. If you want to
* use this in a child theme, then include a file called called content-___.php
* (where ___ is the post format) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );
// Previous/next post navigation.
twentyfourteen_post_nav();
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile;
?>
</div><!-- #content -->
</div><!-- #primary -->
<?php
get_sidebar( 'content' );
get_sidebar();
get_footer();
Unfortunately here, we don’t have some of the naming and customization flexibility that we had when dealing with custom page templates in WordPress. We do, however, have more broad customization options. We could, for instance, create custom single post types for specific categories or specific authors. In a later post, I’ll go over how to set these templates up, but for now, just remember that the single.php template controls general single blog posts.
Comment Templates
The layout of the comment section for posts and pages can be found in the comments.php template file. I’ll show you some example Twenty Fourteen code below:
Code:
<?php
/**
* The template for displaying Comments
*
* The area of the page that contains comments and the comment form.
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
/*
* If the current post is protected by a password and the visitor has not yet
* entered the password we will return early without loading the comments.
*/
if ( post_password_required() ) {
return;
}
?>
<div id="comments" class="comments-area">
<?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'twentyfourteen' ),
number_format_i18n( get_comments_number() ), get_the_title() );
?>
</h2>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-above" class="navigation comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Comment navigation', 'twentyfourteen' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'twentyfourteen' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'twentyfourteen' ) ); ?></div>
</nav><!-- #comment-nav-above -->
<?php endif; // Check for comment navigation. ?>
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 34,
) );
?>
</ol><!-- .comment-list -->
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav id="comment-nav-below" class="navigation comment-navigation" role="navigation">
<h1 class="screen-reader-text"><?php _e( 'Comment navigation', 'twentyfourteen' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'twentyfourteen' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'twentyfourteen' ) ); ?></div>
</nav><!-- #comment-nav-below -->
<?php endif; // Check for comment navigation. ?>
<?php if ( ! comments_open() ) : ?>
<p class="no-comments"><?php _e( 'Comments are closed.', 'twentyfourteen' ); ?></p>
<?php endif; ?>
<?php endif; // have_comments() ?>
<?php comment_form(); ?>
</div><!-- #comments -->
Just so you are aware, this particular code displays one comment form for for when someone is logged in, another comment form for when someone ins’t logged in and the comments themselves. If you’d like to customize any portions of these areas, you would do so in this file. In general, the comment area isn’t something people mess too much with, but if you do decide to, you can start off with one of WordPress’ generic templates and customize that code. As I mentioned earlier in this post, you can find code for
multiple WordPress themes here.
Post Formats
Ill admit, it took me a while to figure out what WordPress post formats were. For years, I’d see the radio buttons to the right of my post editor that say, “Aside” and “Gallery” and “Link.” I’d ask myself, “Who wants to post a link?” Really, who wants to post a link? As a post?
But after some research today, I think I’ve got the whole idea squared away. Post formats give you an opportunity to display your site differently than a traditional WordPress site would display.
Say you’d like to setup your homepage to look like a Twitter page. If you choose the “Aside” post format, you could write some short text and then that message would display on your homepage. The thing is, what you just posted won’t have a link to the full post. There is no full post – it’s just that short message that displays. That’s what I think I was having trouble with. Grasping the fact that WordPress is actually responding to the Twitter and Tumblr competition out there.
The same goes for the “Gallery” format and the “Link” format and the “Status” format. These types of posts don’t actually link through to anything (well, the gallery links to pictures). They simply display kind of on-the-fly type messages. Much like many social networks do out there.
So, what is the list of available post formats? Here they are:
Aside – No title. Sort of like a Facebook update.
Gallery – Image gallery. Shortcode with image attachments.
Link – Outside link. There are a few different ways to set this up in the post editor.
Image – A single image.
Quote – A quotation.
Status – Looks like a Twitter status update.
Video – Single video or playlist.
Audio – Audio file or playlist.
Chat – Chat transcript.
Unlike the template files in the hierarchy I talked about above, post formats have their own set of files. If you look in a standard WordPress theme, such as Twenty Fourteen, you’ll see files named, content-aside.php, content-audio.php, content-link.php, etc… Each of these files is named after each post format. If you click into each of these files, you’ll see the code it uses to run that particular format.
If you take a look inside the Twenty Fourteen single.php template, you’ll see a line of code that looks like this:
Code:
get_template_part( 'content', get_post_format() );
This is the code that calls whichever post format you chose to run. The way WordPress chooses the correct template to run is built into this line of code. The ‘content’ part of the above code tells WordPress that the file it’s looking for is partially named, content. The get_post_format() part of the above code tells WordPress which post format you’ve chosen. So if it’s the aside format you want, the file name WordPress would use is content-aside.php. Again, this isn’t in the WordPress hierarchy, but it’s a WordPress naming convention nonetheless.
WordPress doesn’t always make all post formats automatically available. The post formats that you’d like to see in your editor will depend on which ones are coded into the functions.php file. In the Twenty Fourteen theme, here is the line that defines which formats would be available:
Code:
add_theme_support( 'post-formats', array(
'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery',
) );
A few aren’t in this list, but if you were building your own theme or wanted to include the missing ones, you’d have to code those into this line.
Once you take a few minutes to go over what exactly post formats are and how they can be used, things become much more clear. In the case it doesn’t, I’ve listed a few resources that will help out tremendously. These are actually the references that taught me what’s going on with post formats.
