Remove WordPress Jetpack CSS

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.