Customize WordPress Comments

Customize Your WordPress Comments Like a Boss

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.

Pickles

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:

  1. Change the default avatar to a custom avatar
  2. Style author comments differently
  3. 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

Mystery Man GravatarWhy 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:

WordPress Comment Example (default)

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:

Comments by author

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.

comment_notes_beforeActually, 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.

45 thoughts on “Customize Your WordPress Comments Like a Boss”

  1. Nice tut Carrie. 🙂 I’ve done a lot of customizing on my comments including the comment form itself. The only thing I haven’t done is style MY comments (.bypostauthor) since sometimes I reply while logged in and other times while not.

  2. Thanks for this great tutorial, Carrie. I’ve been meaning to customize my comments, so this comes in right on time. xo

  3. There’s a plugin called No Self Ping, which does exactly what it says, since functionality change like that should be in a plugin, not part of a theme.

    1. True, it’s not functionality you’d add to a commercial theme, but for doing your own customizations, there’s nothing wrong with compiling custom functions in a file directly called by the theme.

  4. Great post, Carrie! Getting rid of the self ping is something that I will implement immediately. I didn’t even think about the concept of eliminating these… I just thought it was part of blogging.

    With the comment color, does that work if you are using Disqus?

    Thanks for the awesome content!

    1. Interesting question about Disqus. I’m not sure! I’m *guessing* it’s got its own markup and that bypostauthor wouldn’t work, but would have to see it in action to confirm. But there might be a different CSS element you could target with Disqus to get the same effect.

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.