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:
- Open header.php file
- Copy and paste this code on top of the file (be careful with PHP opening and closing tags):
- Change the width and height of the popup window
- Save changes
<?php comments_popup_script(500, 600); ?>
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.
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:
- Open single.php file from your theme
- Copy and paste the code below anywhere you want your comment link to appear. Again, be careful with the PHP tags:
- You can now change the parameters.
- Save changes
<?php comments_popup_link( 'No comments', '1 comment', '% comments', 'btn btn-primary', 'Comments Disabled'); ?>
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.
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.
- Open your FTP client
- Navigate to /wp-includes/theme-compat/ where the file is usually located
- 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:
- Open single.php file
- Find the following line of code and remove it:
- Save changes
<?php comments_template('', true); ?>
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.