Open WordPress comments in popup window

A few years ago, pop-up comments were kind of a popular thing. Instead of loading comments on the same page, you would click a link which would then open a new window as a pop-up.

Although there is no an easy way to change the way comments are displayed (you won’t find a button in settings area that will transform them into popups) WordPress still has the code which is ready to open popup comments. You only need to know how to summon the popup; don’t worry, no black magic is involved, just some PHP and HTML.

Add the pop-up script:

For starters, you will need to add the popup script in the header:

  1. Open header.php file
  2. Copy and paste this code on top of the file (be careful with PHP opening and closing tags):
  3. <?php comments_popup_script(500, 600); ?>
  4. Change the width and height of the popup window
  5. The first number in the brackets represent the width, the other one stand for height in pixels. You can change that the way you like it.

  6. Save changes

Create a popup link:

Now that the script is set up, you are ready for the next step. That means that you need to create a link which will open the comment popup. Usually, comments are found under the content so you probably want your link to appear in the same spot. In the following steps, we will show you how to add the link under the post content, but you are free to add it anywhere you want:

  1. Open single.php file from your theme
  2. Copy and paste the code below anywhere you want your comment link to appear. Again, be careful with the PHP tags:
  3. <?php
    comments_popup_link( 'No comments', '1 comment', '% comments', 'btn btn-primary', 'Comments Disabled');
    ?>
  4. You can now change the parameters.
  5. The first three variables contain text which is shown if there are no comments, when there is only one comment or when there are more than one comments. You are free to change the text to anything you want or to translate it into your own language. The 4th variable is there to create a button with Bootstrap design, while the last one contains text which is shown if comments are closed for public.

  6. Save changes

Create the file:

Before WordPress 3.0, this would be enough to get your popup comments going. But, themes without comments-popup.php are deprecated since then and that means you still have some work to do before comments are up and going – you need to create the comments-popup.php file.

  1. Open your FTP client
  2. Navigate to /wp-includes/theme-compat/ where the file is usually located
  3. Create a new file and name it comments-popup.php

Now you are ready to edit the file and customize comment popup page to your needs.

If you want to load the source code to it, you can find it on GitHub . Also, feel free to add and remove content, style the page and do whatever you want to.

That’s it. Now you only need to remove standard comments section from your pages – if you have set up the popup page, you don’t want your comment form to be loaded on the page as well:

  1. Open single.php file
  2. Find the following line of code and remove it:
  3. <?php comments_template('', true); ?>
  4. Save changes

Now you are officially done. Enjoy your pop-up comment form and don’t forget to show us how you customized the page – we’re waiting for your links. If you want to further customize your comments, you might be interested in redirecting users after leaving a comment or maybe even you want to separate comments into multiple pages.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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