Website Development & Coding Tips, Tutorials & Techniques

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:

<?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.

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.

<?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:

<?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:

<?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 &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', 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( __( '&larr; Older Comments', 'twentyfourteen' ) ); ?></div>
		<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '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( __( '&larr; Older Comments', 'twentyfourteen' ) ); ?></div>
		<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '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:

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:

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.

– Post Formats at the WordPress Codex

– What is Post Format in WordPress? How to use Post Formats

– How To Create WordPress Post Formats by Elegant Themes

– Post Formats Inside and Out by Tuts+ Code Article

– Twenty Eleven Post Formats – What Are They and Why Should I Care?

In WordPress, you have a few options when it comes to displaying your homepage. You can either display a static one or you can display a dynamic one, such as a page that displays your latest posts. To make the settings according to which one you would like to see, you can either use “Settings > Reading” from the stock WordPress admin area or you can use the “Appearance > Customize” menu, if available to you.

Here is a screen shot of the WordPress admin settings page:

And this is what the “Customize” settings page looks like:

Which Page to Use

When using the static home page setting, you’ll be using the front-page.php file in “wp-content > themes > your-theme >.” Under this setting, your blog listings page will use the home.php file in same directory.

If you decide that you would like to have your homepage to show your latest blog posts, then the home.php file I mentioned above will be used for that and the front-page.php file will be ignored.

Which Files to Create

When creating a theme, you need to remember the cascading nature of how WordPress theme files operate. If you are in the midst of putting together your file structure and neglect to construct a front-page.php file and you decide that you would like to set your homepage to use a static page, WordPress will fall back to the page.php file. Whether this is ideal, is up to you, but if you want specialized functionality for your homepage, using the front-page.php file would be better suited.

The same is true if you would like to display your latest blog posts as your homepage and neglect to create a home.php file. In this case, under this setting, WordPress will cascade down to utilize the index.php file for your homepage. Again, if this is not ideal, it would be advisable to create a home.php file.

You can learn all about static front page options in the WordPress Codex.

Every WordPress theme has a common set of files to ensure a functioning website. While some of these files, which are considered “core,” are not required, others are absolutely necessary. In this post, I’m going to discuss a few of both types of files, while offering commentary regarding each.

STYLE.CSS

We all know what stylesheets do. They control the presentation – the visual design and layout of a website. While this may be true, WordPress also uses the primary stylesheet (style.css) to identify the meta details pertaining to your theme via a comment block located at the top of the file.

While I won’t discuss styling CSS here, because it’s really beyond the scope of this post, I will offer an example of the header comment I referred to above. And since it’s probably the first task you’re going to complete when putting your custom theme together, it’s important to understand.

Parent Theme Meta Data

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: The WordPress Team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

I took this example from the WordPress Codex page (slightly modified). If you’re interested, you can see that page here.

Now, there are two different versions – or actually one version and another modified version of this meta data area at the top of your CSS file. If you have a parent theme, or just one theme version on your site, you’d use something similar to what I just posted. If you have a child theme that’s built off of a parent theme, you would need another style.css file in that child theme directory, along with another comment meta data area at the top of that file. Your child theme meta data area would look something like this:

Child Theme Meta Data

/*
 Theme Name:   Twenty Thirteen Child
 Theme URI:    http://wordpress.org/themes/twentythirteenchild
 Description:  Twenty Thirteen Child Theme
 Author:       http://wordpress.org/
 Author URI:   http://wordpress.org/
 Template:     twentythirteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentythirteenchild
*/

The above code came from the WordPress Codex Child Theme page (slightly modified).

Below, I’m going to go over each part of the parent and child theme meta data areas.

Breaking Down the Meta Data

Theme Name: This is the name of your theme. It should be descriptive and easily recognizable.

Theme URI: Where is your theme located? This area should identify that.

Author: This area is where you name the author of your theme. You can name a specific person or a group, such as a company.

Author URI: Building off the last field, you would offer the web address of the theme creator(s).

Description: How would you describe your theme to someone else? If a parent theme, be descriptive of its features. If a child theme, be sure to inform users of what parent this is a child of.

Version: Are you distributing this theme? Are to modifying it in house? If so, it may be a good idea to keep the theme’s version on file.

License: If you are selling this theme, if would be a good idea to describe its license here. Both parent themes and child themes should have the same license.

License URI: Display the URI of your theme license. Similar to above, both parent and child themes should display the same license URI.

Tags: If you plan on making this theme searchable in a theme index, good descriptive tags are important.

