Ask your WordPress questions! Pay money and get answers fast! (more info)

change comments div wrapper WordPress

Hi,

Please see here:

pbs.transparentwebdesigns.co.uk/p/morphy-richards-colour-accents-pyramid-cordless-kettle-1-5-litres/

I've edited woocommerce single product page so that there are both reviews and comments (for SEO reasons)

The issue is that both have the same div id which is respond - I know this isn't wise so want to change it.

I know that <?php comment_form(); ?> is output by wp-includes/comment-template.php, for obvious reasons I dont want to edit that, so what do I place in my functions to php file to change one of the ids from <div id ="respond"> to something else?

Thanks

Answers (4)

2013-07-19

Remy answers:

You can create a comments.php file in your theme and copy the content of wp-includes/comment-template.php in it (it will take over the default comment form), then edit the id of the div

2013-07-19

Arnav Joy answers:

you can also create a comments.php file in your theme and can conditionally check if the page is normal post or woo product by get_post_type() function

like

if( get_post_type() == 'post' )
echo '<div id="respond_post">';
else
echo '<div id="respond">';


Arnav Joy comments:

a sample comments.php file can be found here (with the modification you need)

http://pastebin.com/vMRFTb7c


willcm comments:

the tough thing here is that both are on the same page - single-product.php

So I'm assuming I'll have to put something in functions.php?

It's easy for everything else I've just used the array command like so to customise the ask a question field:

<?php comment_form(array('title_reply'=>'Ask a question about this product','id_form'=>'askaquestion')); ?>

So the question is how do I change the comments div wrapper from <div id ="respond"> for just the "ask a question div" bearing in mind that both forms are output on the same page?


willcm comments:

Doesnt work I get these errors:

Warning: Cannot modify header information - headers already sent by (output started at /home/willcm/public_html/pbs/wp-content/themes/superstore/includes/theme-comments.php:3) in /home/willcm/public_html/pbs/wp-content/plugins/woocommerce/classes/class-wc-session-handler.php on line 63

Warning: Cannot modify header information - headers already sent by (output started at /home/willcm/public_html/pbs/wp-content/themes/superstore/includes/theme-comments.php:3) in /home/willcm/public_html/pbs/wp-content/plugins/woocommerce/woocommerce-functions.php on line 1381


willcm comments:

ok let me explain my file structure, I'm using this theme:

http://www.woothemes.com/products/superstore/

Relevant files and output for comments:

themefolder/comments.php:


<?php
if ( ! defined( 'ABSPATH' ) ) exit;
/**
* Comments Template
*
* This template file handles the display of comments, pingbacks and trackbacks.
*
* External functions are used to display the various types of comments.
*
* @package WooFramework
* @subpackage Template
*/

// Do not delete these lines
if ( ! empty( $_SERVER['SCRIPT_FILENAME'] ) && 'comments.php' == basename( $_SERVER['SCRIPT_FILENAME'] ) ) {
die ( 'Please do not load this page directly. Thanks!' );
}

if ( post_password_required() ) { ?>
<p class="nocomments"><?php _e( 'This post is password protected. Enter the password to view comments.', 'woothemes' ); ?></p>
<?php return; } ?>

<?php $comments_by_type = &separate_comments( $comments ); ?>

<!-- You can start editing here. -->

<?php if ( have_comments() ) { ?>

<div id="comments">

<?php if ( ! empty( $comments_by_type['comment'] ) ) { ?>
<h2><span><?php comments_number( __( 'No Responses', 'woothemes' ), __( 'One Response', 'woothemes' ), __( '% Responses', 'woothemes' ) ); ?> <?php _e( 'to', 'woothemes' ); ?> &#8220;<?php the_title(); ?>&#8221;</span></h2>

<ol class="commentlist">

<?php wp_list_comments( 'avatar_size=120&callback=custom_comment&type=comment' ); ?>

</ol>

<nav class="navigation fix">
<div class="fl"><?php previous_comments_link(); ?></div>
<div class="fr"><?php next_comments_link(); ?></div>
</nav><!-- /.navigation -->
<?php } ?>

<?php if ( ! empty( $comments_by_type['pings'] ) ) { ?>

<h2 id="pings"><?php _e( 'Trackbacks/Pingbacks', 'woothemes' ); ?></h2>

<ol class="pinglist">
<?php wp_list_comments( 'type=pings&callback=list_pings' ); ?>
</ol>

<?php }; ?>

</div> <!-- /#comments_wrap -->

<?php } else { // this is displayed if there are no comments so far ?>


<?php
// If there are no comments and comments are closed, let's leave a little note, shall we?
if ( comments_open() && is_singular() ) { ?>
<div id="comments">
<h5 class="nocomments"><?php _e( 'No comments yet.', 'woothemes' ); ?></h5>
</div>
<?php } ?>

<?php
} // End IF Statement

/* The Respond Form. Uses filters in the theme-functions.php file to customise the form HTML. */
if ( comments_open() )
comment_form();
?>


