Creating a Bootstrap WordPress Theme (Part 6) – Discussion & Comments

Bootstrap WordPress Theme - Loading CSS & Javascript

In this tutorial, we’ll show you how to use Bootstrap to style the comments section of your WordPress site. We’ll talk about threaded comments, avatars, the comment form & more.

This is part 6 in the How to Create a Bootstrap WordPress Theme series.

Including the WordPress Comments Template

Before we get into using Bootstrap, let’s talk about how to include the comments section on a single post or page.

The comments.php template file is going to include all of the code to generate comments & our comment form. In order to call this file into your theme, place the following code where you want it to appear:

<?php comments_template(); ?>

If you only want to allow comments on blog posts, place this near the bottom of your single.php file. If you’d also like to include comments on static pages, also include it near the bottom of page.php.

You will also need to make sure that comments are allowed in your Discussion Settings, and that you are not overriding that default setting on an individual post or page.

WordPress Discussion Settings - Allow Comments
Navigate to “Settings” > “Discussion”, and make sure this box is checked to allow comments.
Allow comments on single post/page
On a single post/page edit screen, also make sure that comments are allowed.

Displaying Comments

First, we need to determine if any comments have been posted. If so, we’ll display them. If not, we can just display the comment form. We start off with an if statement to check if comments exist:

<?php if ( have_comments() ) : ?>

Next, let’s display a header (along with an icon), the number of comments, and a Bootstrap button to allow someone to add their own comment.

<h4 id="comments"><i class="icon-comments-alt icon-large"></i>&nbsp; <?php comments_number('No Comments', '1 Comment', '% Comments' ); ?> <a class="btn btn-sm btn-default pull-right" href="#respond"><i class="icon-plus-sign"></i>&nbsp; Comment</a>
</h4>

After the header, we’ll display each comment in an ordered list. We’re using Bootstrap’s Media List. You’ll also notice the custom callback for wp_list_comments(). We’re using this so we can customize the HTML output of the comment list. I’ll explain below.

<ol class="comment-list media-list">
	<?php wp_list_comments('callback=twbs_comment_format'); ?>
</ol>

Customize Comment HTML

In order to create our own custom HTML for the comments list, we need to add a function to our functions.php file (or a custom plugin). We’re using the code below, and incorporating more of Bootstrap’s Media List. Kudos to Tutsplus & DigWP for details on using the custom callback.

