For those maintaining WordPress blogs with regular posts, one of the most frustrating things can be getting users to comment regularly. Obviously we want to make this as easy as possible for them. Sure there’s the #comments anchor that we can link to after they’ve read the article that jumps to the bottom of the article’s page, but why reload the article? Let’s let them comment in-page!
For an example, go to Civitas Review and click on a speech bubble beside a post title.
You might think this would be a massive undertaking. Luckily, WordPress makes this very easy for us. A little-used core feature is comments_popup_link(), which in conjunction with comments_popup_script(), generates a bit of Javascript to open a stripped-down comment form in a new window.
So if your theme has a comments-popup.php, most of your work is already done! All we need to do is make it a modal.
- First thing you need is Jquery. Check your WordPress header output for it, because a lot of plugins use it already. If you already have it in your head, you can skip this step.
- You’ll also need a modal plugin. For our purposes, NyroModal is our best bet, because it can take whole pages (and not just images) as modal content.
- Make sure both Jquery and NyroModal are called in your WordPress header, like so:
<script type="text/javascript" src="path/to/your/js/nyroModal.js"></script>Same for Jquery, before the NyroModal script. - Almost done. NyroModal is built so that if you give any link the class “nyroModal”, it will open in a modal window. The third argument of
comments_popup_linkis the link class, so we just need to insert the function in our theme like so:comments_popup_link('No comments', 'One comment', '% comments', 'nyroModal')
That’s it! Now style your comments-popup.php to your liking, and you have a nice modal comments window.
1
deathstardarth says: Jul 29, 2010 at 11:56thanks for the info. i’ve already implemented something similar, using lightbox. the problem i’m having is that i get a modal window and a popup window at the same time. any ideas?
2
thrica says: Jul 29, 2010 at 20:49Depends on which of the million Lightbox variants you mean. I wrote about NyroModal because every other decent lightbox I looked at was horrible at modals.
3
deathstardarth says: Jul 30, 2010 at 10:48it’s the same with NyroModal. modal window works with comments inside. pop-up comments still pop up along with it. here’s a stripped down version: test.youdontexist.com .
thanks for taking the time to reply.
4
thrica says: Jul 30, 2010 at 12:11Oh I see what you mean. The class=”nyroModal” is all you need for the event to be called; the external js hooks onto that. Removing the onclick attribute from the a tag should leave just the modal.
5
deathstardarth says: Jul 30, 2010 at 13:18this all happens in comments-template.php. around line 941. i’m wondering about a way to remove the onclick attribute without editing core files.
6
thrica says: Jul 30, 2010 at 13:58Are you using comments_popup_link like in step 4? That doesn’t give me an onclick, unless they added it from WP 3.0 to 3.0.1.
Alternatively, you could do something like:
<a href="<?php the_permalink(); ? rel="nofollow">#comments" title="Comment on <?php the_title(); ?>" class="nyroModal"><?php comment_number(); ?></a>Where comment_number() is defined in functions.php to return the same things as the first three arguments of comments_popup_link. If you end up doing it that way, I can point you to that function.
7
deathstardarth says: Jul 30, 2010 at 20:01what i had was:
comments_popup_link(‘No Comments’, ’1 Comment’, ‘% Comments’, ‘nyroModal comments-link’
using your code works, but brings up the whole post with the comments.
you can see that happening here:
test2.youdontexist.com.
8
3 finger louie says: Aug 13, 2010 at 14:40i can get everything to work, but how would i set the link to only pull up the comments form while leaving the actual comments static on the page?
9
Andrea says: Sep 18, 2010 at 16:43but how can i disable the popup? because it opens the modal and popup at the same time.
thanks
10
Andrea says: Sep 19, 2010 at 8:42Ok, after this “comments_popup_link(‘No comments’, ‘One comment’, ‘% comments’, ‘nyroModal’)” put this $(“a.nyroModal”).removeAttr(“onclick”);
works fine for me.
11
Declan says: May 30, 2011 at 15:28It’s been a while so not sure if my comment will be read but i have had the exact same problem as deathstardarth. It loads up the full page and no just the comments. how do you make it like the example in your tutorial.
Also, i didnt understand andrea’s code as i am not a programmer and so couldnt get it to work.