Part 6: Creating the single.php File for WordPress Theme

In this relatively shorter part of our ongoing series, we’ll explore the creation of the single.php file for wordpress theme development. This vital template file is responsible for rendering individual blog posts on our website. So without waiting, let’s dive into the code and dissect how to do it.

<?php get_header(); ?>
<div class="container mt-2 mt-md-5">
    <div class="row mt-2 mt-md-5">
        <div class="col-md-1"></div>
        <div class="col-md-7">
            <?php while (have_posts()) : the_post(); ?>
                <article class="single-post-content-area">
                    <div class="row post-meta">
                        <span><?php the_category(', '); ?></span>
                        <h2><small><?php the_title(); ?></small></h2>
                        <div class="mt-2 mt-md-1">
                            <i class="fas fa-user"></i>
                            <span class="post-by">By <?php the_author(); ?></span>,
                            <i class="far fa-calendar"></i>
                            <span class="post-date"><?php the_date(); ?></span>
                        </div>
                    </div>
                    <div class="row mt-2 mt-md-4">
                        <?php if (has_post_thumbnail()) : ?>
                            <div class="d-flex justify-content-center">
                                <?php the_post_thumbnail('large', ['class' => 'img-fluid mx-auto']); ?>
                            </div>
                        <?php endif; ?>
                    </div>                    
                    <div class="mt-2 mt-md-5">
                        <?php the_content(); ?>
                    </div>
                </article>
            <?php endwhile; ?>
        </div>        
    </div>
</div>

<?php get_footer(); ?>

Understanding the single.php Template:

1. get_header(); and get_footer();: Just like in the index.php file, we begin by including the header and footer of your theme to maintain a consistent design.
2. have_posts() and the_post(): These WordPress functions initiate a loop that iterates through individual blog posts. For each post, the subsequent code will be executed.
3. <article> Element: Each blog post is wrapped in an <article> element with the class “single-post-content-area.” This class can be styled to control the appearance of single blog post content.
4. Post Meta: Within the article, you display essential post information such as categories, the post title, the author, and the publication date. These details enhance the reader’s understanding and engagement with the post.
5. Featured Image: If the post has a featured image, it is displayed using the the_post_thumbnail() function. The 'large' size is specified, and additional styling classes can be added for image customization.
6. Content: The main content of the post is shown with the_content(). This function outputs the full post content, including text, images, and any other media.

With the single.php template in place, you’ve created the framework for displaying individual blog posts. It’s a critical component of your WordPress theme that ensures your content shines and captivates your readers. In the next installment of our series, we’ll continue our journey through WordPress theme development. Stay tuned for more insights and knowledge-sharing!