Paginated comments with WordPress 2.7 and the Copyblogger theme

WordPress /

The new WordPress release 2.7 has built-in support for both comment threading and paging. Especially the latter is a cool feature: it helps fighting the problem of ever growing pages just because there’re so many comments attached to a post or a page.

Since I’m using the Copyblogger theme that currently doesn’t come with comments on several pages I changed the comment.php to use this new feature. This post documents how this worked.

How to add paginated comments

First I started reading this, that and finally this post. If you’d like to understand what you’re doing I recommend reading these too.

Basically it’s all about the new functions wp_list_comments, have_comments and *_comments_link. Just replacing the old code with these won’t cut it for the Copyblogger theme because the CSS is based on a description list, i.e. dl with dt and dd inside. We’ll have to change that to either a div or – and that’s what I did – a ul.

One more thing you’ll have to think about is whether the paged pages should be indexed by search engines. Since I’m not an expert in search engine optimization I don’t really know what to do here; regarding duplicate content I guess the robots should only index the first page. Read what Malcolm Coles wrote about this.

Making the changes

Before making changes to the original comments.php from the Copyblogger theme I renamed that file and started from scratch just copying over the bits I needed. You can have a look at the result here; the corresponding part for the CSS can be found over here.

All I did was following the recommendations here, i.e. adding the new comment loop and changing the existing CSS to match the new HTML markup. This worked great so far until I wanted to add the round corners and the speech bubble style to the CSS. The solution I opted for was a filter that adds some div‘s around the comment text like so:

function copyblogger_comment_text_filter($content) {
  return '<div class="comment_text_prefix"></div>'.
         '<div class="comment_text">'.$content.'</div>'.
         '<div class="comment_text_suffix"></div>';
}
if (function_exists('add_filter'))
  add_filter('comment_text', 'copyblogger_comment_text_filter');

This way it was possible to style the top and the bottom of the speech bubble around the comment text with the prefix and suffix div.

Conclusion

Adding paged comments to a theme is almost a snap: changing the PHP code will be done in a few minutes. More likely than not you’ll have to spent some time fixing the CSS to match the HTML code; this won’t be a big problem if your theme already uses an ordered or unsorted list (ol, ul). In case of the Copyblogger theme some extra work was required.

11 thoughts on “Paginated comments with WordPress 2.7 and the Copyblogger theme”

  2. Christian Schenk

    Hi Malcolm,
    I’m using the famous All in One SEO Pack plugin here and didn’t want to change my theme directly but use WordPress’ filter mechanism along with the plugin.
    So, I added these two lines to all_in_one_seo_pack.php (version 1.4.6.16):

    694

    $description = apply_filters('aiosp_description_filter', $description);
    780

    $title = apply_filters('aiosp_title_filter', $title);

    Finally I could add the following to my themes functions.php:

    function paged_title_filter($content) {
  global $cpage;
  if ($cpage < 1) return $content;
  return str_replace('|', '- '.__('comment page').' '.$cpage.' |', $content);
}
if (function_exists('add_filter'))
  add_filter('aiosp_title_filter', 'paged_title_filter');
 
function paged_meta_description_filter($content) {
  global $cpage;
  if ($cpage < 1) return $content;
  return $content.' - '.__('comment page').' '.$cpage;
}
if (function_exists('add_filter')) 
  add_filter('aiosp_description_filter', 'paged_meta_description_filter');

    Have a look at this page and click the Older comments link: the title and the meta description will change accordingly.

  3. malcolm coles

    Yes, it was a fairly big issue that the method I came up with didn’t work with AIOSEO pack (I must get round to installing it one day rather than dreaming up hacks!). Anyway, excellent work in editing the plugin. Perhaps you should suggest he changes the core code!

  5. Phil

    Hi Christian Schenk,

    Thanks for the code, it worked. Now any page in my blog have a unique title and description. But someone need to be very careful when editing the files, or you can broke your site.

    Again, thanks.

  6. Christian Schenk

    Hi Phil,
    it’s great to hear that it worked for you too. Sure, you can end up with a broken page if you make a mistake here. I recommend using a recent version of All in one SEO pack which supports canonical links.

  8. Christian Schenk

    Hi Johny,
    no, I haven’t but I can help you to implement it in your site.

    Basically, you’ll have to replace the output of your comments in your theme’s comments.php with a call to “wp_list_comments”. The “Previous” and “Next” links are displayed by “previous_comments_link” and “next_comments_link” respectively. It’s as easy as that.

    If you need more help with this just contact me.

  10. Christian Schenk

    Hi Will,
    I’ve had a quick look at the most recent version of AIOSEO and they have incorporated the filters I manually added above into the code by default but named the filters differently. Try adding filters for “aioseop_title_page”, “aioseop_title_single” or “aioseop_description” or simply do a search on “apply_filters” in the code of the AIOSEO plugin and you’ll find the correct ones.

Comments are closed.