{"id":41134,"date":"2014-06-19T22:07:01","date_gmt":"2014-06-19T16:37:01","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=41134"},"modified":"2026-10-08T19:14:55","modified_gmt":"2026-10-08T13:44:55","slug":"add-popup-comments-in-wordpress-posts","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/","title":{"rendered":"How to Add Popup Comments in WordPress Posts (Modern Dialog Method)"},"content":{"rendered":"<p>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 &#8220;Close&#8221;, and carry on reading. You can still add popup comments in WordPress posts today, but the old built-in method has gone. Here&#8217;s the modern way to do it with the HTML <code>&lt;dialog&gt;<\/code> element, in a few lines of code and no plugin.<\/p>\n<p><strong>Quick answer:<\/strong> WordPress removed <code>comments_popup_script()<\/code> and <code>comments_popup_link()<\/code> in version 4.5. Instead, wrap <code>comments_template()<\/code> in a <code>&lt;dialog id=\"comments-dialog\"&gt;<\/code> element in your <code>single.php<\/code>, add a button that calls <code>showModal()<\/code> to open it, and a small script that reopens it after someone posts a comment.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6ae3f6ab01c59\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1a202c;color:#1a202c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1a202c;color:#1a202c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ae3f6ab01c59\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#What_popup_comments_look_like\" >What popup comments look like<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#The_old_method_no_longer_works\" >The old method (no longer works)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#How_to_add_popup_comments_in_WordPress_with\" >How to add popup comments in WordPress with &lt;dialog&gt;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#Step_1_Replace_the_comments_template_in_singlephp\" >Step 1: Replace the comments template in single.php<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#Step_2_Add_a_little_JavaScript\" >Step 2: Add a little JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#Step_3_Style_the_popup_window\" >Step 3: Style the popup window<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#Is_this_good_for_SEO\" >Is this good for SEO?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#Tips_for_better_popup_comments_in_WordPress\" >Tips for better popup comments in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#Frequently_asked_questions\" >Frequently asked questions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#Does_comments_popup_link_still_work\" >Does comments_popup_link() still work?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#Do_I_need_a_plugin_for_popup_comments\" >Do I need a plugin for popup comments?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/add-popup-comments-in-wordpress-posts\/#Does_the_dialog_work_on_mobile\" >Does the dialog work on mobile?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_popup_comments_look_like\"><\/span>What popup comments look like<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-41147\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/popup-comments.png\" alt=\"Popup comments in WordPress posts\" width=\"500\" height=\"382\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/popup-comments.png 500w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/popup-comments-150x114.png 150w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/popup-comments-300x229.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>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.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"The_old_method_no_longer_works\"><\/span>The old method (no longer works)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When we first wrote this tutorial in 2014, WordPress had built-in functions for this. You added <code>&lt;?php comments_popup_script( 400, 500 ); ?&gt;<\/code> to <code>header.php<\/code> to open a 400 \u00d7 500 pixel browser window, then <code>comments_popup_link()<\/code> in <code>single.php<\/code> for the link, and styled it with a <code>comments-popup.php<\/code> template.<\/p>\n<p>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.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_add_popup_comments_in_WordPress_with\"><\/span>How to add popup comments in WordPress with &lt;dialog&gt;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The HTML <code>&lt;dialog&gt;<\/code> element creates an accessible modal window that works in all modern browsers, with no jQuery or library needed.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Replace_the_comments_template_in_singlephp\"><\/span>Step 1: Replace the comments template in single.php<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In your <strong>child theme&#8217;s<\/strong> <code>single.php<\/code> (or the template part your theme uses), find:<\/p>\n<pre><code>&lt;?php comments_template(); ?&gt;<\/code><\/pre>\n<p>Replace it with:<\/p>\n<pre><code>&lt;button type=\"button\" class=\"btn btn-primary\" id=\"open-comments\"&gt;\r\n  &lt;?php comments_number( 'Post a comment', '1 comment', '% comments' ); ?&gt;\r\n&lt;\/button&gt;\r\n\r\n&lt;dialog id=\"comments-dialog\" aria-label=\"Comments\"&gt;\r\n  &lt;button type=\"button\" class=\"close-comments\"&gt;Close&lt;\/button&gt;\r\n  &lt;?php comments_template(); ?&gt;\r\n&lt;\/dialog&gt;<\/code><\/pre>\n<p>The three <code>comments_number()<\/code> texts are shown when there are no comments, one comment, or more. We style the button with <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/07\/twitter-bootstrap\/\">Bootstrap<\/a> classes, but any CSS works.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Add_a_little_JavaScript\"><\/span>Step 2: Add a little JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Add this just before the closing <code>&lt;\/body&gt;<\/code> tag (or in your theme&#8217;s script file):<\/p>\n<pre><code>&lt;script&gt;\r\nconst dlg = document.getElementById('comments-dialog');\r\nif (dlg) {\r\n  document.getElementById('open-comments').addEventListener('click', () =&gt; dlg.showModal());\r\n  dlg.querySelector('.close-comments').addEventListener('click', () =&gt; dlg.close());\r\n  \/\/ Reopen after a comment is posted or a comment link is followed\r\n  if (\/^#(comment|respond)\/.test(location.hash)) dlg.showModal();\r\n}\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>Pressing <strong>Esc<\/strong> also closes the dialog, built into the browser.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Style_the_popup_window\"><\/span>Step 3: Style the popup window<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code>#comments-dialog {\r\n  width: min(640px, 92vw);\r\n  max-height: 85vh;\r\n  overflow: auto;\r\n  border: 0;\r\n  border-radius: 8px;\r\n  padding: 24px;\r\n}\r\n#comments-dialog::backdrop { background: rgba(0, 0, 0, .6); }<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Is_this_good_for_SEO\"><\/span>Is this good for SEO?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Yes. Unlike the old popup window, the comments are still part of the post&#8217;s HTML, just hidden until opened, so search engines can still read them. If you&#8217;d rather move comments off the post entirely, see how to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/wordpress-comments-on-new-page\/\">show WordPress comments on a new page<\/a>. To speed up posts with lots of comments instead, you can <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2021\/01\/lazy-load-comments-in-wordpress-blogs\/\">lazy load comments<\/a>.<\/p>\n<p>Need to add a template file to your theme? Here&#8217;s how to <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2014\/06\/wordpress-theme-files-without-ftp\/\">add PHP files to a WordPress theme without FTP<\/a>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tips_for_better_popup_comments_in_WordPress\"><\/span>Tips for better popup comments in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>Show the count clearly:<\/strong> a button such as &#8220;Read 24 comments&#8221; invites more clicks than a plain &#8220;Comments&#8221; link.<\/li>\n<li><strong>Keep the form visible:<\/strong> place the comment form at the top of the popup window on busy posts, so readers don&#8217;t have to scroll past every comment to reply.<\/li>\n<li><strong>Test keyboard access:<\/strong> 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.<\/li>\n<li><strong>Clear your cache:<\/strong> after editing theme files, purge your caching plugin and CDN so visitors get the new code.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Frequently_asked_questions\"><\/span>Frequently asked questions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Does_comments_popup_link_still_work\"><\/span>Does comments_popup_link() still work?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. It was deprecated in WordPress 4.5 and no longer opens a popup window.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Do_I_need_a_plugin_for_popup_comments\"><\/span>Do I need a plugin for popup comments?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No. The <code>&lt;dialog&gt;<\/code> 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.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Does_the_dialog_work_on_mobile\"><\/span>Does the dialog work on mobile?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yes. It works in all current mobile browsers, and the CSS above keeps it within the screen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want readers to open the comments in a popup window without leaving the article? Years ago, popup comments were everywhere;&#8230;<\/p>\n","protected":false},"author":4,"featured_media":41147,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49,17],"class_list":["post-41134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/41134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=41134"}],"version-history":[{"count":2,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/41134\/revisions"}],"predecessor-version":[{"id":63668,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/41134\/revisions\/63668"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/41147"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=41134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=41134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=41134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}