Number of comments in Header Element

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 :)

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

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.

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>

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>

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;
}

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

Please update.

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;
}

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

Hi Jatin,

Try this CSS:

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

Let me know :)