WordPress Comments Form – How to change HTML

I searched high and low for a good tutorial on how to change the HTML of the wordpress comment form. From the articles I did find I managed to put together something that works. Feel free to post a comment if there is a better way of doing this…

I put the below code in functions.php and comment_form(); in my comments.php

The code below is my modified version. For defaults simply add or replace my code with http://codex.wordpress.org/Function_Reference/comment_form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
add_filter( 'comment_form_defaults', 'my_comment_defaults');
 
function my_comment_defaults($defaults) {
	$req = get_option( 'require_name_email' );
	$aria_req = ( $req ? " aria-required='true'" : '' );
 
	$defaults = array(
		'fields'        	   => array(
		'author' => '<div><label for="author">' . __( 'Name' ) . ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' . '<input id="author" name="author" placeholder="your name" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></div>',
		'email' => '<div><label for="email">' . __( 'Email' )  . ( $req ? '<span class="required">*</span>' : '' ) . '</label> ' . '<input id="email" name="email" placeholder="email@address.co.uk" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></div>'
                ),
		'comment_field' => '<div><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"  placeholder="your comment"></textarea></div>',
 
		'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' => '<fieldset>',
 
		'comment_notes_after'  => '</fieldset>',
 
		'id_form'              => 'commentform',
 
		'id_submit'            => 'submit',
 
		'title_reply'          => __( 'Leave a Comment' ),
 
		'title_reply_to'       => __( 'Leave a Reply %s' ),
 
		'cancel_reply_link'    => __( 'Cancel reply' ),
 
		'label_submit'         => __( 'Comment' ),
 
                );
 
    return $defaults;
}

You will notice I have made the following modifications

  • Removed the website field
  • Added type=”email” to the Email field (HTML5)
  • Added placeholder text (HTML5)
  • Removed the default text from the top and bottom of the form and replaced with <fieldset></fieldset>
  • Moved the required * inside the label
  • Changed the “Leave a Reply” title to “Leave a Comment”
  • Changed the text of the submit button

WordPress 404 on Custom Post Types

I came across a nightmare of a problem today. Everytime I viewed my custom post types I kept getting a 404 error.  I just couldnt understand what was going on.  Thanks to this article I finally solved the problem.

When setting up custom post types and a custom permalink structure add the below code to the function used to create custom posts.

1
flush_rewrite_rules( false );

I just wanted to write a quick post to highlight the problem but an explanation of why this is needed can be found on the wordpress codex.

WordPress 3.1

Yesterday saw the release of WordPress 3.1 and it has some pretty nice features for both general users and developers like myself.

New Admin Bar
An admin bar has been added when logged in. Its a nice little touch for the not so experienced wordpress user. It makes the admin section and the front end appear more seamless by allowing you to click through to create a new post, manage your personal details, appearance, comments and updates whilst browsing the front end of your site. For multisite users it makes switching between sites quick and easy.

Continue reading

How did I not know about the col tag???

So whilst developing away the other day I came across the <col> tag! ( Hopefully I am not alone in never having used this before.)
After a quick google I soon established that the col tag could be used to control the widths and alignments of columns in a table removing the need to constantly define td widths and alignments individually.
Continue reading

PNG’s Image Links and IE6 Fixes

As some of you may be aware PNG’s are a bit of a pain when it comes to supporting good old IE6. How I long for the day I can either stop supporting IE6 or when someone develops a js fix so that I can use background images with positions and repeats among other things. (PNGFix is currently working on a beta js to support the above and is well worth looking into.)

However a particular annoyance is what happens when you use a transparent png as an image link! What you will experience is a link that is only active when you manage to precisely position your mouse over the top of a letter or part of the non transparent image. Any area that is transparent even though your link is set to display:block with widths and heights is ignored.

However all is not lost. There is a solution…

Simply save your pngs with a 1% transparent background. This is not visible to the naked eye but tricks the browser into displaying the transparent area as a block. Clever hey!