[Resolved] Changes to the appearance in the post list for comments

[Anne-Barbara]

Hello!

For a better appearance in the list I would like to customize two things, which may go through hooks/filters, I’m not skilled enough.

1) The metadata “Comments” below the excerpt (so icon & text with link) should be next to the author above the feature image. Since other things are disabled in the footer, including all footer elements in the header element would also be conceivable (my header/footer of the post preview per post, not the page itself).
It would be important that it remains a separate div container, so that in the mobile view the optics is then correct (two lines).

2) if there are no comments, everything about comments in the overview should be removed (i.e. neither image, nor “Write a comment”.

What imho is anyway inconvenient in the overview, better would be then there only: no comments and no link 😉

I ask for support.

Many thanks!

[Anne-Barbara]

[Fernando]

Hi Anne-Barbara,

For reference, can you provide the link to a post with comments and a post without comments on your website?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Anne-Barbara]

Hello Fernando,

yes, i’ll do this. And there is an screen-shot, but I can’t place the link…

But I only want to change the comments-meta position au list view, not at single page view.

Regards

[David]

Hi there,

Try adding this function.
It will display the comments-link in the header meta if there are comments.

add_filter( 'generate_header_entry_meta_items', function( $items ) {
    $comment_num = get_comments_number( get_the_ID() );
    if ( $comment_num > 0 ) {	
        return array(
            'date',
            'author',
            'comments-link',
        );
    }
    return $items;
} );
add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    return array_diff( $items, array( 'comments-link' ) );
} );

[Anne-Barbara]

GENIAL, thank You David!

This works like expected. That’s exactly how I imagined it. Super!

Visually I have added via CSS that the ICON is displayed (was hidden), a space behind the author, so that it is not too narrow at single-line.

.byline {
	white-space: nowrap;
	margin-right: 7px;
}

.comments-link {
	white-space: nowrap;
}

.gp-icon.icon-comments {
	display: unset!important;
}

And for the mobile view I defined the breaks, that neither author, nor icon & comment are separated.

Thanks a lot!

[David]

Awesome – glad to be of help!

[Author]

Posts