[Support request] Number of comments in Header Element

[Jatin]

Hi Guys,

I want to show the comments count with hyperlink direct to comments in the header element as shown in screenshot. It should show the comments field only when the count of comment is greater than 0 that means if someone has not commented on the post then i do not want to show this field. Please advise if its possible. I am using header element. Post link in the Information box.

[Leo]

Hi there,

You can create a shortcode [comment_number] for comment and add it in the header element:

add_shortcode( 'comment_number', function() {
    ob_start();
	$comments = get_comments_number();
        if ( $comments > 0 ) {
            comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
	}
    return ob_get_clean();
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Hope this helps 🙂

[Leo]

I’ve updated the answer above to meet the second requirement.

[Jatin]

Thanks Leo,

It works fine. However does not look nice. Can we have it under the last updated on with the same font size and styling and aligned.

[Tom]

Right now you have something like this:

<span class="hero-date">{{post_date}}</span>

Try this:

<span class="hero-date">{{post_date}} <br /> [comment_number]</span>

[Jatin]

Hi Tom,

Currently have this: Please advise what should i change i to ?

<div class="heading-wrap">
    <h1>{{post_title}}</h1>
</div>

<div class="hero-meta">
	   	{{post_author}} | {{post_date}} | {{post_terms.category}} <br/>
	    [modified_date] [comment_number]
	   </div>

[Tom]

Try this:

<span class="hero-date">[comment_number]</span>

That’ll make it inherit the styles from the date.

Then you can adjust the link color:

.hero-date a {
    color: #fff;
}

[Jatin]

It does not look correct, please check the screenshot. It picked up Last Updated on: 13 comments also aligned to the right. When there is no comment on the post it shows as Last Updated on:

Requirement:
To be shown under the Last Updated on field e.g. like this:

Last Updated on: February 10,2021
13 Comments

[Jatin]

Please update.

[Tom]

Ok, instead of this:

[modified_date] [comment_number]

Do this:

<div class="right-side-hero-meta">
   [modified_date] [comment_number]
</div>

Then add this CSS:

.right-side-hero-meta {
    margin-left: auto;
    font-size: 9pt;
    text-align: right;
}

.right-side-hero-meta > .hero-date {
    display: block;
    float: none;
}

.right-side-hero-meta a {
    color: #fff;
}

[Jatin]

Thanks, it worked but it also messed up the padding around the existing meta.

[Ying]

Hi Jatin,

Try this CSS:

.page-hero .entry-date.published, .page-hero a[rel="tag"]  {
    display: inline-table;
}

Let me know 🙂

[Author]

Posts