Ryan McCormick

Dedicated Dad, Software Engineer and Lover of Coffee

Convert wp_list_comments to Use Bootstrap Media Object in Sage

by Leave a Comment

Twitter Bootstrap is an excellent framework to build blogs, sites, apps, etc… This example was written for the Sage WordPress Bootstrap framework by roots http://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:
http://getbootstrap.com/components/#media

HTML Format of Comments

Here is a structural representation of an individual comment. I removed some information to save space.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- Format of Individual Comment -->
<li class="media">
<article>
    <div class="media-left">
        <a href="#"><img 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

/**
 * 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="<?php echo $comment->comment_author_url;?>" 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>&darr;</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.

1
2
3
4
5
6

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

/**
 * 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="<?php echo $comment->comment_author_url;?>" 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>&darr;</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.

1
2
3
4
5
6

<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.

Reader Interactions

Leave a Reply