Tutorials WordPress

Disable Comments on WordPress’ Jetpack Carousel

Updated

Written by

Dave Warfel

Reading Time

2 minutes

If you buy something from one of our links, we may earn a commission.

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; }.

Dave Warfel

LinkedIn  •  X (Twitter)
Dave has been working with WordPress since 2011. He's built 100s of client sites and almost a dozen of his own. He's tested almost every plugin you can think of, hosted with at least 10 different companies, and gone down every SEO rabbit hole you can imagine. When's he's not tinkering with new software, you'll find him in the mountains of Colorado, trail running, summiting peaks, and rippin' downhills on his mountain bike. 🏔️🏃🚴🤸

16 responses to “Disable Comments on WordPress’ Jetpack Carousel”

  1. Sebas Avatar
    Sebas

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

    1. Dave Warfel Avatar

      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. Sandra Avatar

    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

    1. Lori Avatar
      Lori

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

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

    2. Dave Warfel Avatar

      Thanks for the tip, Lori.

  3. Dvaid Avatar

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

  4. Carlo Avatar
    Carlo

    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

    1. Dave Warfel Avatar

      Lori’s tip above should remove the comment area:

      .jp-carousel-image-meta {
      display: none;
      }
  5. Warren Peace Avatar
    Warren Peace

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

    1. Dave Warfel Avatar

      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. Rx2go Avatar

    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!

    1. Dave Warfel Avatar

      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.

  7. EMJ Avatar
    EMJ

    You’re a lifesaver! Worked perfectly within the Custom CSS of the Obsidian theme! All the other posts suggesting fiddling with Settings and plugins were useless. Thx!

    1. Dave Warfel Avatar

      You’re welcome. Glad it worked 👍🏼.

  8. Anirudh Avatar
    Anirudh

    It is still appearing
    Should i contact my hosting?

    1. Dave Warfel Avatar

      No, I wouldn’t. Most hosting companies aren’t going to help you with CSS changes like this.

      The article is several years old and it’s possible Jetpack has updated their code and that’s why it doesn’t work anymore.

Leave a Comment