How to Add Popup Comments in WordPress Posts (Modern Dialog Method)

Want readers to open the comments in a popup window without leaving the article? Years ago, popup comments were everywhere; my first Blogspot blog had them, and it felt neat to post a comment, click “Close”, and carry on reading. You can still add popup comments in WordPress posts today, but the old built-in method has gone. Here’s the modern way to do it with the HTML <dialog> element, in a few lines of code and no plugin.

Quick answer: WordPress removed comments_popup_script() and comments_popup_link() in version 4.5. Instead, wrap comments_template() in a <dialog id="comments-dialog"> element in your single.php, add a button that calls showModal() to open it, and a small script that reopens it after someone posts a comment.

What popup comments look like

The comment count appears as a button below the post. Clicking it opens the comments and the comment form in a window over the page. Closing it takes the reader straight back to where they were.

The old method (no longer works)

When we first wrote this tutorial in 2014, WordPress had built-in functions for this. You added <?php comments_popup_script( 400, 500 ); ?> to header.php to open a 400 × 500 pixel browser window, then comments_popup_link() in single.php for the link, and styled it with a comments-popup.php template.

WordPress deprecated pop-up comments in version 4.5 (2016), and the functions no longer open a popup. If your theme still uses them, replace them with the method below.

How to add popup comments in WordPress with <dialog>

The HTML <dialog> element creates an accessible modal window that works in all modern browsers, with no jQuery or library needed.

Step 1: Replace the comments template in single.php

In your child theme’s single.php (or the template part your theme uses), find:

<?php comments_template(); ?>

Replace it with:

<button type="button" class="btn btn-primary" id="open-comments">
  <?php comments_number( 'Post a comment', '1 comment', '% comments' ); ?>
</button>

<dialog id="comments-dialog" aria-label="Comments">
  <button type="button" class="close-comments">Close</button>
  <?php comments_template(); ?>
</dialog>

The three comments_number() texts are shown when there are no comments, one comment, or more. We style the button with Bootstrap classes, but any CSS works.

Step 2: Add a little JavaScript

Add this just before the closing </body> tag (or in your theme’s script file):

<script>
const dlg = document.getElementById('comments-dialog');
if (dlg) {
  document.getElementById('open-comments').addEventListener('click', () => dlg.showModal());
  dlg.querySelector('.close-comments').addEventListener('click', () => dlg.close());
  // Reopen after a comment is posted or a comment link is followed
  if (/^#(comment|respond)/.test(location.hash)) dlg.showModal();
}
</script>

Pressing Esc also closes the dialog, built into the browser.

Step 3: Style the popup window

#comments-dialog {
  width: min(640px, 92vw);
  max-height: 85vh;
  overflow: auto;
  border: 0;
  border-radius: 8px;
  padding: 24px;
}
#comments-dialog::backdrop { background: rgba(0, 0, 0, .6); }

Is this good for SEO?

Yes. Unlike the old popup window, the comments are still part of the post’s HTML, just hidden until opened, so search engines can still read them. If you’d rather move comments off the post entirely, see how to show WordPress comments on a new page. To speed up posts with lots of comments instead, you can lazy load comments.

Need to add a template file to your theme? Here’s how to add PHP files to a WordPress theme without FTP.

Tips for better popup comments in WordPress

• Show the count clearly: a button such as “Read 24 comments” invites more clicks than a plain “Comments” link.
• Keep the form visible: place the comment form at the top of the popup window on busy posts, so readers don’t have to scroll past every comment to reply.
• Test keyboard access: make sure the button can be reached with the Tab key and that focus returns to it when the dialog closes. The dialog element handles most of this for you.
• Clear your cache: after editing theme files, purge your caching plugin and CDN so visitors get the new code.

Frequently asked questions

Does comments_popup_link() still work?

No. It was deprecated in WordPress 4.5 and no longer opens a popup window.

Do I need a plugin for popup comments?

No. The <dialog> method needs only a few lines of HTML, CSS and JavaScript. Some comment plugins offer modal comment forms if you prefer not to edit theme files.

Does the dialog work on mobile?

Yes. It works in all current mobile browsers, and the CSS above keeps it within the screen.