themefolder/includes/theme-comments.php:


<?php
if ( ! defined( 'ABSPATH' ) ) exit;
// Fist full of comments
if ( ! function_exists( 'custom_comment' ) ) {
function custom_comment( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment; ?>

<li <?php comment_class(); ?>>

<a name="comment-<?php comment_ID() ?>"></a>

<div id="li-comment-<?php comment_ID() ?>" class="comment_container">



<div class="comment-text">

<div class="comment-head">

<span class="name"><?php the_commenter_link(); ?></span>
<span class="date"><?php echo get_comment_date( get_option( 'date_format' ) ); ?> <?php _e( 'at', 'woothemes' ); ?> <?php echo get_comment_time( get_option( 'time_format' ) ); ?></span>
<span class="perma"><a href="<?php echo get_comment_link(); ?>" title="<?php esc_attr_e( 'Direct link to this comment', 'woothemes' ); ?>">#</a></span>
<span class="edit"><?php edit_comment_link(__( 'Edit', 'woothemes' ), '', '' ); ?></span>

</div><!-- /.comment-head -->

<div class="comment-entry" id="comment-<?php comment_ID(); ?>">
<?php comment_text(); ?>
<?php if ( $comment->comment_approved == '0' ) { ?>
<p class='unapproved'><?php _e( 'Your comment is awaiting moderation.', 'woothemes' ); ?></p>
<?php } ?>

<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div><!-- /.reply -->

</div><!-- /comment-entry -->

</div><!--/.comment-text-->

<?php if( get_comment_type() == 'comment' ) { ?>
<div class="avatar"><?php the_commenter_avatar( $args ); ?></div>
<?php } ?>

</div><!-- /.comment-container -->

<?php
} // End custom_comment()
}

// PINGBACK / TRACKBACK OUTPUT
if ( ! function_exists( 'list_pings' ) ) {
function list_pings( $comment, $args, $depth ) {

$GLOBALS['comment'] = $comment; ?>

<li id="comment-<?php comment_ID(); ?>">
<span class="author"><?php comment_author_link(); ?></span> -
<span class="date"><?php echo get_comment_date( get_option( 'date_format' ) ); ?></span>
<span class="pingcontent"><?php comment_text(); ?></span>

<?php
} // End list_pings()
}

if ( ! function_exists( 'the_commenter_link' ) ) {
function the_commenter_link() {
$commenter = get_comment_author_link();
if ( preg_match( '/]* class=[^>]+>/', $commenter ) ) {$commenter = preg_replace( '(]* class=[\'"]?)', '\\1url ' , $commenter );
} else { $commenter = ereg_replace( '(<a )/', '\\1class="url "' , $commenter );}
echo $commenter ;
} // End the_commenter_link()
}

if ( ! function_exists( 'the_commenter_avatar' ) ) {
function the_commenter_avatar( $args ) {
$email = get_comment_author_email();
$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( "$email", '300' ) );
echo $avatar;
} // End the_commenter_avatar()
}

?>




themefolder/woocommerce/content-single-product.php:


single-product-page output code and...

<?php comment_form(array('title_reply'=>'Ask a question about this product','id_form'=>'askaquestion')); ?>


and finally
themefolder/woocommerce/single-product-reviews.php:


<?php
/**
* Display single product reviews (comments)
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.0.3
*/
global $woocommerce, $product;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

?>
<?php if ( comments_open() ) : ?><div id="reviews"><?php

echo '<div id="comments">';

if ( get_option('woocommerce_enable_review_rating') == 'yes' ) {

$count = $product->get_rating_count();

if ( $count > 0 ) {

$average = $product->get_average_rating();

echo '<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">';

echo '<div class="star-rating" title="'.sprintf(__( 'Rated %s out of 5', 'woocommerce' ), $average ).'"><span style="width:'.( ( $average / 5 ) * 100 ) . '%"><strong itemprop="ratingValue" class="rating">'.$average.'</strong> '.__( 'out of 5', 'woocommerce' ).'</span></div>';

echo '<h2>'.sprintf( _n('%s review for %s', '%s reviews for %s', $count, 'woocommerce'), '<span itemprop="ratingCount" class="count">'.$count.'</span>', wptexturize($post->post_title) ).'</h2>';

echo '</div>';

} else {

echo '<h2>'.__( 'Reviews', 'woocommerce' ).'</h2>';

}

} else {

echo '<h2>'.__( 'Reviews', 'woocommerce' ).'</h2>';

}

$title_reply = '';

if ( have_comments() ) :

echo '<ol class="commentlist">';

wp_list_comments( array( 'callback' => 'woocommerce_comments' ) );

echo '</ol>';

