Removing Jetpack CSS

Jetpack is a WordPress plugin that brings a ton of features to WordPress. You turn on the features as needed. At the time of this writing, rather than include a separate CSS file for each feature as needed, they load a large concatenated stylesheet with all the CSS together.

I was in a position where I was using a few Jetpack features but actually needed none of the CSS. This is what was able to completely stop any Jetpack CSS for me (for functions.php, or functionality plugin):

// First, make sure Jetpack doesn't concatenate all its CSS
add_filter( 'jetpack_implode_frontend_css', '__return_false' );

// Then, remove each CSS file, one at a time
function jeherve_remove_all_jp_css() {
  wp_deregister_style( 'AtD_style' ); // After the Deadline
  wp_deregister_style( 'jetpack_likes' ); // Likes
  wp_deregister_style( 'jetpack_related-posts' ); //Related Posts
  wp_deregister_style( 'jetpack-carousel' ); // Carousel
  wp_deregister_style( 'grunion.css' ); // Grunion contact form
  wp_deregister_style( 'the-neverending-homepage' ); // Infinite Scroll
  wp_deregister_style( 'infinity-twentyten' ); // Infinite Scroll - Twentyten Theme
  wp_deregister_style( 'infinity-twentyeleven' ); // Infinite Scroll - Twentyeleven Theme
  wp_deregister_style( 'infinity-twentytwelve' ); // Infinite Scroll - Twentytwelve Theme
  wp_deregister_style( 'noticons' ); // Notes
  wp_deregister_style( 'post-by-email' ); // Post by Email
  wp_deregister_style( 'publicize' ); // Publicize
  wp_deregister_style( 'sharedaddy' ); // Sharedaddy
  wp_deregister_style( 'sharing' ); // Sharedaddy Sharing
  wp_deregister_style( 'stats_reports_css' ); // Stats
  wp_deregister_style( 'jetpack-widgets' ); // Widgets
  wp_deregister_style( 'jetpack-slideshow' ); // Slideshows
  wp_deregister_style( 'presentations' ); // Presentation shortcode
  wp_deregister_style( 'jetpack-subscriptions' ); // Subscriptions
  wp_deregister_style( 'tiled-gallery' ); // Tiled Galleries
  wp_deregister_style( 'widget-conditions' ); // Widget Visibility
  wp_deregister_style( 'jetpack_display_posts_widget' ); // Display Posts Widget
  wp_deregister_style( 'gravatar-profile-widget' ); // Gravatar Widget
  wp_deregister_style( 'widget-grid-and-list' ); // Top Posts widget
  wp_deregister_style( 'jetpack-widgets' ); // Widgets
}
add_action('wp_print_styles', 'jeherve_remove_all_jp_css' );

Thanks to Jon Bellah, TJ Kelly, George Stephanis, and everyone else who chimed in to help me.

I suspect this will change over time. It seems to me the best possible way to do this would be to serve a concatenated stylesheet for just the featured you have turned on, and have a single named thing you can deregister.

