Function wp_list_comments() accepts several parameters – callback is one of them. In case you didn’t know, in WordPress ecosystem callback actually means “take the code from WordPress core, modify according to my needs, insert everything into functions.php and use callback to make me look like a WordPress guru”. Just kidding :).

If your theme supports HTML5 comments, it will also mean that html5_comment function will generate the comment HTML. So let’s have a look on how it looks like, taken directly from WordPress core:

protected function html5_comment( $comment, $depth, $args ) {
        $tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
?>
        <<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '' ); ?>>
            <article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
                <footer class="comment-meta">
                    <div class="comment-author vcard">
                        <?php if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
                        <?php printf( __( '%s <span class="says">says:</span>' ), sprintf( '<b class="fn">%s</b>', get_comment_author_link() ) ); ?>
                    </div><!-- .comment-author -->
 
                    <div class="comment-metadata">
                        <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID, $args ) ); ?>">
                            <time datetime="<?php comment_time( 'c' ); ?>">
                                <?php printf( _x( '%1$s at %2$s', '1: date, 2: time' ), get_comment_date(), get_comment_time() ); ?>
                            </time>
                        </a>
                        <?php edit_comment_link( __( 'Edit' ), '<span class="edit-link">', '</span>' ); ?>
                    </div><!-- .comment-metadata -->
 
                    <?php if ( '0' == $comment->comment_approved ) : ?>
                    <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></p>
                    <?php endif; ?>
                </footer><!-- .comment-meta -->
 
                <div class="comment-content">
                    <?php comment_text(); ?>
                </div><!-- .comment-content -->
 
                <?php
                comment_reply_link( array_merge( $args, array(
                    'add_below' => 'div-comment',
                    'depth'     => $depth,
                    'max_depth' => $args['max_depth'],
                    'before'    => '<div class="reply">',
                    'after'     => '</div>'
                ) ) );
                ?>
            </article><!-- .comment-body -->
<?php
    }
}

In order to edit this, all you need to do is insert this code into functions.php, make few adjustments to get it all working, modify according to your needs and use callback parameter so the WordPress will use your custom function. This is how you call a custom function:

<?php    
        wp_list_comments( array(
    'callback' => bbird_under_comments,           
) );
     ?>

And this is my example of callback function – I wanted to implement Foundation grid system into comment section and rearrange some elements. You are free to modify the code as you wish. Oh, and just so you know, $comment is WordPress globals object…

function bbird_under_comments($comment, $args, $depth) {

$tag = ( 'div' === $args['style'] ) ? 'div' : 'li'; ?>
   <<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class(); ?>>
            <article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
                <div class="row">
  <div class="small-3 columns">
      <div class="gravatar-container">
          <?php if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
      </div><!-- .comment-meta -->
  </div>
  <div class="small-9 columns">    <div class="comment-meta">
                 
                    <div class="comment-author">
                        
                        <?php printf( __( '%s' ), sprintf( '<span class="commenter">%s</span>', get_comment_author_link() ) ); ?>
                    </div><!-- .comment-author -->
 
                    <div class="comment-metadata">
                        <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID, $args ) ); ?>">
                            <time datetime="<?php comment_time( 'c' ); ?>">
                                <?php printf( _x( '%1$s at %2$s', '1: date, 2: time' ), get_comment_date(), get_comment_time() ); ?>
                            </time>
                        </a>
                     </div><!-- .comment-metadata -->
 
                    <?php if ( '0' == $comment->comment_approved ) : ?>
                    <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></p>
                    <?php endif; ?>
                </footer><!-- .comment-meta -->
                   <div class="comment-content">
                    <?php comment_text(); ?>
                </div><!-- .comment-content -->
  </div>
 
</div>

  <div class="small-12 columns">
 
                <?php
                comment_reply_link( array_merge( $args, array(
                    'add_below' => 'div-comment',
                    'depth'     => $depth,
                    'max_depth' => $args['max_depth'],
                    'before'    => '<div class="reply">',
                    'after'     => '</div>'
                ) ) );
                ?>
      
      </div>
            </article><!-- .comment-body -->
<?php
    }

Post Editing wp_list_comments() output je prvi puta viđen na bbird.me.

The first thing is to add either class or ID (your choice) to the first container above the first level <ul> element. Let me show you an example on a FoundationPress theme, a starter-theme for WordPress built with Foundation, built by Ole Fredrik Lie. Needless to say, I highly recommend this theme for any WordPress project based on foundation (it has custom walker class implemented – do I need to say more? ). So this is the code:

<section class="top-bar-section">
            <?php foundationpress_top_bar_l(); ?>
            <?php foundationpress_top_bar_r(); ?>
</section>

And this is where you would add CSS class or ID. Let’s use .fd-animate class for now:

<section class="top-bar-section fd-animate">
            <?php foundationpress_top_bar_l(); ?>
            <?php foundationpress_top_bar_r(); ?>
</section>

And now all that we need is CSS (this theme is using Sass, but I will show “pure” CSS  for those who don’t use the Sass approach):

.fd-animate ul li ul li {
  max-height: 0;
  position: absolute;
  -webkit-transition: max-height 1.2s ease-out;
  -moz-transition: max-height 1.2s ease-out;
  -ms-transition: max-height 1.2s ease-out;
  -o-transition: max-height 1.2s ease-out;
  transition: max-height 1.2s ease-out;
}

.fd-animate ul li ul li:hover > ul > li {
  max-height: 100px;
  height:auto;
  position: relative;
}

.fd-animate > ul > li:hover > ul {
  left: 0;
}
.fd-animate > ul > li:hover > ul > li {
  max-height: 100px;
  height:auto;
  position: relative;
}

.fd-animate > ul > li > ul {
  width: auto;
  min-width:200px;
  display: block;
}

For positioning purposes, you may want to overwrite default foundation CSS:

.top-bar-section .right li .dropdown {
  left: 0;
  min-width:200px;
  right: 0;
}
.top-bar-section .right li .dropdown li .dropdown {
  left: 100%;
  right: 100%;
}

.top-bar-section .dropdown li a {
  white-space: normal;
}

This may be a bit rough code which you can modify for your purposes, but the main point is that it covers the idea of adding transitions to WordPress drop-down menu based on foundation framework.

Post Adding CSS3 transitions to WordPress drop-down menu based on Foundation je prvi puta viđen na bbird.me.