[Resolved] Making “Leave a Comment” In WP A Paragraph Tag

[Jodie]

Hi,

At the bottom of every post, I have a H3 which is “Leave a Comment”

How can I change this to be a “p” tag? Thanks for your help!

Cheers Jodie

[David]

Hi there,

this doc provides the PHP Snippet you require:

https://docs.generatepress.com/article/generate_comments_title_output/

[Jodie]

Hi David,

Great, that worked, thank you!

Just a couple more questions.

1. How do I change the “Comments Title” to have a font size of 20px?
2. How do I change the h3 “Leave a Comment” to a p tag?
3. How do I remove the post title from the “Comments Title” and just have it say “Comments”?

Thanks for your help!

Cheers Jodie

[David]

1. In Customizer > Typography -> Add New Typography.
In the Target element list, select Custom and in the CSS Class field provided add: .comments-title
Then add the font style you require.

2. The reply-title is output in the core comment_form() function. But it too has filters 🙂
Add this snippet to change that

add_filter( 'comment_form_defaults', 'custom_reply_title' );
function custom_reply_title( $defaults ){
  $defaults['title_reply_before'] = '<p id="reply-title" class="comment-reply-title">';
  $defaults['title_reply_after'] = '</p>';
  return $defaults;
}

You can repeat answer #1 for this too, and use the class of: .comment-reply-title
If the styles for 1 and 2 are identical then just use one custom typography setting, and add both classes with a comma delimiter eg. .comments-title, .comment-reply-title

3. So the function from this doc you can change to:

add_filter( 'generate_comments_title_output', function( $output, $comments_title ) {
    $comments_title = 'Comments';
    return sprintf(
        '<p class="comments-title">%s</p>',
        esc_html( $comments_title )
    );
}, 10, 2 );

[Jodie]

Hi Fernando,

Great, that worked! One more question please.

There’s a big gap underneath “Comments” and the first comment. Any ideas on how to reduce this please?

Thanks for your help!

Cheers Jodie

[David]

Edit the Typography you set for the comments-title and give it a bottom margin value. Eg. 0.5em
As currently it being a <p> its attracting the 1.5em bottom margin for text.

[Jodie]

Hi David,

That worked, thanks so much for your help!

Cheers Jodie

[David]

You’re welcome

[Author]

Posts