Sipping Designs

Making Author’s Comments To Pop

Difficulty: Easy

Modern Wordpress content management system offers several built-in tools for modifying the look of your comments. The features have been there for awhile now and in 2.8 they added also the threaded commenting. At the moment the newest version of Wordpress is 2.9.1.

One of the easiest ways to modify the comment list is to make the post author’s comments to stand out. Another easy way is to adjust even and odd comments to look different. Modifying the look of comment list and individual comments is not difficult but it requires that you understand how CSS (Cascading Style Sheets) syntax flows and how (X)HTML ((Extensible) Hypertext Markup Language) selectors work.

Below is an example of comment list where all the comments look exactly the same. Of course gravatars and names help to identify the comment writers but if there are dozens of comments, it may be difficult or at least slow to find the post author’s comments which usually are replies to other comments.

In the second example I’ve used different background color in the post author’s comment so that it can be spotted quickly. This is just a simple example and of course the author’s comment could be modified in any way CSS allows.

The Wordpress function that prints the post or page comments is (specification):

<?php wp_list_comments(); ?>

This function displays the comments inside <li></li> elements by default and therefore it’s recommended to wrap the function with <ul></ul> or <ol></ul> if the default output is used. I’m not going to talk about modifying the structure of the comment list in this post but if you are interested you can find an example in Wordpress Codex.

The small bit which we need to about the wp_list_comments() function is that in the default mode it embeds a lot of (X)HTML selectors into the <li></li> tags. We can use these selectors (classes to be more exact) to direct CSS styling into specific comments. If you are building your custom output you can use the following function to print the same selectors:

<?php comment_class(); ?>

Each comment (li element by default) will get comment class but there will be a bunch of other useful selectors too:

even / odd
thread-even / thread-odd
depth-1 / depth-2 / ... / depth-x
byuser
comment-author-name
bypostauthor

Okay, so you have your style sheet ready but how to make modifications to the post author’s comments? Now that we have the selectors in the list above, we can pick the correct one and use .bypostauthor in the style sheet to direct the style changes into specific comments, the post author’s comments. In the example only the background color is changed so we need to add the following into our style sheet:

.bypostauthor {
background-color: #284d39;
color: #cccccc;
}

The second line is not necessary to make the background green but it is necessary if you want to write valid CSS code. Valid CSS requires that if a background color is defined, also the text color must be defined, and vice versa. Now you will have free hands if you want to make more detailed changes. By the way, the even / odd class can be used to make even and odd comments to look different!

I’m going to introduce more built-in Wordpress features in the future too. Plug-ins are useful but it’s always better to get the same features implemented in the Wordpress core so that they are properly specified and the compatibility can be guaranteed. You can make suggestions for short tutorials in the comments.

Credits: The background texture in the example pictures is made using one of the brushes from KeReN-R’s Grunge Brushes 3 set.