If you’d like to change the labels on your Genesis comment form, or add icons (like Font Awesome icons) to your labels you can easily do that using a couple of WordPress filters.
The HTML5 Genesis Child themes use the default WordPress comment system*, so to make these changes you’ll have to use the WordPress filters “comment_form_default_fields” and “comment_form_defaults”.
* It’s important to note that the Genesis Framework uses the default WordPress comment form for HTML5 themes, so the code below will not work if you’re using an XHTML theme (in that case you’d use the “comment_form_defaults” filter for all changes).
Filter The WordPress Comment Form Labels
Add the following code to your theme’s functions.php file:
[gist id=”be22783594bb5db915c3″ file=”modify-comment-labels.php”]
You can see in our code, we’ve changed the default label “<label for=”author”>’ . __( ‘Your Name’ )”. Previously it said “Name”, but we’ve changed it to read “Your Name”. Change the label text for each label to whatever you’d like to use.
You’ll also see we’ve added a Font Awesome icon before the label using “<i class=”fa fa-user”></i>”. Please note that in order to use Font Awesome, you have to include the Font Awesome styles (if you’re not already doing so):
[gist id=”cd4691da9aecfa582daf” file=”genesis-enqueue-fontawesome-css.php”]
Visit Font Awesome to find the icon you’d like to use. If you prefer using a different Icon family or image you can easily do so by replacing “<i class=”fa fa-user”></i>” with your icon or image code.
Style The WordPress Comment Form Labels
We’d like to have everything appear on one line, along with some consistency, so we’ve also modified our theme’s style.css file:
[gist id=”be22783594bb5db915c3″ file=”modify-comments-label-style.css”]
The end result is shown here:
These styles were used with an HTML5 theme. If you’re using an XHTML theme, you
If you like this tutorial and would like to receive tutorials and more free tips by email, enter your name and email below:
Leave a Reply