Expandable Comment Replies

So although I’ve said before that I was working on my first plugin, I’m actually going to release my first plugin. it’s the first one I’m letting out into the wild – not the first one I’ve written :)

So here it is – my jQuery Expandable Comment Replies.

It actually started with an idea i had last week. You’ll notice I’ve had a redesign over the last week – that’s because I finally realized I could make my own site be how I really wanted it to be, and if I wanted to add some cool stuff (like the jQuery scroller on the index page) then by golly, I could. So I did :)

But as I was tweaking things, I noticed my comments were flat. I’d been looking on other sites for inspiration – and it’s funny – the thing that got me was YouTube. Not because they have cool-looking comments – but because they had replies that could expand. I thought this was something really cool to have, because to me, comment replies (even if they remain on-topic) can sometimes get away, and on occasion, detract from the topic at hand.

Believe me, I’m the queen of going off on a tangent, but sometimes working my way through a bunch of replies that go off on all kinds of tangents is just not a fun thing.

The issue was I had to somehow group my replies. Now, I know this already comes in by default for the OL/LI listing of comments, but because I’m also using cufón on my site, I was requires to have valid code using a Strict Doctype. (the <p> element within a <li> tag is NOT valid – nor are many other things I was using to try and style my comments. Therefor validity was broken and my cufón stopped working!)

So what to do. The unfortunate thing with the callback method that can be used to redo your comment layout is that the wp_list_comments function provides it’s own Loop – so when you use the callback feature, whatever you put in there is already within a Loop. So when I’d try to put in my outder grouping div, it would apply to every single comment – it wasn’t grouping how I needed it.

(By the way, you can get a GREAT tutorial on the callback feature on Jeremy Cark’s site, and you’ll see the discussion I was having with him – and my ultimate “Ureka!” – in his comments over there :))

Initially, the only way I could pull it off was by editing core WP code – a big fat no-no. but after a week of trying, I finally gave up and did it. But I love puzzles – so I HAD to figure it out. And so I did.

Thus, the plugin, which you can download here.

Instructions
I’ve got this set up so it’s as easy as possible for you to use it. I’ve included the jQuery 1.3.2 library, so if you already have it installed, you probably want to ignore the “scripts” folder I’ve got in there. But if you aren’t using jQuery, then you must have the library installed for this to work – so upload the “scripts” folder to your theme directory.

The next step is to edit your comments.php file – you want to replace wp_list_comments with bb_list_comments. Notice I did not include the brackets – that’s because this plugin is already set to work with whatever setup you currently have. So if you have stuff inside the brackets, you want to keep it in place.

Lastly, you want to activate the plugin. That’s pretty much all there is to it.

You can see the effect by visiting some of the other pages in my site (this one, for example). You will see one of the comments has a link that says “Show/Hide Replies”. Click that, and you’ll see the expansion.

As usual (when it comes to my stuff) it’s handed out on an as-is basis. If you find any bugs, definitely let me know – but otherwise you’re pretty much on your own. (I am helpful though – if I can help you, most likely I will – because I’m nice like that – but please don’t force support on me. I do have a life!)

Enjoy it! :)

