How to add custom comment form and design in WordPress

Posted in : Resources     Ezbing

WordPress as a matter of course shows remark structure on page or post. Client visits your site and post a remark dependent on their involvement with your substance. These remarks are constantly helpful to improve your site as they act like what individuals are making of your substance. WordPress gives default remark fields like message, name, email, site. The guest needs to top off these fields before presenting a remark.

Be that as it may, imagine a scenario in which somebody needs to include one more or numerous fields to the current remark structure.

In this article, we are going to share you how to modify remark structure in WordPress default comment form.

There are different kinds of design online resources. But I do this. Its very simple .

Add below code for calling comment section in single.php file

      <div class="comments-part">
        <?php if ( comments_open() ) { comments_template(); 
              } else {
                echo '<h5>Sorry , Comments are closed ! </h5> ';
              }
        ?>
      </div>

If you design default comments and form just change this default classes in your CSS file

#respond { } 
#reply-title { } 
#cancel-comment-reply-link { }
#commentform { } 
#author { } 
#email { } 
#url { } 
#comment 
#submit
.comment-notes { } 
.required { }
.comment-form-author { }
.comment-form-email { } 
.comment-form-url { }
.comment-form-comment { } 
.comment-form-cookies-consent { }
.form-allowed-tags { } 
.form-submit

You can follow my custom design CSS

/* for  ----- new comments ---------- */

.comments-part { border:1px solid #ddd; padding: 0px 10px 10px 10px;margin-bottom: 10px;}
h3#comments,.comment-navigation,.comment-navigation:after,#respond:after,.comment-rss{display:block} 
ol.commentlist{width:100%} 
h3#comments,#respond h3{text-align:left;background:#444555;color:#fff;padding: 5px 10px;} 
ol.commentlist,li.authorcomment,li.comment,form#commentform,input#submit{margin:0}
ol.commentlist,ol.commentlist ul,form#commentform{padding:0;}  
ol.commentlist{border-bottom:1px solid #ccc} 
ol.commentlist ul{margin:0 0 0 20px} 
li.authorcomment,li.comment,form#commentform textarea,form#commentform input{border:1px solid #ccc}
li.authorcomment,li.comment{padding:10px 0 10px 10px;list-style:none;border-bottom:none} 
ul.children ul{margin-left:20px} 
ul.children li{border-right:none}
.children {background:#eafffc47} 
.vcard img{float:left;background:#c4c4c4} 
.vcard img,.comment-navigation .newer a,.comment-navigation .older a{padding:5px} 
.comment-meta,ol.commentlist li small,p.subscribe-to-comments label{position:relative} 
.comment-meta,ol.commentlist li small{top:10px;left:10px} 
.comment-text{margin:0 10px 0 0} 
.reply,.comment-navigation .newer,input#submit{float:right} 
.reply,.comment-navigation .newer a,.comment-navigation .older a,input#submit{background:#444555;border-radius: 3px;} 
.reply{margin:0 10px 10px 0} 
a.comment-reply-link,.reply a:link,
.comment-navigation .newer a,.comment-navigation .older a,input#submit{display:inline-block;text-align:center;cursor:pointer;color:#fff} 
a.comment-reply-link,.reply a:link{padding:5px 0} a.comment-reply-link,.reply a:link,input#submit{width:80px} 
a.comment-reply-link:hover,.reply a:hover,.comment-navigation .newer a:hover,
.comment-navigation .older a:hover,input#submit:hover{background:#1baf8f;text-decoration:none;color:#000;font-weight:bold} 
a.comment-reply-link:hover,.reply a:hover,input#submit:hover{width:80px} 
a.comment-reply-link:hover,.reply a:hover{padding:4px 0} 
a.comment-reply-link:hover,.reply a:hover,.comment-navigation .newer a:hover,.comment-navigation .older a:hover{border:1px solid #4c7faa} 
.comment-navigation{margin:10px 0 10px 0} .comment-navigation:after,#respond:after{content:".";height:0;visibility:hidden} 
.clear{clear:both} 
.comment-navigation .newer a:hover,.comment-navigation .older a:hover{padding:4px} 


input#submit{padding:5px 0 !important;border:0 !important} 
input#submit,p.subscribe-to-comments input{outline:0} 
input#submit:hover{padding:4px 0 !important;border:1px solid #4c7faa !important} 
p.subscribe-to-comments{background:url('images/email_32.png') no-repeat} 
p.subscribe-to-comments,.comment-rss{text-indent:42px;padding:5px 0 0 0} 
p.subscribe-to-comments input{margin:5px 3px 3px 3px !important;border:0} 
p.subscribe-to-comments label{top:-2px;color:#666} 
.comment-rss{background:url('images/rss_32.png') no-repeat} 
#respond .cancel-comment-reply{padding: 5px;}

#respond .cm-submit {    
    padding: 5px 0px 30px 0px;
}

.comment-total{text-align: center;font-size: 1.5em;color: #fff;}
.comment-total span{font-size: 2em;color: #800000;}

If you redesign comments look like this

Add below code in functions.php file

 //this function will be called in the next section
function advanced_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
 
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    <div class="comment-author vcard">

     <?php echo get_avatar($author_email, $size='48', $default_avatar ); ?>
     <?php //echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>

     <div class="comment-meta"<a href="<?php the_author_meta( 'user_url'); ?>"><?php printf(__('%s'), get_comment_author_link()) ?></a></div>
       <small><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?><?php edit_comment_link(__('(Edit)'),'  ','') ?></small>
    </div>
     <div class="clear"></div>
 
     <?php if ($comment->comment_approved == '0') : ?>
       <em><?php _e('Your comment is awaiting moderation.') ?></em>
       <br />
     <?php endif; ?>
 
     <div class="comment-text"> 
         <?php comment_text() ?>
     </div>
 
   <div class="reply">
      <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
   </div>
   <div class="clear"></div>
<?php } ?>

If you redesign your comment form so add below code in css file

@media (min-width: 700px) {
#commentform input {
    float: left;
    width: 32%;
}
}

#commentform input {
    padding: 1.5%;
    background: ghostwhite;
    margin: 0% 2% 02% 0%;
}

#commentform textarea {
    width: 100%;
    padding: 1.5%;
    background: ghostwhite;
}

#commentform label {
    display: none;
}

#commentform #url{
    margin-right:-2%;
}
#commentform #submit{
    width: 80px;
    float: right;
    background: #444555;
    margin: 0px;
}

Add placeholder text by js . Add this below code in JS file such as custom.js file in your theme


//  for custom comment form placeholder

document.getElementById("author").setAttribute("placeholder", "Enter your name * ");

document.getElementById("email").setAttribute("placeholder", "Enter your email * ");

document.getElementById("url").setAttribute("placeholder", "Enter your website url ");

document.getElementById("comment").setAttribute("placeholder", "Write your comment here ... ");

We trust this article helped you figure out how to style WordPress remark structure to make it increasingly a good time for your clients.

All these things are very easily add by a simple plugin . I like this plugin Comments – wpDiscuz .

Thanks .

Leave a Reply

avatar
  Subscribe  
Notify of