Ever eaten at a Chick-fil-A? No, I’m not trying to start a political discussion here – I just want to talk about that chicken sandwich. More specifically, I want to talk about the PICKLES on that chicken sandwich. In case you hadn’t realized, the pickles are what make the sandwich irresistible.
Every original sandwich comes with exactly two pickles (gotta control those cost of goods), earning it the Dils’ family nickname of “Two picks and a chick.”
Why am I talking about pickles and sandwiches? Well, I propose that comments can transform “just a good blog post” into an irresistible engagement.
I found that the comments were more useful and valuable to me than the page content itself. And in that instant I had my “aha” moment.
My content is enhanced by the opinions, suggestions, questions and answers that others bring to it.
– Chris Lema on Why I Use Comments on My Site
I love when people leave comments and engage me in two-way conversation. I really love when my readers respond to each other’s comments as it shows me that community is happening. Sure, we may just be talking code, but we’re talking.
While we’re at it, we might as well make comments more interesting to look at. #AMIRITE?
3 Ways to Customize WordPress Comments
Below I’ll show you how to customize some default styles to make your WordPress comments stand out. We’ll cover these three customizations:
- Change the default avatar to a custom avatar
- Style author comments differently
- Add some custom text before the comment form
(plus a bonus tip at the end!)
Let’s roll.
1. Get rid of that snowman-looking default avatar
Why be boring ole default when you can be reinforce your brand with a custom avatar? Brian Bourn over at Bourn Creative wrote a post explaining how to do this awhile back, but I’ll summarize it here.
Step 1. Create a square-cropped custom image (90px by 90px is probably sufficient, unless you’re just showing large marge avatars in your theme). Name your image something like custom-avatar.jpg.
Step 2. Upload that image to your theme’s images folder.
Step 3. Drop this code in functions.php (or wherever you stash your code customizations).
| <?php //Remove opening tag | |
| function add_custom_gravatar( $avatar_defaults ) { | |
| $myavatar = get_stylesheet_directory_uri() . '/images/custom-gravatar.jpg'; | |
| $avatar_defaults[$myavatar] = "Custom Gravatar"; | |
| return $avatar_defaults; | |
| } | |
| add_filter( 'avatar_defaults', 'add_custom_gravatar' ); |
Step 4. From your WordPress admin dashboard, go to Settings > Discussion and select the radio button by your new Custom Gravatar. And don’t forget to save your chanes.
2. Make my comments a different color
With just a little CSS, you can make comments left by the post author stand out visually from those left by others. For example, here’s what my default comments look like:
How dull. Let’s make my Very Important Comments stand out by adding a different background color. To do that, either edit or add this to your theme’s stylesheet:
.bypostauthor {
background-color: #222; // style this however you want
}
The result? Voila:
In case you missed it, you’ll want to target the bypostauthor element in your CSS. The WordPress comment template automagically includes that markup.
3. Add a custom message before the comment form
You know that little bit of text between the “Leave a reply” and the actual comment form? You can change that.
Actually, you can change anything in the comment form, but below is the code to swap out the default “before” text with your own.
| <?php //remove this line | |
| add_filter( 'comment_form_defaults', 'cd_pre_comment_text' ); | |
| /** | |
| * Change the text output that appears before the comment form | |
| * Note: Logged in user will not see this text. | |
| * | |
| * @author Carrie Dils <http://www.carriedils.com> | |
| * @uses comment_notes_before <http://codex.wordpress.org/Function_Reference/comment_form> | |
| * | |
| */ | |
| function cd_pre_comment_text( $arg ) { | |
| $arg['comment_notes_before'] = "Want to see your ugly mug by your comment? Get a free custom avatar at <a href='http://www.gravatar.com' target='_blank' >Gravatar</a>."; | |
| return $arg; | |
| } |
Note — this is important — you will not see this customization if you are logged into your site. Log out and it will appear. Took me awhile to figure that one out, so you’re welcome.
Bonus Customization: Stop Pinging Yourself
It’s great to get a pingback whenever someone links to your content, but what about when you link to your own content? Annoying.
Drop this code into functions.php to disable self pings:
| <?php //remove this line | |
| function disable_self_ping( &$links ) { | |
| foreach ( $links as $l => $link ) | |
| if ( 0 === strpos( $link, get_option( 'home' ) ) ) | |
| unset($links[$l]); | |
| } | |
| add_action( 'pre_ping', 'disable_self_ping' ); |
That’s it! Got any other customizations for WordPress comments you’d like to see? Leave me a….wait for it…COMMENT.
Hi Carrie,
Not sure if you are still monitoring the comments on this post, but just in care you are, 2 questions…
1. I added the snippet you provided to my theme’s style.css (beautiful pro) to make my comments a different color like in your example but it did not work. Is there a step that I am missing? (I am still fairly new to css)
2. This question is about something that was not covered in your article but it is related…your comments area on this blog are all shaded gray so the section stands out nicely. On Beautiful Pro, it is white. So the comments area just blends into everything, which I do not like. How do I get the nice separation by shading like you have here?
Thanks!
I’m glad I found this post! New to Genesis and designing my own site so I’ve typically used plug-ins to do what I know coding can also do. From everything I’m reading sites should run as few plug-ins as possible, so thank you for the tutorials above! I can now delete a few plug-ins!
Glad you’re branching out into customizations. It’s fun to code. 🙂
Whew, this was much clearer than other online tutorials. I really should just read the WordPress Codex top to bottom. Thanks Carrie!
You betcha!
Lovely! That was from 2013. I bet you’ve more tips! 🙂
Amazing blog article and helpful tips! Thanks dear for sharing with us!
Thank you for your post. I liked it. How to use for Genesis?