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 