For Custom Comment #####Links
- https://www.inkthemes.com/how-to-easily-customize-wordpress-comment-form/
- https://codex.wordpress.org/Function_Reference/wp_list_comments
- http://wordpress.stackexchange.com/questions/172052/how-to-wrap-comment-form-fields-in-one-div
- http://justintadlock.com/archives/2010/07/21/using-the-wordpress-comment-form
- http://wordpress.stackexchange.com/questions/225477/how-to-wrap-submit-button-of-comment-form-with-div
<?php
/**
* The template for displaying comments.
*
* This is the template that displays the area of the page that contains both the current comments
* and the comment form.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package salon
*/
/*
* If the current post is protected by a password and
* the visitor has not yet entered the password we will
* return early without loading the comments.
*/
if ( post_password_required() ) {
return;
}
?>
<div id="comments" class="full-width-grid salon-comment-wrapper">
<?php
// You can start editing here -- including this comment!
if ( have_comments() ) : ?>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
<nav id="comment-nav-above" class="navigation comment-navigation" role="navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'salon' ); ?></h2>
<div class="nav-links">
<div class="nav-previous"><?php previous_comments_link( esc_html__( 'Older Comments', 'salon' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( esc_html__( 'Newer Comments', 'salon' ) ); ?></div>
</div><!-- .nav-links -->
</nav><!-- #comment-nav-above -->
<?php endif; // Check for comment navigation. ?>
<ol class="comment-list nav">
<?php wp_list_comments(
'type=comment&callback=salon_comment'
); ?>
</ol><!-- .comment-list -->
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // Are there comments to navigate through? ?>
<nav id="comment-nav-below" class="navigation comment-navigation" role="navigation">
<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'salon' ); ?></h2>
<div class="nav-links">
<div class="nav-previous"><?php previous_comments_link( esc_html__( 'Older Comments', 'salon' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( esc_html__( 'Newer Comments', 'salon' ) ); ?></div>
</div><!-- .nav-links -->
</nav><!-- #comment-nav-below -->
<?php
endif; // Check for comment navigation.
endif; // Check for have_comments().
// If comments are closed and there are comments, let's leave a little note, shall we?
if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>
<p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'salon' ); ?></p>
<?php
endif;
//comment_form();
?>
<?php
// Comment Form Custom
?>
<?php $comment_args = array(
'class_form' => 'salon-comment-form full-width-grid',
'title_reply' =>'Leave A Message',
'fields' => apply_filters( 'comment_form_default_fields', array(
'author' => '<div class="col-sm-6">' .
'<input id="author" name="author" type="text" class="form-control" placeholder="Your Name" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /> '.
'</div>',
'email' =>
'<div class="col-sm-6">'.
'<input id="email" name="email" class="form-control" placeholder = "Your Email Please" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />'.
'</div>',
'url' => '' ) ),
'comment_field' => '<div class="form-group clearfix">' .
'<div class="col-sm-12">'.
'<textarea id="comment" class="form-control" placeholder="Your Comments" name="comment" cols="45" rows="8" aria-required="true"></textarea>' .
'</div>'.
'</div>',
'comment_notes_after' => '',
'submit_button' => '<div class="form-group clearfix">
<div class="col-sm-12">
<input name="%1$s" type="submit" id="%2$s" class="%3$s btn deep-brown-btn" value="%4$s" />
</div>
</div>'
);
comment_form($comment_args); ?>
</div><!-- #comments -->
For Comment Form Template
/**
*
* Custom Comment HTML
*
**/
function salon_comment($comment, $args, $depth) {
if ( 'div' === $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}
?>
<<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
<?php if ( 'div' != $args['style'] ) : ?>
<div id="div-comment-<?php comment_ID() ?>" class="comment-body">
<?php endif; ?>
<div class="comment-author vcard">
<div class="comment-card-img inline-block"><?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size=100'] ); ?></div>
<div class="comment-wrapper inline-block">
<header class="full-width-grid comment-header">
<div class="comment-author-link inline-block"><?php printf( __( '<cite class="fn">%s</cite>' ), get_comment_author_link() ); ?></div>
<!-- Comment Time -->
<div class="comment-meta inline-block">
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>"></a>
<?php
/* translators: 1: date, 2: time */
printf( __('%1$s '), get_comment_date() ); ?></a><?php edit_comment_link( __( '(Edit)' ), ' ', '' );
?>
</div>
<div class="reply inline-block">
<?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div>
</header>
<div class="comment-container">
<?php if ( $comment->comment_approved == '0' ) : ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
<br />
<?php endif; ?>
<?php comment_text(); ?>
</div>
</div>
</div>
<?php if ( 'div' != $args['style'] ) : ?>
</div>
<?php endif; ?>
<?php
}
/* *
*
* Wrap a div class="form-group" to the email
* and name form field
* in the Comment Form
*
**/
$comment_open_div = 0;
/**
* Creates an opening div for a bootstrap form-group.
* @global int $comment_open_div
*/
function salon_before_comment_fields(){
global $comment_open_div;
$comment_open_div = 1;
echo '<div class="form-group clearfix">';
}
/**
* Creates a closing div for a bootstrap form-group.
* @global int $comment_open_div
* @return type
*/
function salon_after_comment_fields(){
global $comment_open_div;
if($comment_open_div == 0)
return;
echo '</div>';
}
add_action('comment_form_before_fields', 'salon_before_comment_fields');
add_action('comment_form_after_fields', 'salon_after_comment_fields');