One of my favorite feature in Jetpack is sharing, but if you are a theme designer/developer like me, it can be really frustrating trying to customize it.
By adding a simple filter to functions.php or inc/jetpack.php if your theme is based on _s, you can actually avoid the Sharedaddy stylesheet from being enqueued.
/**
* Remove Jetpack's sharing script.
*/
function _s_remove_sharedaddy_script() {
remove_action( 'wp_head', 'sharing_add_header', 1 );
}
add_action( 'template_redirect', '_s_remove_sharedaddy_script' );
Now you can add you own custom CSS without worrying about multiple levels like .site-main .entry-content > .sharedaddy .sd-title, or having to use !important to overwrite the Sharedaddy stylesheet.
If you want to go a bit further, you can use some jQuery/Javascript. For example, if you want to create a link that, when you click on it, toggles the sharing buttons:
1) Let’s add some CSS to hide the div:
.sd-sharing-enabled:not(#jp-post-flair) {
display: none;
}
2) Then create some (very basic) jQuery to do the magic:
/*
* Create a toggle button for sharedaddy.
*/
function sharedaddy_toggle() {
// Create toggle button
$( '.sd-sharing-enabled:not(#jp-post-flair)' ).each( function() {
$( this ).before( '<a class="sharedaddy-sharing">Toggle Button</a>' );
} );
// Click to open
$( '.entry-content' ).on( 'click', '.sharedaddy-sharing', function() {
$( this ).next( '.sd-sharing-enabled' ).toggle();
} );
}
Make sure you load the function after the window is loaded and after a post-load (for Infinite Scroll).
3) Ta-da!
You can do the same with the Related Posts module or Likes module like so:
/**
* Remove Jetpack's related-posts and likes scripts.
*/
function _s_remove_jetpack_scripts() {
wp_dequeue_style( 'jetpack_related-posts' );
wp_dequeue_style( 'jetpack_likes' );
}
add_action( 'wp_enqueue_scripts', '_s_remove_jetpack_scripts' );
Be aware that the Likes module isn’t fully customizable because the buttons are located in an iframe.
Have fun!
ThemeShaper 
This is a pretty cool approach to customizing the sharing module. Cool to see a somewhat different approach than what I had wrote.
I am curious as to why you would not just check the advanced option to prevent CSS & JavaScript, in lieu of removing the action.
Either way, great write up.
Oh you could of course but in this tutorial I want to make sure the default styles aren’t loaded because many users don’t tick/know the “Disable CSS and JS” option.
Also some theme developers/designers might want to use Jetpack’s Sharing Module but without the default styles and instead ship the theme with its own style. This is the right way to do it 🙂
Yes, definitely the way to go if you are using custom styles in a theme. I missed that part at the very beginning of the post and thought this article was more geared toward the end user.
Over the years I have found that using custom styles (for a specific plugin) in a theme to be more work than the benefit produced. Some plugin developers often change styles or the method to override the styles (sometimes without notice). This is why I try to avoid this practice, unless the plugin is well established and trustworthy (like Jetpack!).
Although I have not done it yet in a theme, I would feel comfortable using the method for Jetpack. Thanks for the information!
Great post and site looks great too. I’m intreagues by the connect feature in the menubar (next to search). How did you do that? Is it a slighly altered version of this tutorial?
This is totally different 🙂
The current theme used on ThemeShaper is Further (no longer available) which became TwentyFourteen and Further had a theme option to add social links.