How to Add a Comment Box to Your blog(single.php) in wordpress

WordPress Theme using the single.php File

Adding a comment section to your WordPress posts is a great way to engage with your readers and gather feedback. If you’re using a custom theme or want to modify your current theme to include comments, you’ll need to know how to integrate the comment functionality properly. This blog will guide you through the process of adding a comment box to the single.php file of your WordPress theme by copying the comments.php file from the Twenty Sixteen theme.

Step 1: Copy the comments.php File

The first step is to take the comments.php file from the Twenty Sixteen theme. This file is already optimized for handling comments and will save you the hassle of writing all the code from scratch. Here’s how to do it:

1. Navigate to the Twenty Sixteen theme directory. It is usually located in /wp-content/themes/twentysixteen/.
2. Find the comments.php file and copy it.

Step 2: Paste the comments.php File into Your Theme Folder

Next, you need to integrate this file into your own theme:

1. Go to your current theme’s directory, usually found in /wp-content/themes/your-theme-name/.
2. Paste the comments.php file you copied earlier into this directory.

Step 3: Modify single.php to Include Comments

Now, it’s time to edit the single.php file in your theme to call the comments template where you want the comments to appear. Here’s a general guide on where to place the code:

Open your single.php file.

Find where the post loop ends, usually right before the call to get_footer();.

Add the following code snippet to integrate the comment box at the desired location:

<?php 
if (comments_open() || get_comments_number()) {
    comments_template();
}
?>

Final Code in single.php

Here is what your single.php might look like with the comments section integrated:

<?php get_header(); ?>

<!-- Custom Header with Title Overlay -->
<?php if (get_header_image()) : ?>
    <div class="custom-header">
        <img src="<?php echo esc_url(get_header_image()); ?>"
            width="<?php echo esc_attr(get_custom_header().width); ?>"
            height="<?php echo esc_attr(get_custom_header().height); ?>"
            alt="<?php bloginfo('name'); ?>">
        <h1 class="custom-header-title"><?php bloginfo('name'); ?></h1>
    </div>
<?php endif; ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <div class="container mt-3">
            <?php
            if (have_posts()) : 
                while (have_posts()) : the_post(); ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                        <h3 class="blog-heading"><?php the_title(); ?></h3>
                        <div><?php the_post_thumbnail('full'); ?></div>
                        <div class="meta-info">
                            <p>Posted on <?php echo get_the_time(); ?> by <?php echo get_the_author_link(); ?></p>
                            <p>Category: <?php the_category(', '); ?></p>
                            <p>Tags: <?php the_tags('', ', '); ?></p>
                        </div>
                        <div class="page-content"><?php the_content(); ?></div>
                    </article>
                    <?php if (comments_open() || get_comments_number()) {
                        comments_template();
                    } ?>
                <?php endwhile;
            else :
                echo '<p>No posts found.</p>';
            endif;
            ?>
        </div>
    </main>
</div>

<?php get_footer(); ?>

Comments.php

Step 1: Copy the comments.php File

First, locate the comments.php file in the Twenty Sixteen theme folder and copy it:

Navigate to /wp-content/themes/twentysixteen/.
Find the comments.php file.

Step 2: Paste Into Your Theme Folder

Paste the copied comments.php file into your current theme’s folder:

Go to /wp-content/themes/your-theme-name/.
Paste the file here.

or code for : comments.php you can copy below code and create a comments.php file in your theme folder and paste it.

<?php
/**
 * The template for displaying comments
 *
 * The area of the page that contains both current comments and the comment form.
 *
 * @package Wp dev
 * @since wp dev 1.0
 */

/*
 * This template is copied from the Twenty Sixteen theme.
 */

if (post_password_required()) {
    return;
}
?>

<div id="comments" class="comments-area">

    <?php if (have_comments()) : ?>
        <h2 class="comments-title">
            <?php
                $comments_number = get_comments_number();
                if ('1' === $comments_number) {
                    /* translators: %s: Post title. */
                    printf(_x('One thought on “%s”', 'comments title', 'twentysixteen'), get_the_title());
                } else {
                    printf(
                        /* translators: 1: Number of comments, 2: Post title. */
                        _nx(
                            '%1$s thought on “%2$s”',
                            '%1$s thoughts on “%2$s”',
                            $comments_number,
                            'comments title',
                            'twentysixteen'
                        ),
                        number_format_i18n($comments_number),
                        get_the_title()
                    );
                }
            ?>
        </h2>

        <?php the_comments_navigation(); ?>

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

        <?php the_comments_navigation(); ?>

    <?php endif; // Check for have_comments(). ?>

    <?php
        // If comments are closed and there are comments, let's leave a little note, shall we?
        if (!comments_open() && get_comments_number() && post_type_supports(get_post_type(), 'comments')) :
            ?><p class="no-comments"><?php _e('Comments are closed.', 'twentysixteen'); ?></p>
        <?php endif; ?>

        <?php
            comment_form(array(
                'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
                'title_reply_after'  => '</h2>',
            ));
        ?>
</div> <!-- .comments-area -->