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.
- Part 1 – Loading Bootstrap & Font Awesome CSS & javascript
- Part 2 – Using Bootstrap dropdowns for your WordPress navigation
- Part 3 – Using Bootstrap to create a sticky footer
- Part 4 – Bootstrapped Layout: Pages, posts & sidebar
- Part 5 – Bootstrap search form & search results pages
- Part 6 – Bootstrap comments section
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.
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> <?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> 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'; ?> <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> Reply' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div>
</div> <!-- .comment-content -->
</article>
<?php } // twbs_comment_format ?>
[adrotate group=”8″]
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> Older Comments'); ?></li>
<li><?php next_comments_link('Newer Comments <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.
We Recommend
https://kinsta.com › wordpress-hosting
Fast and secure infrastructure, worldwide CDN, edge caching, 35 data centers, and enterprise-level features included in all plans. Free site migrations.
https://gravityforms.com › features
Create custom web forms to capture leads, collect payments, automate your workflows, and build your business online. All without ever leaving WordPress.
Leave a Comment