Dissecting WordPress: single.php

WordPress is used by bloggers, which isn’t surprising being that it was originally a blogging platform. Although it has become much more than that, it still functions as a blogging tool for many. For those bloggers out there, I will now dissect SINGLE.PHP, the template that displays a single post.

This is part of series of articles centered around dissecting the different components of WordPress. If you were able to understand, and make sense of, my discussion on PAGE.PHP, you’ll find SINGLE.PHP to be quite simple. It features the “loop,” navigational elements, the comments template (which I will also review here), and the usual header, sidebar, and footer elements. Here’s the code from the twentythirteen theme:

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<?php /* The loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', get_post_format() ); ?>
				<?php twentythirteen_post_nav(); ?>
				<?php comments_template(); ?>

			<?php endwhile; ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

The key differences between the post and page templates lie in the get_post_format() and twentythirteen_post_nav() hooks. PAGE navigation is primarily by means of the menu structure. POST navigation is included on the post page (Next, Previous, etc.), and is further defined in the comments.php (discussed next).  The current post formats include the standard, aside, chat, gallery, and more, and are differentiated by the css styling that controls how each format is displayed.

The single.php template is pretty basic. But it does pull in the comments template, so let’s take a look at what that part of the code does.

The default comments template is comments.php, though you can create your own, and pull it in using comments_template ($file), and defining $file as the template you want to use.

<?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains comments and the comment form.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 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( _nx( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', 'twentythirteen' ),
					number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
			?>
		</h2>

		<ol class="comment-list">
			<?php
				wp_list_comments( array(
					'style'       => 'ol',
					'short_ping'  => true,
					'avatar_size' => 74,
				) );
			?>
		</ol><!-- .comment-list -->

		<?php
			// Are there comments to navigate through?
			if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
		?>
		<nav class="navigation comment-navigation" role="navigation">
			<h1 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'twentythirteen' ); ?></h1>
			<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentythirteen' ) ); ?></div>
			<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentythirteen' ) ); ?></div>
		</nav><!-- .comment-navigation -->
		<?php endif; // Check for comment navigation ?>

		<?php if ( ! comments_open() && get_comments_number() ) : ?>
		<p class="no-comments"><?php _e( 'Comments are closed.' , 'twentythirteen' ); ?></p>
		<?php endif; ?>

	<?php endif; // have_comments() ?>

	<?php comment_form(); ?>

</div><!-- #comments -->

The code has comments to help guide you through what each piece is doing. The div “comments” are open for the comments area of the page, and the number of comments is displayed. The comments themselves are then displayed in an ordered list with the commenter’s avatar and navigation (pagination) provided—if the parameters you set require it. Finally, the comments_form() is put to use. This will enable users to add their own comment to the page. The comments div is now complete, and we can return to the single.php template code to finish the page with the sidebar and footer elements.

Although single.php appears simple, and displays one single post, it pulls in a couple of other elements—like the comments template and the comments form. You can personalize the post display by styling elements through style.css. Elements, such as the sidebar, can be removed, and other elements can be added. Any changes made to the twentythirteen files should be saved as the same name, and placed in your childof2013 theme folder so they will be used in place of the 2013 theme files.

In addition, any changes to style.css should be saved in a style.css place within the childof2013 theme folder.

Feedback and suggestions for what you need help with are more than welcome!

---

Sue Laren is a freelance website designer/developer living in the SF Bay Area (North Bay), married 33 years, with four grown children and two grandchildren. She taught computer lab (basic computer skills) at a local elementary school for many years, and in 2007 started her own web design business, Laren Net Works. Follow her on Twitter at @LarenNetWorks.