Overriding JetPacks CSS Styles in WordPress

April 2, 2015 -

You can override JetPacks CSS styles without using the !important declaration with a few tweaks in your functions.php file.

Currently the JetPack CSS style sheet is loaded late in the header of the document pretty much after your main theme’s style sheet, it is a 53kb minified style sheet which has CSS for a number of the JetPack modules all concatenated in the one file.

Even if the modules are not active their CSS gets loaded in the minified style.

Since it’s loaded after your themes style sheet any similar selectors declared in your theme’s style sheet will not take precedence. You have two options either use the !important declaration or make the selector more specific, since it’s considered best practice not to use the !important tag the latter is the better option.

An example of a JetPack CSS selector (which is very specific)…

div#jp-relatedposts h3.jp-relatedposts-headline {
 //
 }

Can be overridden in your themes stylesheet by being more specific by using a parent containing class, like so…

.content div#jp-relatedposts h3.jp-relatedposts-headline {
 //
 }

Turning JetPacks CSS Minification Off

JetPack provides a filter that allows you to turn off the minification and concatenation off

add_filter( 'jetpack_implode_frontend_css', '__return_false' );

By returning false only the active modules CSS files are loaded in a non minified style and also loaded higher in the head, if you are using an action with a priority to load your own theme style sheet late then the JetPack CSS will now load before your style.

Lets say you are just using the Related Posts module, well now the CSS file size is 5kb which is quite a reduction, even more efficient would be to take the CSS of the Related Posts module and just add it with your customisations to your own theme style sheet – which will save another file server request.

To do this you also need to deregister the JetPack CSS Module.

<?php
//Do not copy the above php tag
// Stop JetPacks Minified/Concatention CSS file
add_filter( 'jetpack_implode_frontend_css', '__return_false' );
//Remove JepPack CSS
function themeprefix_remove_jetpack_css() {
wp_deregister_style( 'jetpack_related-posts' ); //Related Posts
}
add_action('wp_enqueue_scripts ', 'themeprefix_remove_jetpack_css' );
view raw jetpack.php hosted with ❤ by GitHub

To do this for any of the other modules these are the scripts to deregister

<?php
//Do not copy the above php tag
// Stop JetPacks Minified/Concatention CSS file
add_filter( 'jetpack_implode_frontend_css', '__return_false' );
//Remove JepPack CSS
function themeprefix_remove_jetpack_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_enqueue_scripts ', 'themeprefix_remove_jetpack_css' );
view raw jetpack-all-modules.php hosted with ❤ by GitHub

Bonus Round – Popular Post Tabbed Widget

If you also use the separate Popular Posts Tabbed Widget for Jetpack, you can do the same thing in that you can dequeue the CSS and just add it in your own style sheet.

<?php
//Do not copy the above php tag
//Popular Posts CSS from WIdget
function themeprefix_style_pop_posts() {
wp_dequeue_style( 'pptwj-widget-tab-css' );
wp_deregister_style( 'pptwj-widget-tab-css' );
}
add_action( 'wp_enqueue_scripts', 'themeprefix_style_pop_posts', 20);
view raw pop-posts.php hosted with ❤ by GitHub

Related Posts:

Categorized CSS, WordPress