Customize Your WordPress Comments
WordPress is pretty amazing. I’ve only been using it for a few months now and the more I learn about it, the more I love it. I used the Starkers Theme by Elliot Jay Stocks as a starting point for this template. It’s basically just a stripped down blank slate theme with all style elements removed. It surprisingly didn’t take much work to insert my design into the template. Of course I’ve only made some of the most basic template adjustments – custom header and footer and styles. I shouldn’t have been surprised to find out when I first noticed how the comments were displayed, they look pretty crappy. I started digging around to see what customization options I had. Turns out your customization options are unlimited!
Your WordPress comments are displayed by a call to the wp_list_comments() function in the theme’s comments.php file. This function call can include quite an array of arguments. The Starkers theme by default didn’t use any of them. I tried a few of them but they really didn’t offer the level of customization I was looking for. You can read more about this function and its arguments in the WordPress Codex.
Then I learned about the “callback” argument. With this argument you can specify a custom function to call to display each comment. Here’s how I setup mine. First I changed the wp_list_comments() call in my comments.php file to include the callback argument. It now looks like this:
wp_list_comments('type=comment&callback=mytheme_comment');
The next step is to add your new custom function “mytheme_comment()” to your theme’s functions.php file. All I really did was copy the code from the Examples Section of the WordPress Codex and make a few changes. It’s quite a powerful feature. This gives you the flexibility to style individual comments however you wish. You can alternate styles every other comment with the “even” and “odd” classes and even code custom display styles for admin comments or comments from specific users.
Here’s one other little tip. The example code from the WordPress Codex uses the comment_text() function to display the actual comment. This returns the comment text with some minor formatting adjustments such as paragraph tags at the beginning and end. I replaced that with the get_comment_text() function. However you can’t just call the function or it will display nothing. You have to echo or print the function as follows:
echo get_comment_text();
I had a lot of fun styling my comments. Try it out yourself by filling out the comment form below or view the comments here. Hopefully, if any of you find yourself in a similar situation, these tips can at least get you pointed in the right direction. Happy styling!
As a side note, I was pleased to discover that SyntaxHighligher is now available as a WordPress plugin. It doesn’t add much for single lines of code but it may come in handy later.
Leave a Reply
-
Sorry about the mess. My WordPress template still needs a lot of work. I'll get around to it eventually. Is the clutter in your way? Click here to clear the desk.