Convert wp_list_comments to Use Bootstrap Media Object in Sage

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.

    

        [Gravitar Image]
    
    

        
[Name of Person]
        
[Comment Text Here]
        

        
        April 13, 2014 at 11:19pm
        

        Reply
    

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

        

          

             
          
        

      
    
      

        

          

              
                
              
          
          

            

            %1$s %2$s',
                  get_comment_author_link(),
                  // If current post author is also comment author, make it known visually.
                  ($comment->user_id === $post->post_author) ? ' ' . __(
                      'Post author',
                      'sage'
                  ) . ' ' : ''); ?>                
            
            comment_approved) : ?>
              

                
              
            
            
            

                %3$s',
                            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()
                            )); 
                ?>
            
            

                 __('Reply ↓', 'sage'),
                            'reply_text' => __('Reply', 'sage'),
                            'depth'      => $depth,
                            'max_depth'  => $args['max_depth']
                        )
                    )); 
                ?>
            
                
          
        
      

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', 'short_ping' => true]); ?>
  
   'Roots\Sage\Extras\sage_comment']); ?>


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

        

          

             
          
        

      
    
      

        

          

              
                
              
          
          

            

            %1$s %2$s',
                  get_comment_author_link(),
                  // If current post author is also comment author, make it known visually.
                  ($comment->user_id === $post->post_author) ? ' ' . __(
                      'Post author',
                      'sage'
                  ) . ' ' : ''); ?>                
            
            comment_approved) : ?>
              

                
              
            
            
            

                %3$s',
                            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()
                            )); 
                ?>
            
            

                 __('Reply ↓', 'sage'),
                            'reply_text' => __('Reply', 'sage'),
                            'depth'      => $depth,
                            'max_depth'  => $args['max_depth']
                        )
                    )); 
                ?>
            
                
          
        
      

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', 'short_ping' => true]); ?>
  
   'bs_media_comment']); ?>


As always, comment if you get stuck. Maybe we can work through your issue. Also please comment with suggestions/improvements.


	
Related