fbpx

How to Move Jetpack Social Buttons with Genesis

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.

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 sharing_display().

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 sharing_display().

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 function sharing_display() and echo the output to the screen.

Lines 10 & 11
We use the WordPress add_action function to “hook” into the genesis_before_post_content hook, which unsurprisingly allows you to do stuff before the post content is output to screen.

Note: the genesis_before_post_content hook has been deprecated and if you are using the newer HTML5 templates please use the genesis_before_entry_content hook instead.  I’ve included both here so you can delete the one that doesn’t apply to your template.

The second argument to the add_action function is the name of our custom function zpd_add_jetpack_share_buttons 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.

Keep In Touch

Wil

Wil is a dad, consultant, developer, conference organiser, speaker and business mentor. He co-organizes the WordPress Sydney meetup group and has been on the orgnising committee for WordCamp Sydney since 2014. He speaks at many technical events and contributes to the WordPress open source project. His likes are chillies, craft beer and electrogravitics.

2 thoughts on “How to Move Jetpack Social Buttons with Genesis”

  1. Very helpful, though genesis_before_post_content has been depreciated. So if you are using an HTML5 template replace it with genesis_before_entry_content

Comments are closed.

If You Enjoyed This Post
Join Our Newsletter
Give it a try, you can unsubscribe anytime.
Close