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. That doesn’t seem to completely resolve the problem, especially for replies to existing comments. Might it be necessary to append the class in some way?:

        .bypostauthor xx xx {

  1. This post was amazing! I had the hardest time trying to add text above the submit button and your solution was the only one that worked! I have one question. In the text I point the visitor to my comment policy, which is in my Terms and Conditions of Use. I have made “Terms and Conditions of Use” a link, but the link is not apparent unless you hover over the text. Therefore I would like to underline that text so it is clear that a link is present. Is there something i can add to the code (perhaps to the h ref tag?) so that the text is underlined? Thanks again for this wonderful post!

  2. Hi Carrie! I figured out the answer to my other question, but I have a different one for you! How did you add the notify me of follow-up comment via email checkbox? Thanks so much!

  3. Hi
    “Upload that image to your theme’s images folder.” I don’t know how to do that, I’m a beginner and I have no idea what and where is my Theme’s Images Folder. Can you please tell me, I would really appreciate it.

    1. Hi Emma,
      This article would be a good starting point before you start adding customizations to your site. You’ll need to use an FTP client (discussed in that article) to upload your image. WordPress files structure for your theme is /wp-content/themes/your-theme/images/.

      Cheers,
      Carrie

  4. Got it, thanks a lot! One more question: i like the comment form you have here, is this the theme’s design or you customized it as well?

  5. Carrie I promise this is my last question, will not bother you again. I tried the the line before the comment form and is not working, it appears as it is (the whole code) on top of my website. Do you have any idea why and what can I do to fix it? Thanks

      1. Yes, thats exactly what I did to begin with but didnt work. Maybe its the theme or a plugin, i dont know. I have 2 websites, one is working, one is not. Anyway thanks for everything

  6. Hi Carrie, I already have the custom Genesis gravatar code in my functions.php. However, I recently redesigned my entire site and made me favicon and custom gravatar. Now, for some reason, the old gravatar is showing. It looks as though it’s using Jetpack’s Photon although it’s been disabled for over a year. How odd!

    This is what it should look like: http://www.sweet2eatbaking.com/wp-content/themes/sweet2eatbaking/images/gravatar.png

    This is what it’s showing: http://i1.wp.com/www.sweet2eatbaking.com/wp-content/themes/sweet2eatbaking/images/gravatar.png

    Note how it links to wp.com and shows the Jetpack favicon?

    My functions code for custom Gravatar is:

    //* Create a custom Gravatar
    add_filter( ‘avatar_defaults’, ‘custom_gravatar’ );
    function custom_gravatar ($avatar) {
    $custom_avatar = get_stylesheet_directory_uri() . ‘/images/gravatar.png’;
    $avatar[$custom_avatar] = “Custom Gravatar”;
    return $avatar;
    }

    Do you have any idea why it’s showing this? I’m stumped since it’s definitely linked to the correct directory.

    Thanks.

    1. Hmm… I just looked at your site and there’s no default gravatar showing (well, I mean it’s showing the snowman). Are you running a caching plugin? Maybe just some wicked caching going on.

          1. I don’t have any Jetpack modules active for the gravatar. I’m using the latest version of Jetpack and only have the following active:

            – Enhanced distribution,
            – Extra sidebar widgets,
            – Monitor,
            – Notifications,
            – Publicize,
            – Related posts,
            – Sharing,
            – Subscriptions,
            – WP stats.

            The rest are disabled. I just can’t understand it.

          2. If you completely disable Jetpack, do the gravatars work normally? If so, you know the issue is Jetpack-related and can chase down support that way. If not, time to troubleshoot in a different direction. Generally, de-activating each plugin and checking to see if problem still exists is a handy way to narrow things down.

  7. Thanks Carrie, but I tried deactivating Jetpack – no joy, so I deactivated all plugins – no joy. Removed that custom gravatar code in the functions.php – still the old custom gravatar shows. 🙁

    I even went to gravatar.com and completely deleted that gravatar, but it’s showing the strange Jetpack photon URL to that custom gravatar. I’ve already tried to seek help on the Jetpack forums but no-one has replied. I really don’t know why it’s showing.

    In fact, I could use your help on something else on that site. Could you email me directly and I’ll get back to you on what needs doing so you can send me a quote at all?

    Thanks for your help so far though.

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.