PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Styling WordPress 2.7 Comments

Posted by on 21st Dec 2008 WordPress Coding & Design 6 comments

A few weeks ago I wrote about the WordPress 2.7 theme enhancements and specifically how the comments were now output using the tag wp_list_comments(). However, this controls all output of your markup and for a lot of people, this is different to how their existing theme is.

Just a reminder, default output is:

[sourcecode language="html"]


  • Sarah Says:

    Comment content goes here.

  • [/sourcecode]

    This is fine, but for my own site this wasn’t what I wanted. I’m sure I could have used this and moved things around with CSS but luckily the WordPress developers have realised that not everyone would want the same comment output and they allow you to create your own markup and then use a callback function.

    How Does This Work?

    A callback parameter is added to the wp_list_comments() function. The value of this parameter is the name of the function with the code you would like to use. This function is then stored in a functions.php file within your theme directory (you may already have this file, so just add the function to it).

    So first off we need to decide on the output. You’ve probably already got this in your existing theme so you can most likely copy this out. To know where to start you need to be starting with an opening list item (li tag) and then close with a closing list item tag. Of course every theme is different so if you’re not sure then post up a comment with a link to a text version of your file and I’ll happily help you out :)

    For my own theme this was

    [sourcecode language="html"]

  • By < ?php printf(__('%s'), get_comment_author_link()) ?> on
    function theme_comments ($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment;
    // comment code goes here
    }
    ?>[/sourcecode]

    A couple of changes first need doing to our comment code output. The first is to add in the new template tag comment_class(), which will give us our additional classes into the list item. The second is to remove the closing list item tag. For some reason, when using this method, WordPress automatically inserts the closing list item tag, which I think is a bug really, as not everyone uses lists (although they should!). However, for the time being this will at least create valid code.

    So our final callback function looks like

    [sourcecode language="php"]< ?php
    function theme_comments ($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment;
    function silverlight_comment($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>

  • id=”comment-< ?php comment_ID() ?>“>
    < ?php echo get_avatar(get_comment_author_email(), 40); ?>

    < ?php if ($comment->comment_approved == ’0′) : ?>
    < ?php _e('Your comment is awaiting moderation.') ?>

    < ?php endif; ?>

    < ?php comment_text() ?>

    By < ?php printf(__('%s'), get_comment_author_link()) ?> on

  • A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

    6 comments - Leave a reply
    • Posted by Blog Expert on 21st Dec 2008

      Great tutorial.

    • Posted by daniel on 12th Oct 2010

      wow that is lovely sarah. thanks for the hard work. i really appreciate it after i waster my precious hours just to find the problem solving article. cheers! keep makin a great post will ya.