// Customize Comment Output
function twbs_comment_format($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>

	<li <?php comment_class('media'); ?> id="comment-<?php comment_ID(); ?>">
		<article>
			<div class="comment-meta pull-left">
				<?php echo get_avatar( $comment, 96 ); ?>
				<p class="text-center comment-author"><?php comment_author_link(); ?></p>
			</div> <!-- .comment-meta -->
			<div class="comment-content media-body">
				<p class="comment-date text-right text-muted pull-right"><?php echo human_time_diff( get_comment_time('U'), current_time('timestamp') ) . ' ago'; ?> &nbsp;<a class="comment-permalink" href="<?php echo htmlspecialchars ( get_comment_link( $comment->comment_ID ) ) ?>" title="Comment Permalink"><i class="icon-link"></i></a></p>
				<?php if ($comment->comment_approved == '0') { // Awaiting Moderation ?>
					<em><?php _e('Your comment is awaiting moderation.') ?></em>
				<?php } ?>
				<?php comment_text(); ?>
				<div class="reply pull-right">
					<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( '<i class="icon-reply"></i>&nbsp; Reply' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
				</div>
			</div> <!-- .comment-content -->
		</article>
<?php } // twbs_comment_format ?>
20% Off WP Engine

Custom Avatar Class

Also in our functions.php file (or custom plugin), we are adding more classes to the avatar so we can use “media-object” and “img-circle” to utilize Bootstrap’s components. Place this code BEFORE the twbs_comment_form() function. We’re adding classes: img-circle & media-object.

// Add Class to Gravatar
add_filter('get_avatar', 'twbs_avatar_class');
function twbs_avatar_class($class) {
	$class = str_replace("class='avatar", "class='avatar img-circle media-object", $class);
	return $class;
}

Custom Class on Comment Reply Link

If you have enabled threaded comments, you’ll see a “Reply” link associated with each comment. We wanted to make that link a button, so we needed to modify the classes that were applied to it. Place this code BEFORE the twbs_comment_form() function. We’re adding classes: btn, btn-default & btn-small.

// Add Class to Comment Reply Link
add_filter('comment_reply_link', 'twbs_reply_link_class');
function twbs_reply_link_class($class){
	$class = str_replace("class='comment-reply-link", "class='comment-reply-link btn btn-default btn-xs", $class);
	return $class;
}

Comment Pagination

If you are breaking comments up onto multiple pages, you’ll want to include the following pagination to get from page to page. We’re using simple chevron icons from Font Awesome. This code goes back in your comments.php file, after the <ol> that displays your comments.

<ul class="pager">
	<li><?php previous_comments_link('<i class="icon-chevron-left"></i>&nbsp; Older Comments'); ?></li>
	<li><?php next_comments_link('Newer Comments &nbsp;<i class="icon-chevron-right"></i>'); ?></li>
</ul>

Comment Form Using Bootstrap

Now we’re going to display the WordPress comment form using Bootstrap’s Form Styles.

We’ll start by only including the comment form if comments are open for this particular post/page:

<?php if ( comments_open() ) : ?>

Displaying the Comment Form

You’ll notice we are checking to see if the commenter is already logged in. If so, we only need to display the comment <textarea> & a submit button because we already have his/her name & email (and maybe website). If not, we display all form fields.

We’ve opted to make the form <label>s only visible to screen readers (.sr-only), and utilize HTML5’s placeholder attribute.

<div id="respond">

<h4><?php comment_form_title( 'Leave a Comment', 'Leave a Comment to %s' ); ?></h4>

<div class="cancel-comment-reply">
<?php cancel_comment_reply_link(); ?>
</div>

<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to post a comment.</p>
<?php else : ?>

<form role="form" class="form-horizontal" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( is_user_logged_in() ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out</a></p>

<?php else : ?>

<div class="form-group">
<label class="sr-only" for="author">Name</label>
<div class="col-md-5">
<input type="text" class="form-control" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" tabindex="1" placeholder="Name" <?php if ($req) echo "aria-required='true'"; ?> />
</div>
</div> <!-- .form-group -->

<div class="form-group">
<label class="sr-only" for="email">Email</label>
<div class="col-md-5">
<input type="text" class="form-control" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" tabindex="2" placeholder="Email" <?php if ($req) echo "aria-required='true'"; ?> />
</div>
</div> <!-- .form-group -->

<div class="form-group">
<label class="sr-only" for="url">Website</label>
<div class="col-md-5">
<input type="text" class="form-control" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" tabindex="3" placeholder="Website" />
</div>
</div> <!-- .form-group -->

<?php endif; ?>

<div class="form-group">
<label class="sr-only" for="comment">Comment</label>
<div class="col-md-10">
<textarea class="form-control input-lg" name="comment" id="comment" tabindex="4" placeholder="Type your comment here..."></textarea>
<span class="help-block"><small>You can use these HTML tags:<br /><code><?php echo allowed_tags(); ?></code></small></span>
</div>
</div> <!-- .form-group -->

<div class="form-group">
<div class="col-md-10">
<input type="submit" class="btn btn-primary" tabindex="5" value="Post Comment" />
<?php comment_id_fields(); ?>
</div>
</div> <!-- .form-group -->

<?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>

</div> <!-- #respond -->

This was the final post in our series on how to create a Bootstrap WordPress theme. We hope you enjoyed it.

You might also be interested in our updated list of the best premium WordPress Bootstrap themes.

6 Commentson "Creating a Bootstrap WordPress Theme (Part 6) – Discussion & Comments"

  1. /

    Now facing this error

    Warning: call_user_func() expects parameter 1 to be a valid callback, function ‘twbs_comment_format’ not found or invalid function name in /home/shady12/public_html/VideoFlock/wp-includes/comment-template.php on line 1694

    → Reply
  2. /

    Is there Any Demo or Screenshot what the final looks like?

    → Reply
  3. /

    i’hv added in the single.php file…and the rest codes in the comment.php file… now i cant do any comment without admin login. and as a normal user cant see the other comments

    → Reply
    1. (Author) /

      @topu, check your Discussion Settings. There’s a checkbox for “Users must be registered and logged in to comment.” Make sure that is unchecked.

  4. /

    Hi Dave, Thanks for your help, After some editing your code is working now. but i am facing a new problem. That is comments things are coming only for the three post. it’s not working for other post. If draft those 1st three post. The comments are not appearing either. I am dropping my site link here for your better understanding.
    http://afchealth.net/?page_id=30
    Please check here from the 4th post the comment is not coming.
    Please Help If you have any solution.

    → Reply
    1. (Author) /

      topu,

      It’s hard for me to see what’s going on without seeing your raw template code, but I’m guessing you have comments turned off for the older posts.

      • Go to “Posts” > “All Posts”
      • Choose the checkbox at the top left to select all posts
      • Click “Quick Edit”
      • Make sure the box for “Allow Comments” is checked
      • Click the “Update” button

      This should update ALL of your posts to allow comments. See if that fixes it.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.