How to Reposition Jetpack’s Sharing icons and Like button

Jetpack is one of the most popular and used plugin available for free at the WordPress plugin directory.
Among the huge list of its feature include the social sharing icons previously known as sharedaddy which allow visitors to share your content to Facebook, twitter and many other social networks.

By default, when the sharing feature is activated, the sharing buttons are printed at the end of post and page content. There is no option in the settings page to choose where you want the buttons to be displayed.
I never liked the idea of the sharing button showing at the end of a post or page content; I guess a lot of us also don’t like it.
In this succinct tutorial, you will learn how to remove and reposition the sharing buttons to a location of your choice.

Moving the Sharing Buttons

Firstly, the sharing buttons need to be removed from the default location.


function remove_jetpack_share_button() {
    remove_filter( 'the_content', 'sharing_display',19 );
    remove_filter( 'the_excerpt', 'sharing_display',19 );
}

add_action( 'loop_start', 'remove_jetpack_share_button' );

If you have Jetpack’s Like button feature activated and wish to remove it for repositioning, add the code below to our remove_jetpack_share_button function.


if ( class_exists( 'Jetpack_Likes' ) ) {
        remove_filter( 'the_content', array( Jetpack_Likes::init(), 'post_likes' ), 30, 1 );
    }

We have successfully removed the sharing buttons from showing after post/page content.
To print the sharing buttons in the area you want the Sharing or Like buttons to appear, use the following code:

For sharing buttons


if ( function_exists( 'sharing_display' ) ) {
    sharing_display( '', true );
}

For Like button


if ( class_exists( 'Jetpack_Likes' ) ) {
    $custom_likes = new Jetpack_Likes;
    echo $custom_likes->post_likes( '' );
}
Practical Use Cases

Editing your theme’s template files and pasting the Sharing and Like template tag or PHP functions could be a daunting thing to do and you could lose the modification after a theme upgrade.
Let’s see how to reposition the buttons without having to edit each and every theme file.

Display Sharing buttons before post content

The following code is theme agnostic (works in all WP themes).


add_action('the_content', 'before_post_content');

function before_post_content( $content ) {
    if ( function_exists( 'sharing_display' ) )
    return sharing_display( '', true ) . $content;
}

Jetpack's sharing buttons showing after title or before content

If you are using Genesis framework’s or any of it child themes, the code below will print the sharing buttons after post title and before the post content.


add_action('genesis_after_post_title', 'genesis_share_before_content');

function genesis_share_before_content() {
    if ( function_exists( 'sharing_display' ) )
    return sharing_display( '', true );
}

To programmatically embed the sharing and the like buttons in a location other than before post content, change the Action hook to the given area’s hook name.
For example, say you want the buttons to be printed at your WordPress site footer i.e. before the closing </body>, change the name of the Action to wp_footer like this:


add_action('wp_footer', 'share_button_footer');

function share_button_footer() {
    if ( function_exists( 'sharing_display' ) )
    return sharing_display( '', true );
}

Happy Coding…

Don’t miss out!
Subscribe to My Newsletter
Invalid email address