Comments

  • Jeremy Clark

    Hey Shelly, I trying out your plugin now but looks like you forgot to include the accordion js file in the zip file. Also my comments wont stay expanded, if you have a minute to look.

    March 31, 2009 at 12:58 pm Reply
    • Shelly

      Phooey – you’re right. Thanks for the heads-up. it’s fixed now – accordion.js (and accordion.min.js) are both now in the zip file. Thanks for that.

      And I’ll take a look at yours – usually the issue with this is an extra closing div tag – does it bounce up and down? I hate it when that happens!

      March 31, 2009 at 1:09 pm Reply
      • Jeremy Clark

        Yeah they will slide down then immediately slide back up. Also another thing I saw was the jquery $ short tag, if the default jquery that wordpress uses is loaded as by some plugins the $ doesn’t work and you have to replace it with jQuery for the code to work properly.

        March 31, 2009 at 1:21 pm Reply
      • Shelly

        OK Jeremy, I just uploaded a “fixed” version of the plugin. Took Adam’s suggestions into play, and I tried ul, ol and div versions of the comments and validated. As a test, I also took the code from your tutorial and stuck it in a test functions.php file – and it’s working in my testbed. SO hopefully the new download will fix things? let me know if you still have issues.

        March 31, 2009 at 2:45 pm Reply
      • Jeremy Clark

        That’s seems to be working great now. Let me know when you get it into wordpress extend.

        I’m going to write up a post on it today.

        April 1, 2009 at 7:07 am Reply
    • Shelly

      yep – that appears to be it. That’s the only thing about this that is odd – getting those end tags right.

      I *believe* it’s an extra “li” tag at the very end. I know I had the same issue – mine was with “div” tags. I had to skip adding in the very last closing “div” tag, because i’d have the same problem. Funny thing is – the number of “bounces” you see has a direct correlation to how many extra closing tags (or opening tags) you have!

      Let me try mine again using “li” tags and see what happens – I thought I fixed this already – but apparently not!

      March 31, 2009 at 1:29 pm Reply
  • Adam S

    It looks good, but two tips for you:

    1. You use unnecessary ‘echo’ statements, they should simply be concatenated. I understand you probably do this for style, but you don’t need to execute the function twice for max performance.

    2. Your switch() functions should be if/else statements. switch() is many times slower than if/else (for all but integer and boolean testing) and is generally best used for regex testing. Since you’re comparing strings, I’d recommend switching to if/else.

    3. What’s the purpose of the jQuery accordion plugin? I don’t see any jQuery that requires that, and it’s not in your download zip.

    March 31, 2009 at 1:11 pm Reply
    • Shelly

      Hey Adam :)

      Thanks!

      For the record, the “switch” function is what WordPress provides by default. basically, what I did was copy the bottom half of the “comments-template.php” file, put in my edits, and renamed a few tings. I’m not an extremely *advanced* writer of PHP, but I know enough to get around (getting better every day – especially thanks to people like you :) )

      I’ll give the if/else a try (I actually prefer those over switch – so yay if it works!)

      I *just* added the accordion.js stuff – I’m not sure. I know my site’s working fine without using the accordion, but I guess maybe some people need it? i don’t know. it’s in there as a “just in case” measure, I suppose:)

      There’s a reason this is version 0.1! LOL

      thanks for the tips! I’m off to give ‘em a try now :)

      March 31, 2009 at 1:36 pm Reply
      • Adam S

        I write *a lot* of PHP and *a lot* of jQuery, so I can tell you: the jQuery in your plugin doesn’t rely upon, or even use, the accordion plugin. Hope that helps.

        March 31, 2009 at 1:42 pm Reply
      • Adam S

        One last thought:

        You should mod your jQuery right before the .click()

        $(‘.replylink’).hover(function() { $(this).css(‘cursor’,'pointer’); }, function (){ $(this).css(‘cursor’,'auto’); } ).click(function() {

        This will make the mouse turn into a pointer finger to indicate a link, when hovering over the show’hide area.

        March 31, 2009 at 2:22 pm Reply
  • ZK@Web Marketing Blog

    I’m having a problem with it however when integrating it into a CMS I have put together. Creating new thumbnails (and other assorted meta and publish infos) are straightforward enough, however I’m coming unstuck when I try to allow administrators the ability to update the thumbnail selection. I have managed to get the selection box to display correctly on my larger image, but I need this selection to be shown in the RHS thumb.

    June 20, 2009 at 12:37 pm Reply
    • Shelly

      What are you looking to do with the thumbnails, exactly? (Sorry – I just returned from vacation, and I ran out of coffee today, so I’m on “slow” today.)

      If I’m reading this right, you want some sort of method for making the image thumbnails easily updateable? I don’t know off the top of my head how you could do that, but if you have other people set as admins, they should be able to do that easily. The system uses “gravatars” so if people want their images changed, they can change the image in their gravatar account. But if people want an image for this specific blog only… you might try “Dan’s Avatar Thingy.” (Yes, that’s the actual plugin name.) It actually puts in an avatar interface in your blogs specific back end, and people can update the avatars when they are logged into your site (even subscribers can do it – it happens through the profile.)

      However, I’m not *positive* it’ll work, because I don’t know if Dan’s Thingy (oh, that sounded bad!) is updated to 2.7/2.8 or not. it’s been a long time since I’ve used it – but you might want to check into it, it may work for you – who knows?

      June 25, 2009 at 7:58 am Reply
  • Website Design Services

    Looks like a great plugin; however, it seems people are having problems with it. I will have to download it myself and see (:

    July 15, 2009 at 12:32 am Reply
    • Shelly

      Where are you getting your information that people are having problems with it? if you mean the above comments, all (but the last one) were done on the day I released it – *before* t was even made public. The suggestions were taken into consideration and applied before the initial release was put out.

      As for the previous gentleman, he was trying to do something that has nothing to do with the plugin – it’s how he wanted his comments displayed with a particular gravatar method.

      No one has contacted me with issues (I would hope if there were problems, people would contact me!) and I’m finding nothing on the forums about issues – so if you know something I don’t, I’d appreciate some information so I can resolve the problem. :)

      July 15, 2009 at 8:32 am Reply
  • beli

    Your plugin is great. I also had some minor problems with it at the beginning but now it work like a charm. Thanks.

    [spam removed]

    August 9, 2009 at 12:03 pm Reply
  • Webdesign

    Plugin is great..

    Last many days i have searching like this plugin!

    Thanks

    September 27, 2009 at 8:36 am Reply
  • Mauricio Mesquita

    Hello

    First, thanks for the plugin! It’s really good

    How do I replace “Show Replies” and “Hide Replies” for images? I’m not a great programmer and am having difficulty.

    Thanks
    Mauricio

    September 15, 2012 at 4:38 pm Reply
    • Shelly

      Do you mean how to replace the text with an image?

      Open up “jQuery-comments.php”, and around line 35, look for “function start_lvl(&$output, $depth, $args) {”

      That’s the function that has the text (“Show Replies” and “Hide Replies”) for the expansion trigger. Just replace the text with the image call. You have to make sure the image path is correct, too (relative paths don’t work, unless you upload the image in the plugin directory).

      This sounds like perhaps I should make an option page, to edit the text and/or use an image? I could do that for a future release… thanks for the idea :)

      September 19, 2012 at 10:26 am Reply
  • Have your say: