Creating a WordPress theme Part 4 – Single post page

This series is about how to create and develop a WordPress blog theme in 2021 using the correct methods and techniques.

Part 4 is the single post page. Part 3 included settings values, The WordPress loop and pagination. Part 2 was splitting the theme into different sections as well as theme naming and details. Part 1 was the installing and setup of WordPress and base theme.

creating WordPress theme

For this guide you will need a local webserver with PHP and MySQL, I will be using XAMPP and HeidiSQL for this series.

Single post page

In the previous posts the sample theme has been split up into parts, with a homepage (index.php) as the center piece. Now it is time to create a single post page, what you are reading right now is a single post page.

In your themes directory create a new file called single.php, this will be calling content-single.php which will need to be created aswell.

single.php

<?php get_header(); ?>
    <div class="container">
        <div class="row">
            <div class="col-12 mx-auto">
                <?php
                if (have_posts()) : while (have_posts()) : the_post();
                    get_template_part('content-single', get_post_format());
                endwhile; endif;
                ?>
            </div>
        </div>
    </div>
<?php get_footer(); ?>

content-single.php

<div class="row">
    <div class="col-12">
        <h2 class="post-title"><?php the_title(); ?></h2>
        <p class="post-meta"><?php the_date(); ?> by <a href="#"><?php the_author(); ?></a></p>
        <?php the_content(); ?>
    </div>
</div>

Now index.php is for the looping through all posts and listing them on the homepage (content.php), whilst single.php calls content-single.php which displays the individual posts on their page.

the_content() hook displays the posts content.

You can see single.php includes the header and footer that was made in part 2, it then includes content-single.php at get_template_part('content-single', get_post_format());

the_title(), the_date() and the_author() are very self explaining, these values being the post title, post date and the author.

Now the themes homepage has been covered, pagination, settings values, naming and the single post page aswell.