Aug 092016
 

So there are some plugins out there to hide and show WordPress comments (notably the one named “Hide Show Comment“), but there are some things I didn’t like about it.

  1. They want you to pay for more options (I’m quite frugal).
  2. There is no option to hide the comment form – only the comments.

So here’s how you do it. We’ll be using jQuery (JavaScript) and inserting the code with a plugin.

  1. Install a plugin that lets you insert custom code.
    1. SEO Ultimate can do this under the “Code Inserter” section (use the “Before Item Content section).
    2. Insert Headers and Footers can do this (use the “Scripts in Header” section)
  2. Insert the script below.
<script type="text/javascript">
    jQuery(function(){
            // make the "leave a comment" text hide/show the comment form.
            jQuery('.comment-reply-title').click(function(){
                jQuery('.comment-form').slideToggle('fast');
            });

            // hide the comment form by default
            jQuery('.comment-form').hide();

            // make the text look like a link so the user knows it's clickable.
            // return false means the page will not reload.
            jQuery('.comment-reply-title').wrap("<a href="" onclick="return false;" >");

            // the reply button should always show the comment form
            jQuery('.comment-reply-link').wrap("<a href="" onclick="jQuery('.comment-form').show();" >");

            // the cancel reply link should always hide the comment form
            jQuery('.cancel-comment-reply-link').wrap("<a href="" onclick="jQuery('.comment-form').hide();" >");
        });
</script>

That’s all you need really. The rest is just nitpicking. One issue is that the comment form is not hidden by default. If we simply add some CSS to fix it, then people who have JavaScript turned off will never see the comment form. So we want to hide the comment form by default only when JavaScript is supported.

    1. Add the following JavaScript to the header.
<script type="text/javascript">
document.documentElement.className = "js";
</script>
  1. Add the following custom CSS using a plugin or your theme (for example the plugin “Simple Custom CSS“).
/** hide the comment form only if JavaScript is enabled. */
.js .comment-form { display: none; }

The JavaScript-dependent CSS was taken from https://css-tricks.com/snippets/javascript/css-for-when-javascript-is-enabled/.

  2 Responses to “Hide and Show the Comment Form in WordPress”

  1. Hi. My form now gets hidden successfully, using your code. However I don’t see a way to toggle it, as the “Leave a reply” line is not a clickable link. Any ideas please?
    e.g.http://www.skymania.com/wp/2017/07/how-to-see-perseid-meteor-shower-2017.html/12920/

  2. To answer my own question, I actually found a small plug-in that does exactly what I want. You can see it here: https://gist.github.com/beastaugh/200615
    I downloaded the zipped file of the code and renamed it to something intelligible, then uploaded that as a plugin in the normal way. I also edited it slightly to change the displayed text to “Click to expand” and changed the font and its size in the CSS section of the code. It works well in expanding the comment form when required.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)