Menu

Remove WordPress Jetpack CSS

WordPress Jetpack plugin. Removing the CSS inserted by WordPress’ Jetpack plugin is easy. Like most plugins, Jetpack uses WordPress’ native hook wp_enqueue_style to add their style sheets to your theme’s <head>. All we have to do is de-register their CSS handles and they’ll disappear.

Paste this block into your theme’s functions.php file to see your Jetpack CSS disappear.

Code to remove WordPress Jetpack CSS

function remove_jetpack_styles(){
wp_deregister_style('AtD_style'); // After the Deadline
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
}
add_action('wp_print_styles', 'remove_jetpack_styles');

The above PHP code below creates a function called remove_jetpack_styles and adds that function into WordPress’ wp_print_styles hook. Inside the function, the wp_deregister_style function runs on the CSS handles for 10 different Jetpack modules and their variations.

Paste that code into your theme’s functions.php file and your Jetpack modules will lose their styles. Delete or comment-out any of these lines that you don’t want. That is—if there are Jetpack modules whose styles you don’t want to remove, delete them from this list.

Disclaimer: I haven’t tested every module. I can confirm that this will work perfectly with the Grunion Contact Form and Jetpack Widgets modules. I’m making an assumption on all the other modules. Please let me know in the comments below if your mileage varies.

Why remove Jetpack’s CSS? Why not override it?

I can hear you asking me. Why don’t I just add rules to my own CSS that will override Jetpack’s rules and style things my way? Because that would cause unnecessary duplication and code bloat. Because dealing with inheritance and hierarchical specificity is a pain in the ass. And because I’m a perfectionist with my style sheets.

Long story short: get out of my way, Jetpack. This is my website and I’m styling it how I want to. (Frankly, I think WP should allow users to toggle default styles on and off.)

Don’t go too crazy.

WordPress included their Jetpack CSS for a reason. It may not be wise to strip it out entirely. But if used sparingly, this can be a pretty handy technique. For my purposes, I strip Grunion Contact Form and Jetpack Widgets style sheets. I’m still experimenting with restyling those elements myself. I may copy some of their default CSS and modify it to my liking, but the jury’s still out on that.

Don’t modify the plugin.

As with all plugins and core code, make sure you don’t modify the plugin itself. Future updates will overwrite your changes and you’ll have to do the work all over again. Plus, if you’re not careful, you could break something. Your theme’s functions.php file is designed for exactly that purpose—extending and modifying core and plugin functionality.

Happy Jetpacking.

4 thoughts on “Remove WordPress Jetpack CSS

  1. Pieter Brink

    Everytime I add !important; behind a line of CSS – a little piece of my soul dies :-) SO this should save me from that – Thanks. I am looking to combine as many style sheet into one as possible – this might be a good way to get this do too…. but as you say “Don’t go to crazy”… thanks TJ!

Leave a Reply