Disable Comments on WordPress’ Jetpack Carousel

WordPress Jetpack Carousel - Disable Comments

Several people have posed questions about how to disable comments from Jetpack Carousel module in WordPress. There is a method that has already been discovered, but it requires a change to a plugin file. I’ll briefly mention those, but since I’m very much against changing any core or plugin files directly, I’ll show you another way to disable comments using CSS.

If AJAX calls are causing issues with your site, the pure CSS method won’t help. But if all you want to do is hide the ability to comment, read on.

Aahan Krish showed us how to disable comments using PHP code, in conjunction with a change to the jetpack-carousel.js file included with the plugin. Aahan piggy-backed off of work by William Thomas on disabling the AJAX calls to getComments for each image in the carousel (be sure to read through the comment thread).

If the load on your site from the AJAX calls to getComments is not an issue, and you’d just like to hide the comment form…

How to Disable Comments on Jetpack Carousel with CSS

You can place this code in several different places. It’s up to you where you put it. And depending on where you add it, you might not need the !important declarations. I’ve chosen to add this to the “Custom CSS” Jetpack module (ironic?), which loads before the “Carousel” CSS, thus why I am using !important.

The first declaration hides the Jetpack comment form container, the “Comment” link located to the right, directly above the “View Full Size” image link, and the “Loading Comments…” text.

You are left with a small gray area where the “Comment” link used to be. This is due to some padding & a background color. Remove the padding & the space is gone.

/* Jetpack: Carousel
****************************************** /

/* Hide Comment Form & Link */
#jp-carousel-comment-form-container, /* Form */
div.jp-carousel-buttons a.jp-carousel-commentlink, /* Link */
#jp-carousel-comments-loading /* Loading Comments text */ {
	display: none !important;
}

/* Remove Padding from Link Area */
.jp-carousel-buttons {
	padding: 0 !important;
}

“Loading Comments…” Text

Unfortunately, you will still (albeit, very briefly) see the “Loading Comments…” message appear while each new image is loading. This is added via javascript, and even the plugin author says it cannot be removed.

@Sebas helped us out with a way to disable the “Loading Comments…” text. I’ve updated the CSS code above to include a line for #jp-carousel-comments-loading { display: none; }.

12 Commentson "Disable Comments on WordPress’ Jetpack Carousel"

  1. /

    #jp-carousel-comments-loading span {
    display: none;
    }

    → Reply
    1. (Author) /

      Thanks Sebas. I’ve updated the code in my example CSS above. For reference, just using #jp-carousel-comments-loading should do the trick. No need for the extra span tag.

  2. /

    Hi thanks a lot for this. I placed in the CSS the /* Jetpack: Carousel
    ****************************************** / to remove the comments and loading comments and I placed
    .jp-carousel-wrap a.jp-carousel-image-download {
    display:none;
    } to disable the image “full size”, but small gray area, the padding, is still there. Can you help me with this?
    Much appreciated, thanks, kind regards, Sandra

    → Reply
    1. /

      I added the following to get rid of that small gray area:

      .jp-carousel-image-meta
      {
      display:none;
      }

    2. (Author) /

      Thanks for the tip, Lori.

  3. /

    Amazing! Thank you very much! It solved my problem.

    → Reply
  4. /

    I know I am so dummy with CSS , I followed your instruction I did not resolve my problem.
    Clicked on Custom CSS and it sent to the Theme CSS instruction (as you can see in the attached screenshot) and I copied your instruction,  it removed the comments area but the “Comment” link located on the right and the possibility to  open the “View Full Side” are still there and it works.
    I removed:
    “/* Jetpack: Carousel
    ****************************************** /“
    but the Theme instruction informed me  that a comment code was not closed.
    What did I make wrong? What have I not understood?
    Please give me the correct CSS instruction and where to put it, here you can see the screenshot of the page:
    https://drive.google.com/file/d/0Bzy-6-A97EnvTEFBWkExLXJTRDQ/view?usp=sharing

    → Reply
    1. (Author) /

      Lori’s tip above should remove the comment area:

      .jp-carousel-image-meta {
      display: none;
      }
  5. /

    Is there a way to do this while retaining the captions on mobile?

    → Reply
    1. (Author) /

      Warren,

      Sure, you could use a media query to only target certain screen sizes.

      @media screen and (min-width: 768px) {
        < -- code here -->
      }

      That would only apply the CSS to screens that are 768px wide and above. You could change 768px to be whatever width you’d like.

  6. /

    After I originally left a comment I seem to have clicked the
    -Notify me when new comments are added- checkbox and now every time a comment is added I recieve
    4 emails with the same comment. Is there an easy method you can remove me from that
    service? Kudos!

    → Reply
    1. (Author) /

      Hi —

      I’m sorry that you’re receiving comment notification emails you don’t want (especially 4 of the same one! I’ll see if there’s a bug with my system.).

      There is no easy way for me to unsubscribe you from those, but you should be able to unsubscribe yourself using a link at the bottom of the email.

      Those subscriptions are powered by wordpress.com, and if you click the link at the bottom of the email, you should go to a wordpress.com page with all of your subscriptions listed. Just remove ours from the list.

      Here’s a screenshot on where to find the link in the email.

      Please let me know if that works for you.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.