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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?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(); ?> |
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
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?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-## --> |
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.