Add comment date to comment author div wordpress - wordpress

Question

I'm trying to learn to use wordpress.
I'm trying to change comments layout and I want to join comment date to comment author data. But I am not getting it. For example, I have what is in first image but I want what it is in second. Can you help please? Thanks so much!

Answer 1

I think your main problem is that you want to customize the way the date is placed using only css but that's extremely hard.
The best thing for you to do is have your own custom comment code.
Wordpress let's you have your own comments code.
For example when you call the comment template code instead of doing this:
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 42,
) );
You can do something like this:
<ol class="commentlist">
<?php wp_list_comments( 'type=comment&callback=mytheme_comment' ); ?>
</ol>
And on the function.php file you can add the mytheme_comment function with the original comment code that wp has and reaarrange the classes and html code placement so you can have the date where you want.
function mytheme_comment($comment, $args, $depth) {
if ( 'div' === $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}
?>
<<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
<?php if ( 'div' != $args['style'] ) : ?>
<div id="div-comment-<?php comment_ID() ?>" class="comment-body">
<?php endif; ?>
<div class="comment-author vcard">
<?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
<?php printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>' ), get_comment_author_link() ); ?>
</div>
<?php if ( $comment->comment_approved == '0' ) : ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
<br />
<?php endif; ?>
<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>">
<?php
/* translators: 1: date, 2: time */
printf( __('%1$s at %2$s'), get_comment_date(), get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)' ), ' ', '' );
?>
</div>
<?php comment_text(); ?>
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div>
<?php if ( 'div' != $args['style'] ) : ?>
</div>
<?php endif; ?>
<?php
}
In the default code you can see that the code:
<?php
/* translators: 1: date, 2: time */
printf( __('%1$s at %2$s'), get_comment_date(), get_comment_time() );
?>
is what gives you the date information.
Hope you understanded this.
Here's the original WP documentation about this:
wp list comments