if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<div class="navigation">
<div class="nav-previous"><?php previous_comments_link( __( '<span class="meta-nav">&larr;</span> Previous', 'woocommerce' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Next <span class="meta-nav">&rarr;</span>', 'woocommerce' ) ); ?></div>
</div>
<?php endif;

echo '<p class="add_review1"><a href="#ask_a_question" class="inline show_review_form button" title="' . __( 'Add Your Review', 'woocommerce' ) . '">' . __( 'Add Review', 'woocommerce' ) . '</a></p>';

$title_reply = __( 'Add a review', 'woocommerce' );

else :

$title_reply = __( 'Be the first to review', 'woocommerce' ).' &ldquo;'.$post->post_title.'&rdquo;';

echo '<p class="noreviews">'.__( 'There are no reviews yet, would you like to <a href="#ask_a_question" class="inline show_review_form">submit yours</a>?', 'woocommerce' ).'</p>';

endif;

$commenter = wp_get_current_commenter();

echo '</div><div id="1review_form_wrapper"><div id="ask_a_question">';

$comment_form = array(
'title_reply' => $title_reply,
'comment_notes_before' => '',
'comment_notes_after' => '',
'fields' => array(
'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name', 'woocommerce' ) . '</label> ' . '<span class="required">*</span>' .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" aria-required="true" /></p>',
'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email', 'woocommerce' ) . '</label> ' . '<span class="required">*</span>' .
'<input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30" aria-required="true" /></p>',
),
'label_submit' => __( 'Submit Review', 'woocommerce' ),
'logged_in_as' => '',
'comment_field' => ''
);

if ( get_option('woocommerce_enable_review_rating') == 'yes' ) {

$comment_form['comment_field'] = '<p class="comment-form-rating"><label for="rating">' . __( 'Rating', 'woocommerce' ) .'</label><select name="rating" id="rating">
<option value="">'.__( 'Rate&hellip;', 'woocommerce' ).'</option>
<option value="5">'.__( 'Perfect', 'woocommerce' ).'</option>
<option value="4">'.__( 'Good', 'woocommerce' ).'</option>
<option value="3">'.__( 'Average', 'woocommerce' ).'</option>
<option value="2">'.__( 'Not that bad', 'woocommerce' ).'</option>
<option value="1">'.__( 'Very Poor', 'woocommerce' ).'</option>
</select></p>';

}

$comment_form['comment_field'] .= '<p class="comment-form-comment"><label for="comment">' . __( 'Your Review', 'woocommerce' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>' . $woocommerce->nonce_field('comment_rating', true, false);

comment_form( apply_filters( 'woocommerce_product_review_comment_form_args', $comment_form ) );

echo '</div></div>';

?><div class="clear"></div></div>
<?php endif; ?>


willcm comments:

can anyone help?

2013-07-19

Navjot Singh answers:

You can replace the comment_form in your theme's comment.php with this

wp_list_comments( array( 'callback' => 'themename_comment' ) );

and then add a custom function in your functions.php themename_comment() which will replicate the whole comment_Form except for the changes you want.

Here is a sample comment_Form customised from twentytwelve.php

function twentytwelve_comment( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
switch ( $comment->comment_type ) :
case 'pingback' :
case 'trackback' :
// Display trackbacks differently than normal comments.
?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
<p><?php _e( 'Pingback:', 'twentytwelve' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( '(Edit)', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?></p>
<?php
break;
default :
// Proceed with normal comments.
global $post;
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<article id="comment-<?php comment_ID(); ?>" class="comment">
<header class="comment-meta comment-author vcard">
<?php
echo get_avatar( $comment, 44 );
printf( '<cite><b class="fn">%1$s</b> %2$s</cite>',
get_comment_author_link(),
// If current post author is also comment author, make it known visually.
( $comment->user_id === $post->post_author ) ? '<span>' . __( 'Post author', 'twentytwelve' ) . '</span>' : ''
);
printf( '<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',
esc_url( get_comment_link( $comment->comment_ID ) ),
get_comment_time( 'c' ),
/* translators: 1: date, 2: time */
sprintf( __( '%1$s at %2$s', 'twentytwelve' ), get_comment_date(), get_comment_time() )
);
?>
</header><!-- .comment-meta -->

<?php if ( '0' == $comment->comment_approved ) : ?>
<p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'twentytwelve' ); ?></p>
<?php endif; ?>

<section class="comment-content comment">
<?php comment_text(); ?>
<?php edit_comment_link( __( 'Edit', 'twentytwelve' ), '<p class="edit-link">', '</p>' ); ?>
</section><!-- .comment-content -->

<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply', 'twentytwelve' ), 'after' => ' <span>&darr;</span>', 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div><!-- .reply -->
</article><!-- #comment-## -->
<?php
break;
endswitch; // end comment_type check
}

2013-07-21

Sabby Sam answers:

Hello willcm,
I have tried below code and it work fine. Just add this code in header.php between head and body.
If you are already loading Jquery then remove <script src="http://code.jquery.com/jquery-1.9.1.js"></script> from the script.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function(){
$('#ask_a_question #respond').attr('id', 'respond-products')
});

</script>




for more information you can visit here
http://api.jquery.com/attr/