Web - [Tutorial #24] Single Post

Contents

Introduction
Single Post Templates
Plugins

Table of Content
Editor Enhancement
Comments

Introduction

In this tutorial we examine the templates and plugins used for displaying a single post. After this we are ready to create blog content for our site!

Single Post Templates

When wordpress displays a single post (by clicking on the post link) it renders the post via template single.php. Below is the template code. You can also get it on my Github page.

<?php
/**
 * The template for displaying all single posts.
 *
 * @package Multitopics
 */
get_header(); ?>

<!-- BLOG CONTENT
================================================== -->
<div class="container blog-container">
	<div class="row" id="primary">

		<main id="content" class="col-sm-10 col-sm-offset-1">
			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'template-parts/content', 'single' ); ?>

					
				<?php /* the_post_navigation(); */ ?>

				<?php
					// If comments are open or we have at least one comment, load up the comment template.
					if ( comments_open() || get_comments_number() ) :
						comments_template();
					endif;
				?>

			<?php endwhile; // End of the loop. ?>

		</main><!-- #main -->

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

<?php get_footer(); ?>

<?php

/**

* The template for displaying all single posts.

* @package Multitopics

get_header(); ?>

<!-- BLOG CONTENT

================================================== -->

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

<?php get_template_part( 'template-parts/content', 'single' ); ?>

<?php /* the_post_navigation(); */ ?>

<?php

// If comments are open or we have at least one comment, load up the comment template.

if ( comments_open() || get_comments_number() ) :

comments_template();

endif;

<?php endwhile; // End of the loop. ?>

</main>

</div>

</div>

<?php get_footer(); ?>

The codes are just a subset of the more complicated category.php file. We have:

Line 7, 36: header and footer inclusion.
Line 14: Bootstrap column classes.
Line 15-16: the Loop. For single post there is really no loop action as there is only one post.
Line 17: partial template content-single.php inclusion.
Line 22-27: standard way to include wordpress commenting elements.

single.php uses the partial template content-single.php:

<?php
/**
 * Template part for displaying single posts.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package Multitopics
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<header class="entry-header">
                <?php the_title( sprintf( '<h3 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h3>' ); ?>

                <?php /* post details */  ?>
                <?php if ( 'post' === get_post_type() ) : ?>
                        <div class="post-details">
                                <i class="fa fa-user"></i> <?php the_author(); ?>
                                <i class="fa fa-clock-o"></i> <time><?php the_date(); ?></time>

                                <i class="fa fa-folder"></i> <?php the_category(', ') ?>
                                <i class="fa fa-tags"></i> <?php the_tags(); ?>
					
				<?php /*
                                <div class="post-comments-badge">
                                        <a href="<?php comments_link(); ?>"><i class="fa fa-comments"></i> <?php comments_number( 0, 1, '%'); ?></a>
                                </div><!-- post-comments-badge -->
				*/ ?>

                                <?php edit_post_link( 'Edit', '<div><i class="fa fa-pencil"></i> ', '</div>'  ); ?>
                        </div><!-- post-details -->

                <?php endif; ?>

        </header><!-- .entry-header -->

	<?php if ( has_post_thumbnail() ) { // check for feature image ?>
        <div class="post-image single-post-img-window">
                <?php the_post_thumbnail(); ?>
		<a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) );  ?>"  > <!-- link -->
                                <span class="link-spanner"></span></a>		
        </div><!-- post-image -->
        <?php } ?>

        <div class="post-body">
                <?php the_content(); ?>
        </div><!-- post-body -->	

</article><!-- #post-## -->

<?php

/**

* Template part for displaying single posts.

* @link https://codex.wordpress.org/Template_Hierarchy

* @package Multitopics

<?php the_title( sprintf( '<h3 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h3>' ); ?>

<?php /* post details */ ?>

<?php if ( 'post' === get_post_type() ) : ?>

<?php /*

</div>

*/ ?>

<?php edit_post_link( 'Edit', '<div><i class="fa fa-pencil"></i> ', '</div>' ); ?>

</div>

<?php endif; ?>

</header>

<?php if ( has_post_thumbnail() ) { // check for feature image ?>

<?php the_post_thumbnail(); ?>

</div>

<?php } ?>

<?php the_content(); ?>

</div>

</article>

content-single.php is almost the same as content.php. The major difference is now we show the whole content via the_content() at line 47 instead of excerpt. See this tutorial to learn more about content.php.

Plugins

There are a lot of free plugins to enhance post editing and viewer experience. For ModernBlackHand we use the following post-related plugins:

Table of Content

We use a simple Better Anchor Links to display a post’s table of content. It has several nice features like indentation and header selection.

Editor Enhancement

A nice plugin to enhance wordpress’ post editor is TinyMCE Advanced.

Another great plugin for displaying chunk of codes is Crayon Syntax Highlighter:

Comments

An alternative commenting system is Disqus’ wordpress plugin. Using Disqus users can login with various social media accounts.

[Tutorial #24] Single Post

Introduction

Single Post Templates

Plugins

Table of Content

Editor Enhancement

Comments

Subscribe My Newsletter

Simply enter your name and email to receive our latest posts: