Select Page

Here’s how to move the Jetpack social buttons to the top of the post if you’re using the Genesis framework for your theme.

Jetpack provides a great module for adding social buttons to your posts, however, it puts them at the bottom of the page.

Sometimes you want to have greater control over where those buttons appear.

In this example we’ll be removing the buttons from the bottom of the post and relocating them to the top.

[gist id=8142626 file=functions.php]

Line 1

Comment – comments are important in code.  You may know what you’re doing today but what about in 6 months time?

Lines 2 – 8
Our custom function containing the code to remove and output the social buttons.

Lines 3-4
Jetpack outputs the social buttons by using  a WordPress filter to append the button code to the post content.

You can see the code in the file /wp-content/plugins/jetpack/modules/sharedaddy/sharing-service.php lines 457-599 – function [codelet]sharing_display()[/codelet].

Appending the social buttons to the content makes it appear at the end of the page.

The easiest way to stop this is to remove the filters that Jetpack uses, hence, the code and therefore buttons are never appended to the content.

Note: when removing filters, you must also include the exact same priorities that were used when adding the filters.   In this case the priority is the third argument 19.

Lines 6 & 8
The function Jetpack uses to output the social share buttons is [codelet]sharing_display()[/codelet].

Here we check to see if the function exists before we call it, preventing any unnecessary errors if the plugin is ever disabled and you forget to remove this bit of code.

Line 7
We call the [codelet]function sharing_display()[/codelet] and echo the output to the screen.

Line 9
We use the WordPress add_action function to “hook” into the [codelet]genesis_before_post_content[/codelet] hook, which unsurprisingly allows you to do stuff before the post content is output to screen.

The second argument to the add_action function is the name of our custom function [codelet]lc_add_jetpack_share_buttons[/codelet] line 2-8.

So our function to remove the sharing buttons at the bottom and output new ones at the top of the post content is called by Genesis just before it deals with the page content – perfect!

Note: you do have to select which post types you want the buttons to appear on in the Jetpack Social configuration area.  In our example we only have “Posts” checked and hence buttons will only appear on posts.

The Result

Buttons Anywhere!

You can use this code as the basis for moving the buttons to anywhere you can find a Genesis hook area to put them in to.