{"id":503,"date":"2015-10-15T05:52:43","date_gmt":"2015-10-15T09:52:43","guid":{"rendered":"http:\/\/www.bemdesign.com\/wordpress\/?p=503"},"modified":"2024-12-10T22:13:24","modified_gmt":"2024-12-11T03:13:24","slug":"customizing-wordpress-comments","status":"publish","type":"post","link":"https:\/\/www.bemdesign.com\/wordpress\/2015\/10\/15\/customizing-wordpress-comments\/","title":{"rendered":"Customizing WordPress comments"},"content":{"rendered":"\n

The documentation on customizing WordPress comments is a bit sparse, particularly when compared to WordPress posts. I ran into this issue while building a web application built off of WordPress and wanted to use WordPress’ commenting system with some custom fields and styling. So here’s my attempt to address that.<\/p>\n\n\n\n

    \n
  1. Make sure you have a comments.php template file for your theme – create one if needed. I recommend looking at _s<\/a> for a good model.<\/li>\n\n\n\n
  2. See the following code below – it should be pretty obvious with its inline commenting. Please excuse any WordPress code formatting issues.<\/li>\n\n\n\n
  3. With this code we can now wrap your comment markup with our own tags and classes as well as display our own custom comment fields\/data using get_comment_meta().<\/li>\n\n\n\n
  4. The WordPress core comment-template.php file had the clues I needed to figure this out. I saw how they were structuring and coding things so I translated that code into my comments.php theme file, tested, and tidied it up until it worked. Now to the code…<\/li>\n<\/ol>\n\n\n\n
    <?php<\/span>\n\/*<\/span>\n If the current post is protected by a password and<\/span>\n the visitor has not yet entered the password we will<\/span>\n return early without loading the comments.<\/span>\n *\/<\/span>\nif<\/span> ( post_password_required<\/span>() ) {\n    return<\/span>;\n}\n?><\/span>\n<?php<\/span> \/\/ Now our comments area <\/span>?><\/span>\n<<\/span>div<\/span> id<\/span>=\"comments\"<\/span> class<\/span>=\"comments-area\"<\/span>><\/span>\n    <?php<\/span> \/\/check to see if we have comments<\/span>\n    if<\/span> ( have_comments<\/span>() ) : ?><\/span>\n        <<\/span>h2<\/span> class<\/span>=\"comments-title\"<\/span>><\/span>\n            <?php<\/span>\n                printf<\/span>( \/\/ WPCS: XSS OK.<\/span>\n                    esc_html<\/span>( _nx<\/span>( 'One comment on &ldquo;%2$s&rdquo;'<\/span>, '%1$s comments on &ldquo;%2$s&rdquo;'<\/span>, get_comments_number<\/span>(), 'comments title'<\/span>, '_s'<\/span> ) ),\n                    number_format_i18n<\/span>( get_comments_number<\/span>() ),\n                    '<span>'<\/span> . get_the_title<\/span>() . '<\/span>'<\/span>\n                );\n            ?><\/span>\n        <\/<\/span>h2<\/span>><\/span>\n    <?php<\/span> if<\/span> ( get_comment_pages_count<\/span>() ><\/span> 1<\/span> &&<\/span> get_option<\/span>( 'page_comments'<\/span> ) ) : \/\/ Are there comments to navigate through? <\/span>?><\/span>\n        <<\/span>nav<\/span> id<\/span>=\"comment-nav-above\"<\/span> class<\/span>=\"navigation comment-navigation\"<\/span> role<\/span>=\"navigation\"<\/span>><\/span>\n            <<\/span>h2<\/span> class<\/span>=\"screen-reader-text\"<\/span>><\/span><?php<\/span> esc_html_e<\/span>( 'Comment navigation'<\/span>, '_s'<\/span> ); ?><\/span><\/<\/span>h2<\/span>><\/span>\n            <<\/span>div<\/span> class<\/span>=\"nav-links\"<\/span>><\/span>\n<?php<\/span> \/\/comment navigation links <\/span>?><\/span>\n\n                <<\/span>div<\/span> class<\/span>=\"nav-previous\"<\/span>><\/span><?php<\/span> previous_comments_link<\/span>( esc_html__<\/span>( 'Older Comments'<\/span>, '_s'<\/span> ) ); ?><\/span><\/<\/span>div<\/span>><\/span>\n                <<\/span>div<\/span> class<\/span>=\"nav-next\"<\/span>><\/span><?php<\/span> next_comments_link<\/span>( esc_html__<\/span>( 'Newer Comments'<\/span>, '_s'<\/span> ) ); ?><\/span><\/<\/span>div<\/span>><\/span>\n\n            <\/<\/span>div<\/span>><\/span><!-- .nav-links --><\/span>\n        <\/<\/span>nav<\/span>><\/span><!-- #comment-nav-above --><\/span>\n        <?php<\/span> endif<\/span>; \/\/ Check for comment navigation. <\/span>?><\/span>\n\n    <<\/span>ol<\/span> class<\/span>=\"comment-list\"<\/span>><\/span>\n            <?php<\/span> if<\/span> ( have_comments<\/span>() ) : \/\/possibly duplicative, but this works <\/span>?><\/span>\n            <?php<\/span> while<\/span> (have_comments<\/span>() ) : the_comment<\/span>(); \/\/the loop, but for comments <\/span>?><\/span>\n            <<\/span>li<\/span> id<\/span>=\"comment-<\/span><?php<\/span> comment_ID<\/span>(); ?><\/span>\"<\/span> <?php<\/span> comment_class<\/span>(); ?><\/span>><\/span>\n            <<\/span>article<\/span> id<\/span>=\"div-comment-<\/span><?php<\/span> comment_ID<\/span>(); ?><\/span>\"<\/span> class<\/span>=\"comment-body\"<\/span>><\/span>\n                <<\/span>footer<\/span> class<\/span>=\"comment-meta\"<\/span>><\/span>\n                    <<\/span>div<\/span> class<\/span>=\"comment-author vcard\"<\/span>><\/span>\n                        <?php<\/span> echo<\/span> get_avatar<\/span>( $comment<\/span>-><\/span>comment_ID<\/span> ); ?><\/span>\n                        <?php<\/span> printf<\/span>( __<\/span>( '%s <span class=\"says\">says:<\/span>'<\/span> ), sprintf<\/span>( '<strong class=\"fn\">%s<\/strong>'<\/span>, get_comment_author_link<\/span>() ) ); ?><\/span>\n                    <\/<\/span>div<\/span>><\/span><!-- .comment-author --><\/span>\n\n                    <<\/span>div<\/span> class<\/span>=\"comment-metadata\"<\/span>><\/span>\n                        <<\/span>a<\/span> href<\/span>=\"<\/span><?php<\/span> echo<\/span> esc_url<\/span>( get_comment_link<\/span>( $comment<\/span>-><\/span>comment_ID<\/span> ) ); ?><\/span>\"<\/span>><\/span>\n                            <<\/span>time<\/span> datetime<\/span>=\"<\/span><?php<\/span> comment_time<\/span>( 'c'<\/span> ); ?><\/span>\"<\/span>><\/span>\n                                <?php<\/span> printf<\/span>( _x<\/span>( '%1$s at %2$s'<\/span>, '1: date, 2: time'<\/span> ), get_comment_date<\/span>(), get_comment_time<\/span>() ); ?><\/span>\n                            <\/<\/span>time<\/span>><\/span>\n                        <\/<\/span>a<\/span>><\/span>\n                        <?php<\/span> edit_comment_link<\/span>( __<\/span>( 'Edit'<\/span> ), '<span class=\"edit-link\">'<\/span>, '<\/span>'<\/span> ); ?><\/span>\n                    <\/<\/span>div<\/span>><\/span><!-- .comment-metadata --><\/span>\n\n                    <?php<\/span> if<\/span> ( '0'<\/span> ==<\/span> $comment<\/span>-><\/span>comment_approved<\/span> ) : \/\/is the comment in moderation <\/span>?><\/span>\n                        <<\/span>p<\/span> class<\/span>=\"comment-awaiting-moderation\"<\/span>><\/span><?php<\/span> _e<\/span>( 'Your comment is awaiting moderation.'<\/span> ); ?><\/span><\/<\/span>p<\/span>><\/span>\n                    <?php<\/span> endif<\/span>; ?><\/span>\n                <\/<\/span>footer<\/span>><\/span><!-- .comment-meta --><\/span>\n\n                <<\/span>div<\/span> class<\/span>=\"comment-content\"<\/span>><\/span>\n                <?php<\/span>\n                comment_text<\/span>(); \/\/the actual comment content <\/span>\n                ?><\/span>\n                <\/<\/span>div<\/span>><\/span><!-- .comment-content --><\/span>\n\n                <?php<\/span>\n                comment_reply_link<\/span>(); \/\/ the reply to a comment link<\/span>\n                ?><\/span>\n            <\/<\/span>article<\/span>><\/span><!-- .comment-body --><\/span>\n            <\/<\/span>li<\/span>><\/span>\n                        <?php<\/span> endwhile<\/span>; ?><\/span>\n            <?php<\/span> endif<\/span>; \/\/closing out our comment loop <\/span>\n            ?><\/span>\n        <\/<\/span>ol<\/span>><\/span><!-- .comment-list --><\/span>\n    <?php<\/span>\n        \/\/ If comments are closed and there are comments, let's leave a little note, shall we?<\/span>\n        if<\/span> ( !<\/span> comments_open<\/span>() &&<\/span> get_comments_number<\/span>() &&<\/span> post_type_supports<\/span>( get_post_type<\/span>(), 'comments'<\/span> ) ) :\n    ?><\/span>\n        <<\/span>p<\/span> class<\/span>=\"no-comments\"<\/span>><\/span><?php<\/span> esc_html_e<\/span>( 'Comments are closed.'<\/span>, '_s'<\/span> ); ?><\/span><\/<\/span>p<\/span>><\/span>\n    <?php<\/span> endif<\/span>; ?><\/span>\n\n    <?php<\/span> comment_form<\/span>(); \/\/the comment form <\/span>?><\/span>\n\n<\/<\/span>div<\/span>><\/span><!-- #comments --><\/span><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    The documentation on customizing WordPress comments is a bit sparse, particularly when compared to WordPress posts. I ran into this issue while building a web application built off of WordPress and wanted to use WordPress’ commenting system with some custom fields and styling. So here’s my attempt to address that.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[31,12],"class_list":["post-503","post","type-post","status-publish","format-standard","hentry","category-design","tag-code","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/comments?post=503"}],"version-history":[{"count":2,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/503\/revisions"}],"predecessor-version":[{"id":829,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/503\/revisions\/829"}],"wp:attachment":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/media?parent=503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/categories?post=503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/tags?post=503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}