Template: If you are creating a child theme, you would include the name of the parent theme’s folder here. The child theme would inherit much of the parent theme.

Text Domain: My understanding is that this field is for various languages. If you are familiar with this field and its use, please explain in the comment section below.

Using Your Parent Theme’s CSS

The old word for this was “import.” The new one is “enqueue.” Instead of using the outdated process of importing the parent stylesheet into the child’s:

@import url("../twentythirteen/style.css");

You would now enqueue it in your child theme’s functions.php. In order to do this, you would need to create a functions.php in your child theme directory and place the following code in it:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

INDEX.PHP

The index.php file is a good one to have because it provides as a backup for all other templates. You can learn more about this by checking out my “Working With WordPress Templates” post.

If you decide that you aren’t going to do much customizing or engage in a lot of granular control of many other WordPress template pages on your site, you’ll likely want to keep the coding of your index.php file fairly high level, so it’ll capture all the necessary functions of every available page you plan to have on your website. Remember, if you only have your index.php file, it’s going to be responsible for the functionality of all pages. Although this isn’t the most ideal setup, it certainly is possible to have your website operate this way.

Here is an example of some code you might have in your index.php file:

<?php get_header(); ?>

    <div class="page">

      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

          <div class="title"> 
            <h1><?php the_title(); ?></h1>
          </div>


        <?php the_content(); ?>

      <?php endwhile; else: ?>

        <div class="title"> 
            <h1>No Data Found</h1>
          </div>

          <p>Unfortunately, there is no content on this page.</p>

      <?php endif; ?>

      </div>

      <?php get_sidebar(); ?>

<?php get_footer(); ?>

The above code will check to see if you have any content, and if you do, it’ll display it on your page. If not, visitors will receive the message of “Unfortunately, there is no content on this page.”

HEADER.PHP

If you take a look at the top portion of the code above, you’ll see a snippet that looks like this:

<?php get_header(); ?>

This function calls the header.php file and includes it into the index.php page. To learn more about WordPress functions, you can visit this page in the codex.

Since the index.php page will include the header.php, I thought it would be a good idea to show you an ultra stripped down version of a header.php file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title(); ?></title> 

    <?php wp_head(); ?>

  </head>

  <body <?php body_class(); ?>>

    <div class="navigation">
      <!-- navigation goes here -->    
    </div>

In the section above, you can see the very first function is wp_title() up in the title area. This pulls in the title you input in the back end admin area. The next function is the wp_head() function, which pulls the data you enqueued in your functions.php file. Such data might be your css and js files. The body_class() function adds CSS class names for the HMTL body tag and is dynamic, depending on which page you’re on. Of course, you can have many more functions in this file, but like I said above, I stripped things down for simplicity’s sake. Just know, the header.php file gets pulled into most files by using the get_header() function. WordPress automatically knows which file to pull in because it’s part of their naming convention.

FOOTER.PHP

Similar to the header.php file, the footer.php file gets pulled into index.php using the get_footer() function. You can see this above as well.

There potentially isn’t much to this file. There are a few reasons for it to exist though. The first reason is to simply close any markup that was opened, or initiated, in header.php. If you take a look above, you’ll see that we opened up the <html> and <body> tags and then in the example below, we closed them.

    <footer>
        
      <!-- footer information goes here -->
        
    </footer>

    <?php wp_footer(); ?>
    
  </body>
</html>

Another common item found in footer files is the wp_footer() function. This function doesn’t output anything by itself, but is often used by developers as a hook to reference JavaScript files. If you don’t have this code in your footer.php file and someone attempts to load a plugin or the equivalent, it won’t work, if it relies on those referenced JavaScript files. Lastly, this function should be coded in right before the closing body tag.

SIDEBAR.PHP

Sidebars on WordPress installs are generally active areas. They hold all sorts of navigation, sign up forms and advertising. Primarily, when coding the sidebar.php file, you’d want to make it widget friendly because those widgets are the things that folks use to include the items I just mentioned. I’ve written some sample sidebar code below:

<div class="sidebar">
  <?php if ( ! dynamic_sidebar( 'primary' ) ): ?>
  <!-- sidebar information goes here -->
  <?php endif; ?>
</div>

As you can see, that’s pretty straightforward. Basically, all we’re doing is calling in the primary sidebar, if it exists, using the dynamic_sidebar() function. If it doesn’t exist, you could certainly add a bit of text there that says something to that effect. It would be up to you whether it’s hard coded or dynamic.

—–

Well, that’s it for today. My fingers are tired and now I’ve got to go through this post to edit it and add some links to all the WordPress functions and other items I talked about. Until next time!