• Skip to main content
  • Skip to primary sidebar

Ryan McCormick

Dedicated Dad, Software Engineer and Lover of Coffee

Convert wp_list_comments to Use Bootstrap Media Object in Sage

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


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

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

    Reader Interactions

    Leave a Reply Cancel reply

    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

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

    Archives

    • May 2019
    • May 2018
    • April 2018
    • March 2018
    • January 2018
    • September 2017
    • August 2017
    • July 2017
    • June 2017
    • March 2017
    • December 2015
    • November 2015
    • July 2015
    • April 2015
    • February 2015
    • September 2014
    • June 2014
    • May 2014
    • April 2014
    • March 2014
    • February 2014
    • October 2013
    • August 2013
    • June 2013
    • April 2013
    • March 2013
    • February 2013
    • December 2012
    • October 2012
    • September 2012
    • August 2012
    • July 2012
    • May 2012
    • March 2012
    • February 2012
    • December 2011
    • November 2011
    • April 2011
    • March 2011
    • February 2011
    • January 2011
    • December 2010
    • November 2010
    • August 2009
    • July 2009
    • May 2009

    Categories

    • Angular
    • Angular 2
    • AngularJS (1x branch)
    • Computer Q&A
    • ES2015
    • Internet Marketing
    • Javascript
    • Job Interviews
    • Job Search
    • Karma
    • Laravel
    • Linux
    • Linux/Unix Tips
    • MacOS
    • Microsoft Access
    • Microsoft Excel
    • Microsoft Outlook
    • Microsoft Word
    • News
    • Node
    • Open Source
    • PHP
    • Protractor
    • Resume Writing
    • Spring Boot
    • SQL
    • Ubuntu
    • VBA
    • VBScript
    • VirtualBox
    • Web Development
    • Windows Tips
    • Wordpress

    Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org

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