Comments

  1. User Avatar
    Galen Gidman
    Permalink to comment#

    I expect this to change over time as well Chris. They’ve only very recently begun concatenating the CSS, which makes me think it’s step 1 in incrementally working their way towards a system where the concatenated file only contains styles for the active modules.

  2. User Avatar
    Willem-Siebe
    Permalink to comment#

    Hi,

    Just adding the filter is enough right? Why should I do all the rest, I don’t see them in my source code?

    Kind regards,

    Willem

    • User Avatar
      Stefan
      Permalink to comment#

      Hi Chris,

      I’d also like to know if it’s sufficient to just add the filter.

      Thanks, Stefan

    • User Avatar
      Galen Gidman
      Permalink to comment#

      You need to dequeue the rest of the styles because the Jetpack plugin enqueues them, not your theme source code.

    • User Avatar
      Willem-Siebe
      Permalink to comment#

      Hi Galen, can you explain a little bit more. When I add the filter, there is no CSS from Jetpack anymore in my sourcecode, why is that nog enough? Also here they talk only about this filter: https://www.twirlingumbrellas.com/wordpress/remove-deregister-jetpack-contact-form-styles/.

      Kind regards,

      Willem

    • User Avatar
      Galen Gidman
      Permalink to comment#

      This code:

      add_filter( 'jetpack_implode_frontend_css', '__return_false' );
      

      … only serves to tell Jetpack that you don’t want to load the concatenated Jetpack stylesheet. Instead, it loads the CSS on a per-module basis, allowing you to dequeue the styles for individual modules at will.

      It sounds like you’re saying that if you pass false to the jetpack_implode_frontend_css filter it’s not outputting any Jetpack styles period, concatenated or otherwise. From my understanding, that’s not the way it’s supposed to work and it’s not been my experience. Do you have a live example of this code anywhere?

    • User Avatar
      Willem-Siebe
      Permalink to comment#

      Hi Galen,

      Just to understand, there is a filter for ‘frontend_css’, but in the long list of other CSS files I also see ‘stats’ for example. But this is backend right?

      Anyways, yes, I have a site where I only use that filter now. But I don’t use much of Jetpack actually, but I do use the stats, but that is backend, but anyways, if I go to the stats page and look at the source I don’t see any ‘stats_reports_css’.

      Since the filter is frontend and I already had the extra sidebar widgets module activated, I now included a facebook widget from Jetpack in the frontend of my website, looking at the source code, again no ‘jetpack-widgets’ CSS file.

      Do you want me to do other tests? Please let me know to get this clear.

      Kind regards,

      Willem

  3. User Avatar
    TJ Kelly
    Permalink to comment#

    Just chiming to say thanks for linking to me and happy I could help! Keep fighting the good fight.

  4. User Avatar
    Carlos
    Permalink to comment#

    You save my time!! Thanks!

  5. User Avatar
    pedro
    Permalink to comment#

    hi,
    great list, but you have this line repeated

    wp_deregister_style( ‘jetpack-widgets’ ); // Widgets

    in alphabetic order:
    wp_deregister_style( ‘AtD_style’ ); // After the Deadline
    wp_deregister_style( ‘gravatar-profile-widget’ ); // Gravatar Widget
    wp_deregister_style( ‘grunion.css’ ); // Grunion contact form
    wp_deregister_style( ‘infinity-twentyeleven’ ); // Infinite Scroll – Twentyeleven Theme
    wp_deregister_style( ‘infinity-twentyten’ ); // Infinite Scroll – Twentyten Theme
    wp_deregister_style( ‘infinity-twentytwelve’ ); // Infinite Scroll – Twentytwelve Theme
    wp_deregister_style( ‘jetpack-carousel’ ); // Carousel
    wp_deregister_style( ‘jetpack_display_posts_widget’ ); // Display Posts Widget
    wp_deregister_style( ‘jetpack_likes’ ); // Likes
    wp_deregister_style( ‘jetpack_related-posts’ ); //Related Posts
    wp_deregister_style( ‘jetpack-subscriptions’ ); // Subscriptions
    wp_deregister_style( ‘jetpack-slideshow’ ); // Slideshows
    wp_deregister_style( ‘jetpack-widgets’ ); // Widgets
    wp_deregister_style( ‘noticons’ ); // Notes
    wp_deregister_style( ‘post-by-email’ ); // Post by Email
    wp_deregister_style( ‘presentations’ ); // Presentation shortcode
    wp_deregister_style( ‘publicize’ ); // Publicize
    wp_deregister_style( ‘sharedaddy’ ); // Sharedaddy
    wp_deregister_style( ‘sharing’ ); // Sharedaddy Sharing
    wp_deregister_style( ‘stats_reports_css’ ); // Stats
    wp_deregister_style( ’tiled-gallery’ ); // Tiled Galleries
    wp_deregister_style( ‘the-neverending-homepage’ ); // Infinite Scroll
    wp_deregister_style( ‘widget-conditions’ ); // Widget Visibility
    wp_deregister_style( ‘widget-grid-and-list’ ); // Top Posts widget

  6. User Avatar
    sunipeyk

    Oh oh Galen. So ‘good job’. Thanks a lot. From 2014 to today, save a lot spped of my site. I am gone correct it; ‘great job’, for me.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag