WordPress 3 Comment formatting and styling

Content to the templatefile, in the theme directory comments.php

One “aber dabai” is that I moved the $req asterix (*) besides the label Name/Email/Website and removed the “required” span class. And the extra class can mess up the absolute position for the name, and then the asterix.

I did this becourse I like to use the jQuery infieldLabel plugin to move the input label inside the input field.

Further more, I like to use a ajax comment plugin like: ptm-ajax-comments

$fields =  array(
  'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' . ( $req ? '*' : '' ) ) . '</label> <input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />' . '</p>',
  'email' => '<p class="comment-form-email">' . '<label for="email">' . __( 'Email' . ( $req ? '*' : '' ) ) . '</label> <input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />' . '</p>',
  'url' => '<p class="comment-form-url">' . '<label for="url">' . __( 'Website' . ( $req ? '*' : '' ) ) . '</label> <input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30"' . $aria_req . ' />' . '</p>',
);

$defaults = array(
  'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
  'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',

  'must_log_in'          => '<p class="must-log-in">' . sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink($post_id) ) ) ) . '</p>',
  'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url('profile.php'), $user_identity, wp_logout_url( apply_filters('the_permalink', get_permalink($post_id)) ) ) . '</p>',
  'comment_notes_before' => '<p class="comment-notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>',
  'comment_notes_after'  => '<p class="form-allowed-tags">' . sprintf( __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',

  'id_form'              => 'commentform',
  'id_submit'            => 'submit',
  'title_reply'          => __( 'Leave a Comment' ),
  'title_reply_to'       => __( 'Leave a Reply to %s' ),
  'cancel_reply_link'    => __( 'Cancel reply' ),
  'label_submit'         => __( '' ),
);

comment_form($defaults);
?>
<ol class="commentlist"> <?php wp_list_comments();?> </ol>

Styling the commentform

div#respond {}
div#respond p.comment-form-author,
div#respond p.comment-form-email,
div#respond p.comment-form-url,
div#respond p.comment-form-comment{}
div#respond input{}
div#respond label{}
div#respond p.comment-form-author label,
div#respond p.comment-form-email label,
div#respond p.comment-form-url label,
div#respond p.comment-form-comment label{}
h3#reply-title{}
h3#reply-title small{}
form#commentform{}
p.comment-form-author{}
p.coment-form-author label{}
p.comment-form-author input#author{}
p.comment-form-email{}
p.comment-form-email label{}
p.comment-form-email input#email{}
p.comment-form-url{}
p.comment-form-url label{}
p.comment-form-url input#url{}
span.required{}
.comment-form-comment{}
p.comment-form-comment label{}
p.comment-form-comment textarea#comment{}
p.must-log-in{}
p.logged-in-as{}
p.comment-notes{}
p.form-allowed-tags{}
p.form-allowed-tags code{}
p.form-submit{}
p.form-submit input{}
#respond .form-submit input{}

Styling the commentlist:

ol.commentlist{}
ol.commentlist li.comment{}
ol.commentlist li.even, ol.commentlist li.thread-even{}
ol.commentlist li.odd, ol.commentlist li.alt{}, ol.commentlist li.thread-alt, ol.commentlist li.thread-odd{}
ol.commentlist li.comment .comment-body{}
ol.commentlist li.comment .comment-body .comment-author{}
ol.commentlist li.comment .comment-body .comment-author img.avatar{}
ol.commentlist li.comment .comment-body .comment-author cite.fn{}
ol.commentlist li.comment .comment-body .comment-author span.says{}
ol.commentlist li.comment .comment-body .comment-meta{}
ol.commentlist li.comment .comment-body .comment-meta a{}
ol.commentlist li.comment .comment-body p{} /* the comment text */
ol.commentlist li.comment .comment-body .reply{}
ol.commentlist li.comment .comment-body .reply a.comment-reply-link{}
ol.commentlist li ul.children{}
ol.commentlist li ul.children li.comment{}

Enjoy

One comment on “WordPress 3 Comment formatting and styling

Skriv et svar

Din e-mail-adresse vil ikke blive offentliggjort. Krævede felter er markeret med *

*

Disse HTML koder og attributter er tilladte: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>