standard icon

Customizing the Genesis 2.0 HTML5 Comment Form

Now that Genesis 2.0 has been shipped, we are building all of our custom child themes with the new HTML5 markup enabled — and absolutely love the new code base. On a recent project the design specs called for a customized comment form. I have several code snippets saved for this occasion, but Genesis 2.0 child themes with HTML5 enabled use the native WordPress comment form, instead of the older comment form built into Genesis — so the code snippets I had no longer worked.

This is well documented within Genesis at /lib/structure/comments.php, which shows how older XHTML child themes will use the Genesis comment form for backwards compatibility, and child themes with HTML5 enabled will use the native WordPress comment form.

Here’s the default Genesis 2.0 HTML5 comment form:

Default Comment Form | Customizing the Genesis 2.0 HTML5 Comment Form

Customizing the Genesis 2.0 HTML5 comment form:

I keep a copy of the core WordPress files handy at all times so I opened up the WordPress 3.6 comments template file at /wp-includes/comment-template.php and found the new HTML5 comment form, and like everything in WordPress, several filters are available (even more than the example below). A little light reading of some well documented code and the solution was found.

Adding the snippet below to your child theme’s functions.php file will remove the email privacy notice, change the comment form title, change the submit button text, and remove the HTML tags box. If you need to only change one or two things on the WordPress comment form, you can remove or just comment out what you don’t need.

//***Customize The Comment Form**/
add_filter( 'comment_form_defaults', 'bourncreative_custom_comment_form' );
function bourncreative_custom_comment_form($fields) {
	$fields['comment_notes_before'] = ''; //Removes Email Privacy Notice
        $fields['title_reply'] = __( 'Share Your Comments & Feedback:', 'customtheme' ); //Changes The Form Headline
	$fields['label_submit'] = __( 'Share My Comment', 'customtheme' ); //Changes The Submit Button Text
	$fields['comment_notes_after'] = ''; //Removes Form Allowed Tags Box
    return $fields;
}

Here’s the customized Genesis 2.0 HTML5 comment form, after the above code has been applied:

Customized Comment Form | Customizing the Genesis 2.0 HTML5 Comment Form

NOTE: This function should also work on non-Genesis themes that use the native WordPress comment form, I just haven’t tested it to verify. If you only want to remove the HTML tags box from the form, the plugin Remove Comment Notes is great and simple solution that doesn’t require any coding.

Subscribe To Our Blog & Never Miss A Thing

Sign up to get new our latest posts and announcements delivered straight to your inbox. Seriously, at this point, what’s one more email?



