How to Add Popup Comments in WordPress Posts

By 2 years ago   BloggingTutorialsWordPress
Tweet Share Email Share  

Its easy to add popup WordPress comments to your WordPress theme, but as you might have observed that by default the WordPress comments are loaded on the same page. Several years ago, popup comments were popular. I remember how my first Blogspot blog had popup comments and it seemed a cool way of posting comments without leaving the page. After posting the comment, simply click the “Click to Close” link and the Window is out of your way.

Comments Popup Script

WordPress still has an integrated code to setup popup comments easily.

popup comments

First you need to add the popup script in the HEAD section of your html code, typically after editing the header.php file in your theme.

<?php comments_popup_script(400, 500); ?>

Here 400 is the width of the window (400px), and 500 is the height of the window (500px). You can change these values to the popup window size you desire.

Comment Popup Link

Then you need to add code in your single.php where you want the popup link to appear. This should be commonly after the end of the post.

comments_popup_link( 'No comments', '1 comment', '% comments', 'btn btn-primary', 'Comments Disabled');

Lets see how this code can be edited  – The consecutive variables signify the response when there are no comments, 1 comment or several comments.  The ‘btn btn-primary” classes use Bootstrap design to create a beautiful blue button. The last text displays if the comments are turned off. You can customize all these values for optimal display.

Popup Comments Window

Now you can change the appearance in the popup window, its contents and styling by editing the comments-popup.php file in your WordPress theme.

If your theme does not have this file, you can create php files without FTP and then add code as desired in this file. This will override the default comments  popup file located in your WordPress installation at /wp-includes/theme-compat/comments-popup.php. You can use this file as the template for your new file.

In the end, remember to remove the comments template from your single.php. It should be a single line of code like this

<?php comments_template('', true); ?>

Enjoy you new pop comments. Share your feedback in comments.

Update: Also see how to show WordPress comments on new page.

5 comments on “How to Add Popup Comments in WordPress Posts

  1. Suraj Rai says:

    I am glad you pointed this out! No one is talking about this. You shared good post for newbie wordpress developers, Thanks to share useful post for wordpress developers.

  2. metz says:

    That’s cool! It could be nice if we will try this pop up comment on our blog page and see what will be the outcome. We can try an A/B test, which is better between the default comment and the pop out comment window.

    Thanks for the coding.

  3. Amanda Kelly says:

    That’s awesome, I might test it out on my page. Thanks for sharing the tutorial.

  4. I am pretty much amazed of the article content. I learned a lot from the interesting topics that are being discussed. It’s my pleasure to visit and learned things and facts of this page.

  5. raja says:

    i have no words such a great post.and also0 it works great and the instruction you give is very simple and effective also

Leave a Reply

Your email address will not be published. Required fields are marked *

ALL comments are moderated. No links allowed. Use real name. Only useful comments will be approved.