• Skip to main content
  • Skip to primary sidebar

Ryan McCormick

Convert wp_list_comments to Use Bootstrap Media Object in Sage

December 1, 2015 by Ryan 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 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.


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

    Filed Under: Wordpress Tagged With: bootstrap media object, sage, wordpress development, wp_list_comments

    Reader Interactions

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Recent Posts

    • Force Quit Kill all Chrome Windows MacOS
    • SOLVED: Angular 6 CLI Karma Stuck in Single Run | Karma Stops Running
    • How to Manually Install Java 8 on Ubuntu 18.04 LTS
    • Remove VirtualBox from Ubuntu 16.04 Xenial
    • Clear all Node Modules Folders Recursively Mac/Linux

    Recent Comments

    1. KKV on Webstorm adding spaces between imports and braces | JavaScript and TypeScript
    2. jusopi on Clear all Node Modules Folders Recursively Mac/Linux
    3. Qaisar Irfan on Clear all Node Modules Folders Recursively Mac/Linux
    4. mustafa on Remove VirtualBox from Ubuntu 16.04 Xenial
    5. Pourya on How to Manually Install Java 8 on Ubuntu 18.04 LTS

    Copyright © 2025 · Magazine Pro on Genesis Framework · WordPress · Log in