Customizing the Genesis 2.0 HTML5 Comment Form

How to customize the Genesis 2.0 HTML5 WordPress 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.

About Brian Bourn

At the helm of Bourn Creative, is Brian, who manages the day-to-day business operations and all company projects. While he spends most days entrenched in code, Star Wars, WordPress, and the Genesis Framework building client websites and custom themes, Brian is also a brilliant business strategist and can often be found consulting with clients on how to best achieve their online goals.

Able to break down complicated topics into easy to understand, simple steps, Brian regularly attends and speaks at meetup groups, WordCamps (his favorite), networking events, and conferences on the topics of design, website strategy, and tech-nerd stuff.

Bourn Creative Recommends WP Engine

WP Engine WordPress Hosting Gain peace of mind knowing your website (the main source of your online income) is safe, secure, and protected with WP Engine - an insanely fast, infinitely scalable, backed up, secure, expert WordPress hosting company that’s got your back!

Comments & Feedback:

  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. Ok, so now I know how to remove the allowed tags after the comment form, although that is also doable using CSS.

  5. Brian,
    This is so helpful. I recently switched over to the Genesis theme. Thanks for sharing your genius:)

  6. David Mottershead says:

    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 says:

        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 says:

            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.

  7. Just wanted to say thanks for taking the time to share this info. It’s folks like you that make the Genesis community so nice to be a part of.

  8. 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.

  9. This is what I really want, thanks for sharing this code snippet.

  10. 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

  11. Thanks for sharing this – super helpful!

  12. The Genesis 2 default comment form comes with form validation set to “no validate”. How would I go about turning native HTML5 validation on for Genesis 2 comment forms?

    Bob

    • Since Genesis 2.0+ with HTML5 enabled uses WordPress’ comment form, you would need to hook into WordPress core for any form validation.

      • 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

  13. 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. =)

  14. 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

  15. Roger Milton says:

    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!

  16. Is there also a way to remove the website field? Could you share the solution? Thanks.

    • I was wondering the same thing and is here a way change the field name from “website” to “blog”? Thanks!

      • 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.

  17. Thanks Brian, this is exactly what I was seeking, and you explain it so it’s as easy as pie to fix.

Share Your Comments & Feedback:

*