Comments & Feedback:Check out what others have to say about this post!

  1. Jennifer, I am just so very glad that there are super smart people like you and Brian in the world! And I am so glad you get excited about WordPress updates! My daughter is currently salivating over the iOS 7 update… Meanwhile, I am waiting for the moon to wax to full, lol. Different strokes, right?? =)

  2. Thank god you understand this stuff and get excited about it! Having you and Jennifer help non-techie people like me understand what’s possible and how it will help us is so valuable! Thank you!

  3. Your comprehensive, informed and linear post gave me hope that experts can help balance out your deficiencies. In the past, I’d struggle to understand this whole post. Research. Re-read. Now, I’m happy knowing that you two are such experts and clear thinkers. When I learned I didn’t have to know everything to succeed, it was a revelation and relief. Though most of this was Greek to me — I know where to go when I want solid behind-the-scenes tech brilliance coupled with functional, aesthetically pleasing and results-oriented systems. You guys rock!

  4. David Mottershead

    Hi

    Wonder if you could point me in the right direction. When I moved to Genesis/Wordpress a while back I imported my comments from another system. The other system didn’t have dates on the comments. So I basically gave them all the same comment date (May 5 2012).

    Obviously I didn’t want all the comments showing with the same date so I got help from some folks and managed to come up with a function that wouldn’t show the comment date if it was before a certain date (set in Advanced Custom Fields – Options Page).

    I’m now converting my site to Genesis2 HTML5.

    The function I have still works with Genesis 2 but doesn’t make use of the HTML5 functionality. (Comments don’t have all the schema info etc.).

    How can I call/filter/modify (or whatever) it so I can make use of my own (adapted?) comments function with HTML5.

    I don’t need the script rewriting in detail. Just need some help with how to call the HTML5 comments form and replace it with my own. I know enough php to amend a script.

    Thanks

    • When HTML5 is enabled in Genesis child theme, it uses the native comment form bundled with WordPress – not Genesis, so any filters or functions used must be done through WordPress and not Genesis.

      • David Mottershead

        Hi

        Thanks. I thought this was the case. Would you mind sharing with me where the block of code is that generates the HTML5 comments list.

        Is it possible to paste it into a new function (then adapt it to suit my needs) and then call this function rather than use the original (I presume this is what you would do).

        Thanks in Advance.

        • If you download a copy of WordPress from wordpress.org and look in /wp-includes/comment-template.php you will find all the available hooks and filters.

          Pasting any code from here would not be a good idea. Creating filters to change what WordPress outputs is the right approach.

          • David Mottershead

            Hi Brian

            Thanks for taking the time to respond. I understand the theory of what you are saying and I’ve looked at all the filters in the comment-template.php file.

            The only problem is I don’t know how to implement it. I’ve just tried reading up on filters and can’t get my head around them.

            What I basically want to achieve is this:

            Function looks at comment date.
            It compares it to 5 May 2012.
            If the comment date is before 5 May 2012 it doesn’t output a date.

            Thanks for your help.

  5. Paying attention to the language we use in our invitations can mean the difference between no comments and a fully engaged reader. Thank you for sharing this beautiful new upgrade. Very nice! You are on my bookmark list of resources to read, learn from and share with my community.

  6. Brian,

    Thanks for sharing your code on this. Could you do a post on creating a function and filter/code to handle the form submission at some point?

    I want to implement a quick check “if the author name looks like a URL, don’t submit the comment but return the page as if you did” but I think I’m not searching for the right phrase, or looking in the right part of the comment-template.php code.

    I’m getting a lot of comment spam where they put a URL to their spam site in the Name field—so I figure that’s a pretty easy sanity check for identifying a spam comment. That and a few key phrases—I don’t even want to record it to my spam folder. But if you get around to it, a tutorial that would show the basics would be great.

    Thanks,

    Jay

      • Yes, I see that Genesis 2 is using the native WordPress forms. WordPress automatizing includes the “novalidate” attribute when it creates the form, however. And I don’t see a filter to change that. Or have I missed something?

        How do I get WordPress to output the form with validation on?

        Bob

  7. This saved me a lot of time searching the web for answers on how to do that one simple task..thanks!

    Next on my list is to make a comment box as elegant as yours. =)

  8. Hey Brian !!!
    I was looking for the codex that could customize the default genesis comment form. Thanks man for sharing this codex. I was setting up the blog that time I found the comment system should not allow HTML tags.
    Thanks again for it
    Regards
    ~Ravi Verma

  9. Roger Milton

    This was really helpful! I’ve been searching for this for a while now… I did have one question though! I have also been trying to find out how to change the field names/labels in the comment form. Instead of “website” I would like Facebook URL or YouTube URL. Is there any tutorial or code snippet I can follow to help a wordpress beginner like me to make that change? Thank you!

      • Hi there – I took a look at the comments template file and it doesn’t look like there is a filter available to change the website field name or remove it. If this is a required feature, you may want to consider using jQuery to replace the text or to remove the field.

  10. Carol

    I was able to use this code to modify a few things, but what I was trying to do was to translate the form, and using this code, the labels for ‘name’, ‘email’ and ‘website’ are still in english. Do you know how can I have these parts translated using this code?

Share Your Thoughts & Opinions!

Have something to say, add, or share? Speak up!