Twitter Bootstrap is an excellent framework to build blogs, sites, apps, etc… This example was written for the Sage WordPress Bootstrap framework by roots https://roots.io/sage. If you are looking for a platform agnostic version, I have included a snippet that should work at the bottom of this page.
For reference, documentation for the Media Object Component can be found here:
https://getbootstrap.com/components/#media
HTML Format of Comments
Here is a structural representation of an individual comment. I removed some information to save space.
<!-- Format of Individual Comment -->
<li class="media">
<article>
<div class="media-left">
<a href="/"><img decoding="async" src="/">[Gravitar Image]</a>
</div>
<div class="media-body">
<h4><cite>[Name of Person]</cite></h4>
<p>[Comment Text Here]</p>
<p class="meta">
<a href="/#comment-118">
<time datetime="2014-04-13T23:19:22+00:00">April 13, 2014 at 11:19pm</time></a></p>
<p class="reply">
<a aria-label="Reply to [Name of Person]">Reply</a></p>
</div>
</article>
</li>For Sage: Add to the bottom of your lib/extras.php file
/**
* Build comment using bootstrap media object
*/
function sage_comment($comment, $args, $depth) {
//get comment to determine type
$GLOBALS['comment'] = $comment;
switch ($comment->comment_type):
case 'pingback':
case 'trackback': ?>
<li class="media" id="comment-<?php comment_ID(); ?>">
<div class="media-body">
<p>
<?php _e('Pingback:', 'sage'); ?> <?php comment_author_link(); ?>
</p>
</div><!--/.media-body -->
</li>
<?php
break;
default:
global $post; ?>
<li class="media">
<article>
<div class="media-left">
<a href="/%3C?php%20echo%20$comment-%3Ecomment_author_url;?%3E" class="pull-left visible-sm visible-md visible-lg">
<?php echo get_avatar($comment, 96); ?>
</a>
</div>
<div class="media-body">
<h4 class="media-heading comment-author vcard">
<?php printf('<cite class="fn">%1$s %2$s</cite>',
get_comment_author_link(),
// If current post author is also comment author, make it known visually.
($comment->user_id === $post->post_author) ? '<span class="label"> ' . __(
'Post author',
'sage'
) . '</span> ' : ''); ?>
</h4>
<?php if ('0' == $comment->comment_approved) : ?>
<p class="comment-awaiting-moderation">
<?php _e('Your comment is awaiting moderation.','sage'); ?>
</p>
<?php endif; ?>
<?php comment_text(); ?>
<p class="meta">
<?php printf('<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',
esc_url(get_comment_link($comment->comment_ID)),
get_comment_time('c'),
sprintf(
__('%1$s at %2$s', 'sage'),
get_comment_date(),
get_comment_time()
));
?>
</p>
<p class="reply">
<?php comment_reply_link( array_merge($args, array(
//'reply_text' => __('Reply <span>↓</span>', 'sage'),
'reply_text' => __('Reply', 'sage'),
'depth' => $depth,
'max_depth' => $args['max_depth']
)
));
?>
</p>
</div>
</article>
</li>
<?php
break;
endswitch;
}
For Sage: Update your templates/comments.php file
Comment out the original line and add the updated callback line. You can leave the original line commented out for rollbacks or if everything looks good after testing, you can remove the original line completely.
<ol class="comment-list">
<!-- comment out this line -->
<?php //wp_list_comments(['style' => 'ol', 'short_ping' => true]); ?>
<!-- add this line: -->
<?php wp_list_comments(['callback' => 'Roots\Sage\Extras\sage_comment']); ?>
</ol>
Framework Agnostic Bootstrap Media Object Comments
As promised above, here is a revised version that can be placed in your functions.php file:
/**
* Build comment using bootstrap media object
*/
function bs_media_comment($comment, $args, $depth) {
//get comment to determine type
$GLOBALS['comment'] = $comment;
switch ($comment->comment_type):
case 'pingback':
case 'trackback': ?>
<li class="media" id="comment-<?php comment_ID(); ?>">
<div class="media-body">
<p>
<?php _e('Pingback:', 'sage'); ?> <?php comment_author_link(); ?>
</p>
</div><!--/.media-body -->
</li>
<?php
break;
default:
global $post; ?>
<li class="media">
<article>
<div class="media-left">
<a href="/%3C?php%20echo%20$comment-%3Ecomment_author_url;?%3E" class="pull-left visible-sm visible-md visible-lg">
<?php echo get_avatar($comment, 96); ?>
</a>
</div>
<div class="media-body">
<h4 class="media-heading comment-author vcard">
<?php printf('<cite class="fn">%1$s %2$s</cite>',
get_comment_author_link(),
// If current post author is also comment author, make it known visually.
($comment->user_id === $post->post_author) ? '<span class="label"> ' . __(
'Post author',
'sage'
) . '</span> ' : ''); ?>
</h4>
<?php if ('0' == $comment->comment_approved) : ?>
<p class="comment-awaiting-moderation">
<?php _e('Your comment is awaiting moderation.','sage'); ?>
</p>
<?php endif; ?>
<?php comment_text(); ?>
<p class="meta">
<?php printf('<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',
esc_url(get_comment_link($comment->comment_ID)),
get_comment_time('c'),
sprintf(
__('%1$s at %2$s', 'sage'),
get_comment_date(),
get_comment_time()
));
?>
</p>
<p class="reply">
<?php comment_reply_link( array_merge($args, array(
//'reply_text' => __('Reply <span>↓</span>', 'sage'),
'reply_text' => __('Reply', 'sage'),
'depth' => $depth,
'max_depth' => $args['max_depth']
)
));
?>
</p>
</div>
</article>
</li>
<?php
break;
endswitch;
}
Add to comment template or comment code
You will want to comment out your original line in the case you want to rollback. Your code may not look exactly like this, but should reference wp_list_comments.
<ol class="comment-list">
<!-- comment out this line -->
<?php //wp_list_comments(['style' => 'ol', 'short_ping' => true]); ?>
<!-- add this line: -->
<?php wp_list_comments(['callback' => 'bs_media_comment']); ?>
</ol>
As always, comment if you get stuck. Maybe we can work through your issue. Also please comment with suggestions/improvements.
Comments